ギター練習
Guitar Practice Looper
YouTube動画の好きな区間を繰り返し、速度と再開前の待ち時間を調整して弾くための練習アプリ。フレーズは開始と終了位置を含めて保存し、動画はマイリストにまとめられる。検索だけをWorker経由にしてAPIキーをブラウザへ渡さない。
公開サイトを見る （新しいタブ）
技術スタック
| 技術 | このサイトでの役割 |
|---|---|
| React | 動画検索、区間設定、フレーズ保存、マイリストを一つの練習画面として管理する。動画を選ぶと保存済みの条件も画面へ戻す。 |
| TypeScript | 再生状態と保存データの型を定義する。区間や読み込んだJSONは実行時にも検査し、保存内容の形式を揃える。 |
| YouTube IFrame Player API | 動画の再生、停止、移動、対応する再生速度の取得を行い、区間リピートの操作へつなぐ。動画ごとの対応速度を参照する。 |
| localStorage | フレーズとマイリストをブラウザ内に保存する。JSONの書き出しと読み込みで利用者が控えを持ち、別の保存領域へ移せる。 |
| Cloudflare Workers | YouTube検索を代理し、APIキーをSecretから使う。検索結果にはキャッシュと回数制限を適用する。 |
処理の流れ
動画を選ぶ
曲名による検索または動画URLからIDを取得し、YouTubeの埋め込みプレイヤーへ渡す。
区間を繰り返す
開始点と終了点、速度、待ち時間を設定し、再生と待機を切り替えながら区間の先頭へ戻す。
練習を保存する
区間と再生設定をフレーズとして保存し、動画のマイリストと共にブラウザ内で読み直す。
控えを持ち出す
フレーズとマイリストをJSONで書き出し、保存内容を検査してから読み込めるようにする。
実装の工夫
待機を含む再生制御
ループ制御を停止、待機、再生の状態に分ける。終了点へ達したら開始点へ戻して待機を挟み、再生操作やシークで状態が変わった場合は待機やループを整理するため、意図しない再開を抑える。動画の外へ移動した場合も状態を更新する。
動画に応じた速度
再生速度の候補はYouTubeプレイヤーが返す値を取得する。固定の速度刻みを前提にせず、その動画が対応する速度を画面へ示す。保存したフレーズには速度と待ち時間も含まれ、開き直すと練習条件を戻せる。
検索キーをサーバー側へ置く
検索要求はWorkerが受け、Secretに設定したAPIキーでYouTubeへ問い合わせる。ブラウザへキーを送らず、同じ検索の応答をキャッシュし、検索回数を制限する構成で、外部APIへの要求を管理する。
構成と制約
- 再生と速度変更は動画の埋め込み可否、およびYouTubeプレイヤーが提供する速度に依存する。
- フレーズとマイリストはブラウザ内の保存領域ごとに分かれ、別URLや端末へ自動で移らない。
実装確認：