hwc-media-content

メディアとリッチコンテンツ

Stimulus と Turbo Frames を使って、メディアを中心とした Hotwire の機能を実装します。

コアワークフロー

1. メディアモードを特定します。アップロード／プレビュー、再生コントロール、再生位置の永続化、埋め込みライブラリとの連携などがあります。
2. メディアの状態は Stimulus の値に保持し、値のコールバックとターゲットを通じてサードパーティの API と連携します。
3. まずブラウザー標準の API（URL.createObjectURL、Picture-in-Picture、IntersectionObserver、MediaSession）を使います。
4. disconnect() で割り当てたリソース（オブザーバー、blob URL、プレーヤーのインスタンス、タイマー）をすべて解放します。
5. 意図したクライアント状態（再生位置など）のみを永続化し、読み込み時に整合性を取ります。

ガードレール

• 画像／ファイルのプレビューを表示した後に、blob URL を無効化します。
• ブラウザー API（PiP／Web Share／MediaSession）には、機能検出を優先して使います。
• 通信に関する処理を混在させないでください。メディアの描画はここで扱い、ストリームのオーケストレーションはリアルタイム処理向けのスキルで扱います。
• 時間ベースの UI（歌詞、カルーセル、進捗ウィジェット）では、フレームを段階的に更新します。

必要なリファレンスのみを読み込む

現在のリクエストに必要なファイルのみを開いてください。

• blob URL を使ったアップロードのプレビュー：references/2024-09-17-stimulus-image-upload-previews.md
• プログレッシブ画像読み込みと Blurhash：references/2024-04-23-stimulus-progressive-image-loading-blurhash.md
• Picture-in-Picture の動作：references/2024-06-04-stimulus-picture-in-picture.md
• 動画の再生位置の永続化：references/2024-10-29-stimulus-video-progress-tracker.md
• WaveSurfer のマーカー追加フロー：references/2024-07-02-stimulus-wavesurfer-add-markers.md
• WaveSurfer のマーカー削除フロー：references/2024-07-30-stimulus-wavesurfer-remove-markers.md
• 時間に同期した歌詞のフレーム更新：references/2024-04-09-turbo-frames-scrolling-lyrics.md
• Turbo Frames での Swiper 自動再生：references/2025-01-14-turbo-frames-swiper-autoplay.md

全カタログは references/INDEX.md を参照してください。

関連スキルへのエスカレーション

• プッシュ型のデータ更新やカスタム Turbo Stream アクションには、hwc-realtime-streaming を使います。
• ページネーション／タブ／フィルターのナビゲーションには、hwc-navigation-content を使います。
• フォームのライフサイクルとバリデーション処理には、hwc-forms-validation を使います。
• 汎用的な読み込み／進捗／トランジションの UX には、hwc-ux-feedback を使います。
• Stimulus API のみを扱うアーキテクチャには、hwc-stimulus-fundamentals を使います。