YouTube投稿一覧機能 画面設計書

最終更新: 2026-08-12

1. 概要

モーニング娘。公式 YouTube チャンネルおよび OG メンバー個人チャンネルの動画投稿を閲覧する画面群の設計書。 データ基盤（テーブル・型定義・収集ワークフロー）は youtube-data-design.md を参照。

• 親 Issue: #1097 / UI 実装: #1106

2. 画面一覧（YouTube 関連）

3. YouTube投稿一覧画面（/youtube）

概要

公式チャンネルページと OG メンバー各チャンネルページへの入口となるハブ画面。

表示コンテンツ

データソース

• Vercel Blob のメンバーデータ（youtubeChannel フィールドの有無で対象を判定。sortMembers 順で表示）

データなし表示

• 対象 OG メンバーが 0 件の場合は「チャンネル登録済みのOGメンバーがいません。」の glass カードを表示

4. YouTube公式チャンネル画面（/youtube/official）

概要

公式チャンネルの動画を 5 件ずつ Embed（<iframe>）で表示する。ページ切り替えで過去投稿も閲覧できる。

表示コンテンツ

ページネーション仕様

• 1 ページ 5 件、publishedAt 降順
• page が未指定・不正値（数値以外・0 以下）の場合は 1 ページ目として扱う
• 総ページ数が 1 の場合はナビ自体を非表示
• 先頭ページでは「前のページ」、最終ページでは「次のページ」を非表示

データソース

• getOfficialYoutubePosts(page, pageSize)（Neon youtube_posts、unstable_cache 30 分）

データなし表示

• 「投稿データが見つかりませんでした。」の glass カードを表示

5. YouTube OGチャンネル画面（/youtube/og/[memberId]）

概要

OG メンバー個人チャンネルの保存済み最新 5 件を Embed で固定表示する（ページ切り替えなし。収集側がメンバーごとに最新 5 件のみ保持するため）。

表示コンテンツ

memberId が存在しない場合

• メンバーが見つからない、または youtubeChannel 未設定の場合は notFound()（404）

データソース

• Vercel Blob のメンバーデータ（メンバー名・ハンドル）
• getOgYoutubePosts(memberId)（Neon youtube_posts、unstable_cache 30 分）

6. TOPページへの追加（新着投稿セクション）

YouTube セクション

• SectionLabel（color: #FF0000（YOUTUBE_COLOR）、label: YouTube、href: /youtube、取得日時付き）。セクション名が YouTube投稿一覧ページへのリンクになる
• 表示対象: 最新公開日（JST）と同日に公開された投稿（公式・OG 合算、最大 10 件）。TikTok セクションの「最新投稿日の投稿を表示」と同じ考え方
• カード（YoutubeNewPostCard）: ラベル（公式は「モーニング娘。公式」・OG はメンバー名）＋サムネイル（i.ytimg.com/vi/{videoId}/hqdefault.jpg、16、メディアタグ「YT」、メンバーカラーアクセント）＋タイトル（2 行 clamp）。クリックで YouTube の動画ページを新規タブで開く
• サムネイル読み込み失敗時（動画の削除・非公開化など）: タイトルのみの glass リンクカードにフォールバック（TikTok と同パターン）

7. コンポーネント構成

8. クロスリンク設計図

改訂履歴