画面設計書

概要

MorningStatusApp は Next.js App Router をベースとした Web アプリケーション。 以下の35画面で構成される。

画面一覧

機能別の詳細設計書:

• プレイリスト画面
• 曲対比画面
• ユニット画面
• ライブ機能画面
• YouTube投稿一覧画面
• タイムライン画面
• メンバー関係性マップ画面
• メンバー関係性マップ レーダーチャート画面
• ラジオオンエア収集（UI設計セクションあり）
• Amebaブログ機能（UI設計セクションあり）

画面遷移図

Topページが全ドメインのハブとなり1枚の図に収まらないため（#1435）、「TOP画面内遷移図」「外部遷移図（タイムライン・年表・関係性マップ系列）」「外部遷移図（リリース・ライブ・ラジオ等イベント系列）」の3図に分割する。

TOP画面内遷移図

Topページから各セクション一覧への一次遷移のみを示す。各セクション内部の詳細な遷移は後続の外部遷移図を参照。

外部遷移図（タイムライン・年表・関係性マップ系列）

外部遷移図（リリース・ライブ・ラジオ等イベント系列）

音楽コンテンツ・ライブ／フェス・ラジオ・SNS投稿の4クラスタに分けて表示する。クラスタをまたぐ遷移（例: ライブ詳細→メンバー詳細）も存在する。

既知の制約: メンバー詳細（曲詳細も一部）が他クラスタと相互に繋がる実質的なハブになっているため、1枚の図にまとめるとMermaidのレイアウトエンジンが4クラスタを横に並べて配置し、図全体の実寸幅が広くなりすぎて何を見ているか把握しづらくなる（#1435, #30）。クラスタ単位、さらにクラスタ内でも関連の薄いグループ単位で図を分割し、他グループへの遷移先は接続先ノード（メンバー詳細・曲詳細等）のみを示す形にすることで、1図あたりのサイズを読める範囲に抑えている。接続先ノードの内部遷移は、そのノードが属する図を参照。

音楽コンテンツ

メンバー・リリース・曲・ユニット

プレイリスト・対比

ライブ・フェス

ライブ

フェス

ラジオ

SNS投稿

Instagram

TikTok・Ameba

YouTube

各画面の設計

1. Topページ（/）

概要: ナビゲーション・新着投稿ダイジェストを表示するトップ画面。メンバーカード一覧は「2. メンバー一覧画面（/members）」に分離されている。

表示コンテンツ

新着投稿セクション

• 表示条件: 各SNSセクション（見出し・一覧画面へのリンク）は新着の有無に関わらず常時表示する。新着が0件のSNSは中身を「本日の新着投稿はありません」に差し替える（#1404: 以前は0件のSNSはリンクごと非表示になり、全SNSが0件の日はセクション全体が非表示だったため、一覧画面への導線が失われる不具合があった）
• 参照日ヘッダー: {参照日の JST 日付} の新着投稿（詳細は後述の「参照日ヘッダー」を参照）
• 著作権表記: 「（Instagram/TikTok/YouTubeの各画像は参考表示：権利はすべて投稿者に帰属しています）」。TikTok画像の参考表示期限切れ時はリンクのみの表示になる旨を併記
• 表示順: Instagram → TikTok → YouTube → Ameba

参照日ヘッダー

• 表示条件: 新着投稿の参照日（当日の新着日時、なければメンバーデータの最終更新日時）が取得できる場合に表示。新着が全SNSで0件の日も、メンバーデータの最終更新日を参照日として表示する
• 日付ラベル: {参照日の JST 日付} の新着投稿
• 出来事表示: 参照日と月日が一致するメンバーの記念日を表示

2. メンバー一覧画面（/members）

概要: 全メンバーのカードを現役・OG に分けて表示する一覧画面。

表示コンテンツ

MemberCard の表示内容

SNSステータスバッジの状態

3. メンバー詳細画面（/members/[id]）

概要: 特定メンバーのプロフィール・近況・ディスコグラフィーを表示し、データ編集もできる画面。

動的レンダリング: generateStaticParams() でルートを定義し、リクエスト時に Vercel Blob から最新データを取得する（getMembersFromBlob() が cache: "no-store" でフェッチするため SSR として動作）。

表示コンテンツ

編集モード

前/次ナビゲーション順序: 世代・加入日昇順でソートしたメンバーリストの前後インデックス。

Instagram 投稿セクション

• 表示条件: officialSns に instagram.com を含む active: true の URL が登録されているメンバーのみ表示。条件を満たさない場合はセクション自体を非表示にする
• 表示位置: 関連ライブの下（メンバー詳細ページの最下部）
• データソース: Vercel Blob の instagram/{memberId}/posts.json（InstagramPost[] 型）
• 表示件数: 最新12件（capturedAt 降順）
• レイアウト: 3カラムグリッド

• データ未取得時: Instagram URL は登録されているが Blob に posts.json が存在しない場合は「まだ投稿データが取得されていません」を表示する（セクションは表示する）

YouTube 動画セクション（#9）

• 表示条件: 公式チャンネル動画のタイトルにメンバーのフルネームが一致する動画が1件以上ある場合のみ表示する。officialSnsの登録有無やメンバー自身のYouTubeチャンネル登録有無は問わない（言及ベースの表示のため）
• 表示位置: TikTok投稿セクションの直後
• データソース: Neon youtube_posts（channelType = 'official'）をgetAllOfficialYoutubePosts()で取得し、attributeYoutubeVideoToMembers()でフィルタする（詳細は youtube-data-design.md §6.1）
• 表示件数: 上限なし（マッチした全件）
• レイアウト: グリッド（TikTok投稿セクションと同様のパターン）

• 判定結果の保存: DBには保存せず、表示のたびに都度計算する（詳細は youtube-data-design.md §6.1）

4. リリース一覧画面（/releases）

概要: モーニング娘。（年号付き含む）のディスコグラフィーをフォーマット別（シングル・アルバム・EP・その他）に分けて表示する画面。サブユニット専用リリース（タンポポ・ミニモニ。・W 等の Unit.releaseIds に含まれるもの）は除外する。

表示コンテンツ

フォーマットラベル（ReleaseBadge）

5. リリース詳細画面（/releases/[id]）

概要: 特定リリースの詳細情報とメンバーを表示する画面。

表示コンテンツ

収録曲一覧セクション

• 配置場所: ソース URL とメンバーの間に配置する
• 表示項目:

• ゼロ件時: tracks フィールドが存在しない、または空配列の場合はセクション自体を非表示にする（「収録曲なし」等のメッセージは表示しない）
• マルチディスク構成: Track.discNumber が複数値を持つ場合は、ディスク番号ごとにグループ化して見出し（「Disc 1」「Disc 2」等）を表示する。全曲が同一ディスクの場合はグループ見出しを省略する
• ソート順: discNumber ASC, trackNumber ASC（discNumber が省略された場合は 1 として扱う）

6. 曲詳細画面（/songs/[id]）

概要: 特定楽曲（recording）の詳細情報・収録リリース・外部リンク・プレイリスト掲載情報を表示する画面。

URL パラメータ: [id] = Track.id（MusicBrainz recording UUID）

データソース: Neon DB（releases / tracks テーブル）を全走査し、Track.id が一致するトラックを特定する。同一 recording UUID は複数リリースに存在し得る（例: シングル収録後にアルバムにも収録）。

動的レンダリング: force-dynamic で Neon DB から最新データを取得する（getMembersFromBlob() / getReleases() を使用）。

表示コンテンツ

収録リリース一覧セクション

• 収録リリースが複数ある場合はリリース日昇順（古い順）で表示する
• 収録リリースが必ず1件以上存在することを前提とする（Track.id に一致するリリースが見つからない場合は notFound() を返す）

外部リンクセクション

• YouTube MV・YouTube Shorts はインライン表示のためこのセクションには含めない
• youtube・youtube-short・genius 以外のリンクが存在する場合のみセクションを表示する
• Track.links が空またはフィールド自体が存在しない場合はセクション自体を非表示にする

対比候補セクション

• trackComparisonMap に当該 track.id が存在する場合のみセクションを表示する
• 存在しない場合はセクション自体を非表示にする

プレイリスト掲載情報セクション（#366 完了後に実装）

• このトラックを選曲しているプレイリストが存在しない場合はセクション自体を非表示にする

リリース詳細画面からのリンク仕様

• リリース詳細画面（/releases/[id]）の収録曲一覧に表示される各曲名を、/songs/[Track.id] へのリンクにする
• Track.id が空文字列の場合はリンクなしでテキストのみ表示する（後方互換）
• リンクはインラインリンク（<Link>）で同一タブ遷移

7. 同期状況画面（/sync-status）

概要: 各種バッチ同期ジョブの最終実行状況・取得進捗をまとめて確認するデスクトップ専用画面。

アクセス制限: DESKTOP_MODE 環境変数が設定されている場合（DESKTOP_MODE=1）のみ表示。未設定時は notFound() を返す。

データソース

表示コンテンツ（共通）

近況同期セクション

Instagram同期セクション

データが存在しない場合は「データがありません。Instagram同期を実行後に表示されます。」を表示。

Genius リンク同期セクション

データが存在しない場合は「データがありません。Genius リンク同期を実行後に表示されます。」を表示。

ディスコグラフィー同期セクション

データが存在しない場合は「データがありません。ディスコグラフィー同期を実行後に表示されます。」を表示。

DiscographyStatusChart 仕様

• Shorts 系列が表示される場合、棒の幅は 24px に縮小（非表示時は 40px）
• チャート上部の説明文: Shorts 系列あり → “YouTube / Shorts 取得進捗（過去 N 日分）”、なし → “YouTube リンク取得進捗（過去 N 日分）”（#836）

8. 楽曲リンク修正画面（/link-editor）

概要: シングル曲トラックの TikTok・YouTube・Genius リンクを手動で確認・編集するデスクトップ専用画面。

アクセス制限: DESKTOP_MODE 環境変数が設定されている場合（DESKTOP_MODE=1）のみ表示。未設定時は notFound() を返す。

データソース

表示コンテンツ（共通）

トラック選択肢の絞り込み（isVersionTrack）

Instrumental・カラオケ等のバージョン違い楽曲を選択肢から除外する。以下のいずれかに該当するトラックは対象外:

• タイトル末尾が角括弧（< > / ＜ ＞）で終わる
• タイトル末尾の丸括弧（( ) / （ ））内に既知のバージョンキーワード（instrumental / off vocal / インスト / カラオケ / tv mix 等）を含む

TikTokタブ

YouTube／Geniusタブ

保存

• 追加・削除いずれかの変更がある場合のみ「保存」ボタンが活性化する
• PATCH /api/link-editor に { trackId, type, addUrls, removeUrls } を送信し、TrackLink を差分更新する（removeUrls を deleteMany した後、addUrls を create）
• 保存成功後は router.refresh() でサーバー側データを再取得する
• TikTok / YouTube / Genius の各タブは独立した保存状態（idle / saving / success / error）を持つ

API エンドポイント

PUT リクエストボディ

{
  "id": "string",
  "latestStatus": {
    "content": "string",
    "lastUpdated": "YYYY-MM-DD",
    "sources": ["url"]
  }
}

PUT 成功時: statusHistory に新エントリを蓄積（最大 100 件）、revalidatePath でキャッシュを無効化。

youtubeChannel の解決（#1105）: youtubeChannel.handle が空・未指定の場合はフィールドを削除、既存と同一の場合は解決済み playlistId を引き継ぎ（API 呼び出しなし）、新規・変更時は YouTube Data API（fetchPlaylistId）でプレイリストIDに変換して保存する。変換できない場合は 422 を返し保存を中断する。

改訂履歴