コンテンツにスキップ
Documents for MorningStatusApp
Esc
↑↓移動↵開く⌘Jプレビュー
このページの内容

ライブ・フェス機能 画面設計書

最終更新: 2026-05-09（#775）

1. 概要

ライブ機能（v3.0.0）・フェス機能（v3.9.0）・セットリスト機能（v4.0.0）で追加・変更される画面の設計。 新規7画面（ライブ一覧・ライブ詳細・地域ブロックマップ・都道府県別公演・フェス一覧・フェス詳細・セットリスト）と、 既存1画面（メンバー詳細）への追加を定義する。

データ設計については live-data-design.mdx を参照。 地図ライブラリは react-leaflet を採用（#527 の方針に準拠）。

2. 画面一覧

画面名 URL パターン レンダリング方式 対応 Issue
ライブ一覧 /lives SSR（動的） #521
年別ライブ一覧 /lives/year/[year] SSR（動的） #521
ライブ詳細 /lives/[id] SSR（動的） #521
地域ブロックマップ /lives/map SSR（動的） #525
地域別公演一覧 /lives/map/[region] SSR（動的） #648, #649, #650
都道府県別公演 /lives/prefecture/[code] SSR（動的） #525
フェス一覧 /festivals SSR（動的） #776
フェス詳細 /festivals/[id] SSR（動的） #776
セットリスト /setlists/[id] SSR（動的） #775

既存画面への追加セクションは §11 を参照。

3. データ階層

ツアー
  └─ 公演（複数）
       └─ 会場

地域ブロック（北海道 / 東北 / 関東 / 中部 / 近畿 / 中国 / 四国 / 九州・沖縄 / アジア / ヨーロッパ / 北中米）
  └─ 都道府県・地域コード
       └─ 会場

地域ブロックはテーブルではなく、コードから導出するグルーピング単位。国内は JIS 2桁コード（01〜47）、海外は拡張コード（50/60/70）を使用する。

地域ブロック定義

ブロック名 コード 備考
北海道 01
東北 02・03・04・05・06・07
関東 08・09・10・11・12・13・14
中部 15・16・17・18・19・20・21・22・23・24
近畿 25・26・27・28・29・30
中国 31・32・33・34・35
四国 36・37・38・39
九州・沖縄 40・41・42・43・44・45・46・47
アジア 50 海外拡張コード（#674）
ヨーロッパ 60 海外拡張コード（#674）
北中米 70 海外拡張コード（#674）

4. ライブ一覧画面（/lives）

概要

開催年の一覧を表示する画面。年ごとの公演数を確認し、年別ライブ一覧画面（/lives/year/[year]）へ遷移する起点となる。 データソースは Neon（Vercel Postgres）から取得する。

表示コンテンツ

要素 内容
ナビゲーション 「ホームに戻る」リンク（/ へ）
ページタイトル 「ライブ」
ナビリンク 「地図で見る」リンク（/lives/map へ）
総公演数 全公演の件数（例: 348 公演）
年一覧 開催年ごとに /lives/year/{year} へのリンクを表示。年降順（新しい順）

データなし表示

公演データが空の場合は「公演データがありません」のメッセージを表示する。

5. 年別ライブ一覧画面（/lives/year/[year]）

概要

指定した年の全公演をツアー別に表示する画面。

表示コンテンツ

要素 内容
ナビゲーション 「ライブ一覧に戻る」リンク（/lives へ）
年タイトル {year}年のライブ
年ナビゲーション 「← 前の年 / 次の年 →」のリンク
年選択ドロップダウン 他の年にジャンプするための YearSelect。モバイル対応のため maxWidth: 120px に制限
ツアー選択ドロップダウン ページ内の各ツアーセクションにジャンプするための TourJumpSelect。モバイル対応のため maxWidth: 200px に制限し、長いツアー名は省略表示（…）する
公演数 その年の総公演数
ツアーセクション その年のツアーカードを、ツアー開始日の降順で表示

ツアーカードの表示項目

項目 内容
ツアー名 tours.title（単独公演は「単独公演」）
公演数 そのツアーの公演件数（例: 25 公演）
期間 最初の公演日 〜 最後の公演日（例: 2026/4/11 〜 2026/6/6。公演数が1件の場合は開始日のみ）
公演リスト ツアー内の公演を日時昇順で一覧表示（後述）

公演リストの表示項目

項目 内容
日付 lives.date（例: 4/11。年はページ見出しから省略）
時刻 lives.time が 00:00 以外の場合のみ表示（例: 13:00）
会場名 venues.name（ライブ詳細へのリンク）
都道府県 venues.prefecture を都道府県名に変換して表示

ソートとグループ化ルール

  • ツアー: その年の中でツアー開始日の降順
  • 公演: ツアー内で lives.date 昇順・同日は lives.time 昇順（00:00 は末尾）

6. ライブ詳細画面（/lives/[id]）

概要

個別公演の詳細情報と出演メンバー一覧を表示する画面。 [id] は lives.live_id（例: 2026B001）。

アクセス制御

条件 挙動
[id] に一致する公演が存在しない notFound() を返す

表示コンテンツ

要素 内容
ナビゲーション 「ライブ一覧に戻る」リンク（/lives へ）＋「← 前の公演 / 次の公演 →」
ツアー名 tours.title
公演タイトル lives.title が設定されている場合のみ表示
日付 lives.date（例: 2026年4月11日（土））
時刻 lives.time が 00:00 以外の場合のみ表示（例: 開演 13:00）
会場名 venues.name
都道府県 venues.prefecture を都道府県名に変換して表示
出演メンバーセクション member_lives から取得したメンバー一覧（後述）

前後ナビゲーション

  • 対象範囲: 同一ツアー内の公演を date 昇順・同日は time 昇順で並べたリストの前後
  • 先頭公演に「前の公演」は表示しない。末尾公演に「次の公演」は表示しない

出演メンバーセクション

データソース: member_lives テーブルから live_id が一致するレコードを取得し、 member_id を使って members.json（Vercel Blob）のメンバー情報を参照する。

表示項目:

項目 内容 リンク先
メンバー名 Member.name（漢字氏名） /members/{id}
読み Member.ruby —
世代バッジ {generation}期生 —
ステータスバッジ Active または OG —

ソート順: 世代昇順・加入日昇順。

ゼロ件時: member_lives に対応データがない場合はセクション自体を非表示にする。

7. 地域ブロックマップ画面（/lives/map）

概要

国内8ブロック＋海外3ブロック（アジア / ヨーロッパ / 北中米）の合計11ブロック単位で表示し、各ブロック内の開催実績を確認できる画面。（#674）

表示コンテンツ

要素 内容
ナビゲーション 「ライブ一覧に戻る」リンク（/lives へ）
ページタイトル 「地域別公演マップ」
集計サマリー {N} 公演 / {M} 地域（N はフェスの件数も含む。M は開催実績があるブロック数）
地域ブロック一覧 後述

地域ブロック一覧

カードの表示内容（ブロックごとに1枚、地図は表示しない）:

項目 内容
ブロック名 地域ブロック名（例: 関東、アジア）
件数 開催実績あり → ブロック内合計件数を併記。実績なし → 件数非表示
クリック動作 /lives/map/{region-slug} へ遷移（国内・海外ブロック共通）

海外ブロック（アジア / ヨーロッパ / 北中米）も含め、全ブロックが同じ形式のリンクカードとして表示される。

7-1. 地域別公演一覧画面（/lives/map/[region]）

概要

特定の地域ブロック内の開催実績を、都道府県マーカー地図または一覧で表示する画面。

アクセス制御

条件 挙動
[region] が未定義の地域スラッグ notFound()

表示コンテンツ

要素 内容
ナビゲーション 「地域別マップに戻る」リンク（/lives/map へ）
ブロック名 {region}
ブロック切り替え 「← 前のブロック / 次のブロック →」のリンク（REGIONS 配列順）
ブロック選択ドロップダウン 他のブロックにジャンプするための RegionSelect
集計サマリー {N} 公演（実績なしの場合は「開催実績なし」）
表示内容 ブロック内の都道府県に座標定義（PREFECTURE_CENTERS）があれば PrefectureMarkerMapClient で地図表示。1件もなければ都道府県名チップの一覧表示にフォールバック

都道府県名チップ一覧（地図フォールバック時）:

項目 内容
表示 開催実績あり → 都道府県名＋件数をリンク表示（/lives/prefecture/{code} へ）。実績なし → 名称のみのテキスト

海外ブロック（アジア / ヨーロッパ / 北中米）は単一の拡張コード（50 / 60 / 70）に対応し、isValidPrefectureCode が拡張コードを受け付けるよう変更済み（#673）。

8. 都道府県別公演画面（/lives/prefecture/[code]）

概要

特定の都道府県で開催された公演を地図と一覧で表示する画面。 [code] は JIS 2桁コード（例: 13）。

アクセス制御

条件 挙動
[code] が2桁の正の整数の形式でない（isValidPrefectureCode） notFound() を返す
prefectureCode テーブルに存在しないコード（形式は正しいが未登録） notFound() を返す
対象都道府県に公演実績がない 「この都道府県・地域の開催実績はありません」のメッセージを表示

表示コンテンツ

要素 内容
ナビゲーション 「地域別マップに戻る」リンク（/lives/map へ）
ページタイトル {都道府県名}の公演（例: 宮城県の公演）
出身メンバー members.json（Vercel Blob）から Member.profile.birthplace の都道府県コードが [code] と一致するメンバーを抽出し、横に列挙（例: 宮城県の公演 石田亜佑美）。現役は緑・OGはグレーのインラインバッジで表示
公演総数 例: 12 公演 / 3 会場
地図 都道府県内の会場をマーカー表示（後述）。フェス会場の座標も含む（#843）
フェス一覧 後述。フェス参加がある場合のみ表示（#843）
公演一覧 後述

地図の仕様

  • 表示範囲: 対象都道府県の会場が収まる範囲に自動フィット
  • マーカー: 座標登録済み会場に1ピン（latitude / longitude が設定されている会場のみ）
  • ポップアップ内容: 会場名・開催公演数

フェス一覧（#843）

都道府県で参加したフェスがある場合のみ表示するセクション。開催日昇順。

表示項目:

項目 内容
日付 festivals.date（例: 2025/8/16）
フェス名 festivals.name（フェス詳細 /festivals/[id] へのリンク）
会場名 venues.name

公演一覧

都道府県内で開催された公演を開催日昇順で表示する。

表示項目:

項目 内容
日付 lives.date（例: 1999/3/26）
時刻 lives.time が 00:00 以外の場合のみ表示
会場名 venues.name
ツアー名 tours.title
ライブ詳細リンク ライブ詳細（/lives/[id]）へのリンク
ご当地メンバーバッジ 会場の都道府県と出身地が一致するメンバーの名前バッジを表示（#520）。都道府県名列の代わりに表示する。複数人いる場合は並べて表示。バッジの色は Member.status に準じる（現役: 緑 #4ade80 / OG: グレー var(--text-muted)）。出身地が一致するメンバーがいない公演は都道府県名をテキストで表示

ソート順: lives.date 昇順・同日は lives.time 昇順。

9. フェス一覧画面（/festivals）

概要

参加フェスの一覧を表示する画面（v3.9.0）。 データソースは Neon（Vercel Postgres）の festivals テーブルから取得する。

表示コンテンツ

要素 内容
ナビゲーション 「ホームに戻る」リンク（/ へ）
ページタイトル 「フェス」
総件数 フェス件数（例: 2 件）
フェス一覧 後述

フェス一覧の表示項目

項目 内容
フェス名 festivals.name（フェス詳細へのリンク）
日付 festivals.date（例: 2025/8/16）
会場名 venues.name

ソートルール

festivals.date 降順（新しい順）。

データなし表示

フェスデータが空の場合は「フェスデータがありません」のメッセージを表示する。

10. フェス詳細画面（/festivals/[id]）

概要

フェスの詳細情報を表示する画面。 [id] は festivals.festival_id（例: 2025-SUMMERSONIC-TK）。

アクセス制御

条件 挙動
[id] に一致するフェスが存在しない notFound() を返す

表示コンテンツ

要素 内容
ナビゲーション 「フェス一覧に戻る」リンク（/festivals へ）
フェス名 festivals.name
日付 festivals.date（例: 2025年8月16日（土））
会場名 venues.name
都道府県 venues.prefecture を都道府県名に変換して表示。/lives/prefecture/[code] へのリンク
セットリスト フェス内の演奏曲を順番に表示（setlists テーブル参照。ゼロ件時は「セットリストデータがありません」を表示）
単独ページリンク セットリストが1件以上ある場合のみ「単独ページで見る」リンクを表示（/setlists/[id] へ）

11. セットリスト画面（/setlists/[id]）

概要

ツアーまたはフェスの演奏曲目一覧を表示する独立画面（v4.0.0）。[id] はツアー ID（例: T2025-01）またはフェス ID（例: 2025-FES-01）。

アクセス制御

条件 挙動
[id] に一致するセットリストが存在しない notFound() を返す

表示コンテンツ

要素 内容
戻るリンク ツアーセットリスト: 「ライブ一覧に戻る」（/lives へ）
フェスセットリスト: 「フェス詳細に戻る」（/festivals/[id] へ）
ページタイトル 「セットリスト」
サブタイトル ツアー名またはフェス名
演奏曲リスト 順番・曲名・YouTube 動画（存在する場合）を一覧表示

演奏曲リストの表示項目

項目 内容
番号 演奏順（setlists.seq）
曲名 setlists.track_id を releases.json で解決した曲名。未解決時は「不明な曲」
YouTube 動画 リリース情報に YouTube 動画 ID がある場合のみ埋め込み表示

データなし表示

セットリストが空の場合は「セットリストデータがありません」のメッセージを表示する。

12. 既存ページへの追加

12.1 メンバー詳細画面（/members/[id]）への追加

メンバーの出身地・出演実績に関するライブセクションを2つ追加する。配置場所: いずれも「所属ユニット」セクションの後に、「ご当地ライブ」→「関連ライブ」の順で配置する。

ご当地ライブセクション（HometownLivesSection）

member.profile.birthplace と会場の都道府県が一致する公演のみを抽出して表示する専用セクション。0件の場合はセクション自体を非表示にする。

項目 内容
日付 時刻（00:00 以外の場合のみ）を併記
会場名 ライブ詳細（/lives/{id}）へのリンク
都道府県名 —
ツアー名 単独公演の場合は非表示

関連ライブセクション（RelatedLivesSection）

データソース: member_lives テーブルから member_id が一致するレコードを取得し、 live_id をキーに lives・tours・venues を結合して取得する。

表示形式: ツアーごとにアコーディオン（折りたたみ）形式でグループ化して表示する。最新のツアーのみデフォルトで展開済み、他は折りたたみ状態。

項目 内容
ヘッダーリンク 「ライブ一覧 →」（/lives へ）
ツアー選択ドロップダウン ページ内の各ツアーへジャンプする TourJumpSelect。選択すると対象ツアーを自動展開する
ツアー見出し（トグルボタン） tours.title（単独公演は「単独公演」）＋ 公演数 ＋ 最初の公演日。クリックで展開・折りたたみを切り替える
公演リスト（展開時のみ） 日付・時刻（00:00 以外の場合のみ）・会場名（ライブ詳細へのリンク）・都道府県名・ご当地バッジ（#520）

ご当地バッジ（#520）: member.profile.birthplace と会場の都道府県名が一致する公演には「ご当地」バッジを表示し、左ボーダーをプライマリカラーに変更する。birthplace が未設定の場合は全公演 isHometown: false として処理する。

ソート:

  • ツアー: 最初の公演日降順（新しいものが上）
  • 公演: ツアー内で日付昇順・同日は時刻昇順

ゼロ件時: 関連ライブが存在しない場合はセクション自体を非表示にする。

12.2 ライブ詳細画面（/lives/[id]）への追加（#526）

追加セクション名: 「収録ライブアルバム」

表示条件: tours.release_id が設定されており、release_id に対応するリリースが Blob に存在する場合のみ表示する。

表示項目:

項目 内容 リンク先
リリースタイトル releases.title /releases/{id}
フォーマットバッジ FORMAT_LABEL[format]（例: ライブアルバム） —

12.3 ライブ詳細画面（/lives/[id]）への追加（#775）

追加セクション名: 「セットリスト」

表示条件: 公演が属するツアーに setlists レコードが1件以上ある場合のみ表示する。単独公演（tour_id が NULL）は表示しない。

表示項目:

項目 内容 リンク先
セットリストリンク 「セットリストを見る」 /setlists/{tourId}

12.4 リリース詳細画面（/releases/[id]）への追加（#526）

追加セクション名: 「収録ライブ」

表示条件: release.format === 'live' かつ tours.release_id に当該リリース ID が設定されているツアーが存在する場合のみ表示する。

表示項目:

項目 内容
ツアー名 tours.title
公演リスト 日付・時刻（00:00 以外の場合のみ）・会場名（ライブ詳細へのリンク）・都道府県名

ソート: lives.date 昇順。

12.5 トップ画面（/）への追加

追加内容: 一覧ページリンク群に「ライブ一覧」「フェス」を追加する。

13. クロスリンク設計図

14. 後続 Issue との関係

Issue 本設計書への依存内容
#524 ライブ機能の Figma 詳細設計 本設計書の §4〜§7・§11 を Figma でビジュアル化
#521 ライブ一覧機能を追加する §4・§5 の設計に基づいて実装
#517 メンバーとライブを紐づけ、メンバー詳細に関連ライブセクション追加 §11.1 の設計に基づいて実装
#525 地域ブロック別マップページを実装する §6・§7 の設計に基づいて実装
#520 ご当地ライブを検出・表示する §7「ご当地ライブバッジ」の設計に基づいて実装
#775 セットリスト表示機能 §10・§9・§11.3 の設計に基づいて実装済み

改訂履歴

版 更新日 変更内容
1.10 2026-07-18 §12配下のサブセクション見出し番号を旧番号（### 11.1〜11.5）から実際の章番号に合わせて ### 12.1〜### 12.5 に修正（PR #1371レビュー指摘）
1.9 2026-07-18 実装との乖離是正: §4/§5の内容を入れ替え（/livesは年一覧、ツアーカードは/lives/year/[year]）、未文書化だった/lives/map/[region]画面を追加、§8のアクセス制御・データなし表示文言、§12関連ライブセクション構成（ご当地ライブ分離・アコーディオン）、クロスリンク図を実装に合わせて修正（#1366）
1.8 2026-05-09 §10 追加：セットリスト画面を追加。§9 フェス詳細にセットリスト埋め込み仕様を追記。§11.3 追加：ライブ詳細へのセットリストリンク。クロスリンク図（§12）に SETLIST ノード追加（#775）
1.7 2026-05-08 §6 集計サマリーにフェス件数を含む旨を追記。§7 地図仕様・フェス一覧セクション・空状態条件を更新（#843）
1.6 2026-05-08 §8・§9 追加：フェス一覧・詳細画面を追加。クロスリンク図・画面一覧・トップ追加の記述を更新（#776）
1.5 2026-04-17 §10.1 ご当地バッジ仕様を追記（isHometown フラグ・左ボーダー強調）（#520）
1.4 2026-04-17 §10.2〜§10.3 追加：ライブアルバム ↔ ライブ詳細のクロスリンク設計（#526）
1.3 2026-04-12 §7 アクセス制御の不正コード定義を明確化・出身メンバーのデータソースを明記（#523）
1.2 2026-04-11 §10.1 関連ライブセクションの配置場所を「選曲した楽曲」の後に変更（#523）
1.1 2026-04-11 §7 ご当地メンバーバッジの色仕様（現役: 緑・OG: グレー）と都道府県ヘッダーの出身メンバー表示を追記（#523）
1.0 2026-04-11 初版作成（#523）

このページは役に立ちましたか？