2026-09-09 無音のPodcastプレビューとユーザー別モック履歴

2026-09-12追記: 現在のFREQUENCYはListenBrainzの公開音楽ランキング、PODCASTは通常アプリ接続の決定に従う。以下は切替前の判断記録。

ユーザーから、Voices / Podcastの画像をJoi Ito公式動画版のランダムな一場面へ置き換え、音声は再生せず、Frequencyにユーザーごとの最近聴いた回のモックを挿入するよう依頼された。コミュニティの発信から関心のある回を見つけ、公式番組へ進めるデモ導線として実装する。

• 指定された@joiitoチャンネルの「Joi Ito's Podcast (VIDEO)」再生リストから、動画版のカタログを作り、重複しない4回を選ぶ。公式IFrame Player APIから実尺を取得し、その範囲内のランダムな20秒を無音で繰り返す。
• 初期カタログは隈研吾、為末大、宮口あや、伊藤瑞子、Emily Yang、ローレンス・レッシグとの6つの対話とする。静止画付きの音声版と区別して、動画版リストへの所属と対話映像の表示を確認する。
• 開発中は映像を一時停止した状態で開く。「映像を無音で再開」を押したときだけ再生を始める。再読込やホームへ戻ったときも停止を初期状態にし、OSの動きを減らす設定が解除されても自動では再開しない。
• 元の縦スクロールに連動した横方向への場面移動を全サイズで維持する。動画レールはテキストカラムの外へ出し、画面の左端から右端まで広げる。高さが短い画面は見出しと余白を縮め、動画とタイトルを画面内に収める。
• 再生前にmuteとvolume 0を適用し、半分超が見えている1本のみを再生する。横長画面で複数のカードが見えるときは、縦スクロールの進捗に対応する場面を優先し、最後のカードまで再生対象を引き継ぐ。画面外、非表示タブ、イントロ中、停止指定では停止する。動きを減らす設定では自動再生せず、利用者が無音再開を選べる。
• 公式プレーヤーを切り抜いたり要素で覆ったりせず、タイトルと元動画へのリンクを下に置く。プレビュー自体は操作不可とし、音声付き視聴は公式ページで行う。埋め込み不可・通信失敗時はプレーヤーを取り除き、外部参照の公式サムネイルとリンクを残す。
• Frequencyは「あなたの最近聴いた回」として表示する。ユーザー指定に従い、新入り／メンバーの区分と切替ボタンは設けない。ブラウザごとに選んだ4回のモック履歴を専用localStorageキーへ保存し、再読込でも同じ履歴を保つ。日時と進捗は架空であり、実際のYouTube視聴履歴を取得しない。
• カタログと履歴の設定は public/demo-assets/gateway/gateway-data.js にまとめる。動画・音声・サムネイルをリポジトリへ複製せず、公式の埋め込みと画像URLを参照する。

参照: 番組公式サイト、指定されたPodcast一覧、動画版再生リスト、YouTube IFrame API、埋め込み表示の要件。

前の依頼に続き、テストはレスポンシブレイアウトのみ。先に動画枠と履歴カードの欠落を検査で確認してから実装した。ユーザーがローカル表示を確認・承認し、初期一時停止への変更後に自身の sangraal123/initiation リポジトリへのpushを指定した。