A|B|C
目次
- 1. JavaScript: 圧縮力編8
- 2. やってみたシリーズradioとcheckboxで遊んでみた。
- 3. html radioの使い方 JavaScript含む
- 4. 【練習】ブラウザで作ったコピペツール
- 5. eslint-plugin-strict-dependenciesを使ってみる
- 6. スライドアニメーション
- 7. やってみたシリーズ7編htmlStdio html CSS JavaScript 完結編
- 8. 「同じものを含む順列」その総数を求める（練習）
- 9. Google Colab上で実行しているループをボタンで止める
- 10. Materialize Tooltips のメッセージを動的に変更する
- 11. @testing-library/reactを使ってモーダル実装コードをテストする
- 12. 正弦波を使ってオリジナルパワポ背景生成器を作った
- 13. 【AOS.js】スクロールアニメーションの紹介
- 14. Node.jsでYouTube Data APIを叩いてみる
- 15. 【React】3つの「propsの渡し方」から理解する、分割代入
- 16. PC で利用できるマイクなどのオーディオ入力のリストで特定の名前のもののみ取得（p5.js Web Editor上で試す）
- 17. Amazonの商品情報をクリップボードにコピーするブックマークレット
- 18. javascriptで作るゲーム【ジャンケンマンフィーバー】完結編（音声出力）
- 19. Railsでの予約システムにおける非同期スロット更新とエラーハンドリング
- 20. 【備忘録】休業日と営業日の表示を非同期通信で切り替えるRailsアプリの実装
JavaScript: 圧縮力編8
皆様お待ちかねの圧縮力の記事となってしまいました。今回はhuffman符号と部分一致予測(通称PPM)の組み合わせを紹介します。
## 構造
まずは接尾辞木**のようなもの**によって文脈を構築し、高速化を図ります。その弊害としてhuffman符号は毎回最初から作り直す羽目になります(本末転倒)が、[前回の記事](https://qiita.com/mashuel/items/02b4794e6a65d3ac9d6b)のものよりは遥かに高速です。
0次の文脈(初期接尾辞木)には最初から全ての文字を登録しておきます。`s`は文字(実装上は整数)、`c`は頻度とします。
“`js
let Tree=[];
for(let a=256;a;)Tree[–a]={s:a,c:1};
“`
続いて指定次数まで木を伸ばす。`son`は下位の文脈、dadは上位の文脈。
“`js
for(let d=Tree[0],i=-1;d=d.son=[],d.dad=Tree,Tree=d,i++
やってみたシリーズradioとcheckboxで遊んでみた。
https://qiita.com/tattyan3/items/906d863584c85a8d0e26
上の項目の、改造版で遊んでみた。
動的にアンケートを行えないか試してみた。“`html my_test0.html
my_test0
eslint-plugin-strict-dependenciesを使ってみる
:::note
## 概要
[eslint-plugin-strict-dependencies](https://github.com/knowledge-work/eslint-plugin-strict-dependencies)は
- `module`,`allowReferenceFrom`の設定を個別に指定することでpackage-privateは実現できます！
- 以下を再調査します
- ルールの`allowSameModule`,`excludeTypeImportChecks`
- オプションの`pathIndexMap`
:::# 1. 背景 🖼️
TypeScirptではexport宣言した変数や関数は全てのファイルからimportできてしまいます。
しかし、モジュール内に処理をまとめすぎると肥大化してしまいます 😢package-privateが実現できれば外部のディレクトリからimportを制限できたり、モジュール管理がしやすくなると思います。
この記事でeslint-plugin-strict-dependenciesについて触れて
スライドアニメーション
#### はじめに
今回は、JavaScriptを使用したスライドアニメーションの実装について触れてみようと思います。私のまとめは"自分が見返せるように"という意味合いもあります。エンジニア初心者故、温かい目で見ていただけると嬉しいです。
#### 【スライドアニメーション】
このコードを使用すると、要素を指定した方向にスライドさせることが出来ます。
```ruby:例
function slideAnimation(element, direction, distance, duration){
/* 開始時刻を取得 */const startTime = performance.now();
/* スライドアニメーションの関数 */
function slide(timestamp) {
/* 現在時刻を取得し、開始時刻からの経過時間を計算 */
const currentTime = timestamp - startTime;/* 経過時間がアニメーションの継続時
やってみたシリーズ7編htmlStdio html CSS JavaScript 完結編
２か月かけたhtml,CSS,JavaScriptで編集できる、video,audio,image,table,textを組み合わせ時間経過で変えて一つの動画的に見られる、試行錯誤の結果が出ましたので、お知らせします。
なにぶん、大きくなったのでホームページにて、公開と致しております。アドレスは、
https://tattyan0-0.sakura.ne.jp/etc/index.html
お得なように、色々付属して大きくなっております。必要なのを残して掃除して使う事をお勧めします。
すべて、実働のファイルを提供いたしています。
検査不足の動作不具合などが見つかったら直していただいて結構です。著作権は保留「使わない」ので、二次頒布、類似品は、覚悟の上ですが、使用者におかれましたら、すべて無料ですから
騙されない様にしてください。は、ipywidgetsを使ってスレッドで非同期処理を用いて行うもののよう。残念なことにipywidgetsそのままだとセル実行中は処理されないらしく、これをスレッドにより回避している。ただ、実際に動かしてみるとループごとの表示ができない様子。ボタンで停止した直後にまとめてprint分が出力される。
ここで、colabにおいてボタンを用意する方法はもう一つあるわけで。ipywidgetsではなくjava scriptを用いる方法を自分のような人のために残しておく。
## 要するに何のコード
Google Colaborat
Materialize Tooltips のメッセージを動的に変更する
# 1. はじめに
Web サーバから非同期で取得したメッセージを [Materialize](https://materializecss.com/) の [Tooltips](https://materializecss.com/tooltips.html) で表示しようとしてハマったので、やり方をここに記載します。
# 2. 環境
Materialize 1.0.0
jQuery 3.7.1# 3. やりたかったこと
特定の要素にマウスポインタが置かれた時に、Web サーバーからデータを取得し、それを Materialize のツールチップで表示しようとしました。
その際、ツールチップのメッセージを動的に変更する方法が分からず、手探りで動きを確認しながら実装を行いました。# 4. デモ
「ここにマウスポインタを乗せてください」の上にマウスポインタを置くと、ローディングスピナーを載せたツールチップが表示され、2秒後にツールチップの表示内容が置き換わります。
```html:index.html
@testing-library/reactを使ってモーダル実装コードをテストする
## 概要
@testing-library/reactを使ってモーダル実装したコードのテストコードを書いてみました。## 仕様
実装内容としては、1つのページにモーダルを開くリンクと、初期状態がdisabledのボタンがあり
モーダルを開くリンクを押し、モーダルを閉じる際にボタンのdisabledを解除しボタンが押せるようにするというのが
実装ないようになります。## コード
```App.tsx
import React, { useState } from "react";
import { ModalItem } from "./components/ModalItem";export const App: React.FC = () => {
const [isOpen, setIsOpen] = useState(false);
const [disabled, setDisabled] = useState(true);const handleOpenModal = () => {
setIsOpen(!isOpen);
};
正弦波を使ってオリジナルパワポ背景生成器を作った
## はじめに
オリジナルパワポ背景、欲しいですよね。
それどころか、もしそれぞれのページに固有の背景パターンを作れたら、どうでしょう。もしセクションごとに背景パターンが異なると、「違う話を始めたな」と **視覚的に** 分かります。（もちろんちゃんとそれが分かるようにお話するべきであるのは間違いないですが、、、）
今回は、テキストからパワポ背景に変換するサイトを作りました。
これには[見てて面白いの王、見てて面白いキング](https://qiita.com/uts1_6/items/11e348ead4bae71571b8)であるところの （正弦波による） **合成波** を描画しています。
:::note
動作サイト: https://konbraphat51.github.io/SinDrawer/
レポジトリ: http
【AOS.js】スクロールアニメーションの紹介
# はじめに
AOS.js（Animate On Scroll）は、スクロール連動型アニメーションを簡単に追加できる軽量なJavaScriptライブラリです。このライブラリを使用すると、要素が表示されるタイミングに応じてフェードイン、スライドイン、ズームインなどのアニメーションを実装することができます。AOS.jsは、直感的な設定とカスタマイズオプションを提供し、開発者にとって使いやすいツールとなっています。# 利用方法
### 1. ライブラリのインクルード
AOS.jsを使用するには、まずライブラリをHTMLファイルにインクルードします。以下は、CDNを利用した例です。
```html
AOS.js Example
Node.jsでYouTube Data APIを叩いてみる
## この記事は
この記事は YouTube Data APIの `Video:list`, `Channel:list`, `Search:list` をNode.jsで叩いてみたメモ。## (余談)記事制作の背景
余談だが、次のサービスを作るのにAPIを叩く必要があった。
特に生放送の開始時間、終了時間、配信継続時間(動画の再生長)が欲しかった。https://hardcore-timetable.netlify.app/
...このサービスの内容を説明するのは記事の趣旨ではないので団長の思いで割愛する。
## 前提
Google Cloud Platform(GCP) でAPIキーを発行する必要があるが、このAPIキーは取得できているものとする。
いくつか記事を読んだが、 [こちら](https://qiita.com/koki_develop/items/4cd7de3898dae2c33f20)の記事がわかりやすかった。## Videos:list
[Videos:list](https://developers.google.com/youtube/v3/
【React】3つの「propsの渡し方」から理解する、分割代入
## まえがき
```js
const { id, title, date } = eventData;
```
「なんだこの書き方は...？」となりがちなJavaScriptの記法、その1つが**分割代入**ではないでしょうか？本記事は、**「分割代入という単語は知っているけれど仕組みはよく分かっていない」** あるいは、**「propsの渡し方がいくつかあって混乱している」** そんな悩みを解決する記事としてお届けします。
### 本記事で解説すること
- **基本を学ぼう**
1. 「オブジェクト」とは？
2. JavaScriptの「分割代入」とは？
3. Reactの「props」とは？
- **3つの「propsの渡し方」**
1. 分割代入は使わない `props.****`
2. コンポーネント内で分割代入 `const { aaa, bbb } = props`
3. 引数に分割代入 `const Xxxx = ({ aaa, bbb }) => {`## 基本を学ぼう
### ①「オブジェクト」とは？
- オブジェクトは、**プロパティ
PC で利用できるマイクなどのオーディオ入力のリストで特定の名前のもののみ取得（p5.js Web Editor上で試す）
以下の内容の、続きのような記事です。
●PC で利用できるマイクなどのオーディオ入力のリストを p5.js Web Editor上で見てみる（ブラウザの MediaDevices） - Qiita
https://qiita.com/youtoy/items/8339313b561c503ffe39上記の記事では、以下のように全てのオーディオ入力を取得していたのを、今回は特定の名称のもののみ取り出します。
それをまた、p5.js Web Editor上で試します。
## 前回のプログラムの編集版
今回の内容のベースになるものとして、前回の記事のプログラムを少し編集した内容を掲載します。```javascript
function setup() {
createCanvas(400, 400);navigator.me
Amazonの商品情報をクリップボードにコピーするブックマークレット
メルカリで出品する時にいちいち商品情報を入力するのが面倒なので、開いているAmazonのページから商品情報を取得してクリップボードにコピーするブックマークレットを作りました。
Amazonのページを開いた状態で、ブックマークレットをクリックすると、クリップボードに保存されます。
そのままメルカリなどにペーストしてください。
Apple製品同士だとMacからiPhoneにコピペできるから便利ですよね。## 取得できる情報
- 商品名
- 現在価格
- 商品概要など
## ブックマークレット
CodePenのページからリンクをブックマークバーにドラッグ&ドロップすれば簡単です。
javascriptで作るゲーム【ジャンケンマンフィーバー】完結編（音声出力）
前回まではこちらを参照してください。
https://qiita.com/tri-comma/items/e9790b420d9786f91149
https://qiita.com/tri-comma/items/be169c9163d637d82af3最後に音声再生を実装しました。
（ついでにコインも描画しました）# 前回ソースからの差分
```diff_javascript: [差分1] JankenFever.onstop()に引数追加、JFViewクラスの各イベントハンドラに音声再生処理を追加
if (this.status == this.STS.SPINING) {
const medal = this.ROULETTE[this.ridx];
this.medal -= medal;
this.player.medal += medal;
this.status = this.STS.STANDBY;
- this.onstop ? this.onstop() : null;
+ this.onstop ? this.ons
Railsでの予約システムにおける非同期スロット更新とエラーハンドリング
## はじめに
今回は、Railsでの予約システムにおける非同期スロット更新の実装方法と、発生したエラーの解決方法について共有します。## 問題点
予約システムの開発中に、日付を変更するたびにスロット情報を非同期で更新しようとしましたが、以下のエラーが発生しました。
```plaintext
ActiveRecord::RecordNotFound - Couldn't find Company with 'id'=undefined:
app/controllers/reservations_controller.rb:207:in `update_slots'
```## 解決方法
エラーの原因は、JavaScriptで`company_id`が正しく取得されず、リクエストに`undefined`が渡されていたことです。以下の手順で解決しました。
### ビューの修正
`company_id`を含むデータ属性を日付入力フィールドに追加します。
```erb
<%= form.date_field :date, id: 'for_customer_index_
【備忘録】休業日と営業日の表示を非同期通信で切り替えるRailsアプリの実装
## 内容
休業日と営業日を切り替えて表示するために、以下のコードを実装しました。
備忘録なので説明は省いています（面倒くさいので・・・）### `app/controllers/reservations_controller.rb`
```ruby
def update_slots
date = params[:date]
@date = Date.parse(date)
@company = current_company
@time_slots = generate_time_slots(@company)
@non_business_day = ScheduleService.is_non_business_day?(@company, @date)
@services = @company.services
@service_availability = ScheduleService.calculate_availability(@company, @date, @services, @time_slots)
response_data
