PUB-002 ヒートマップ詳細モーダル

概要

日別記事結果（親の埋め込み枠・ワイヤーフレームは SC-001 日別記事結果ショートコード）内のヒートマップ詳細表示を、モーダルとして表示する公開画面仕様。
本書ではモーダルの表示要素・状態遷移・取得/整形/表示の責務を定義する。
日別記事結果ブロック全体（ランキング・末尾・非同期枠等）の画面仕様・ワイヤーフレームは SC-001 の「ワイヤーフレーム」節へ、ショートコードの引数契約は SC-001 の「外部インターフェース」へ分離する。

ワイヤーフレーム

画面仕様

ブロック一覧

ブロックID	ブロック名	表示内容	初期値	ユーザー操作	アクション
`B-1`	モーダルヘッダー	ズームアウト / 倍率表示 / ズームイン / 閉じる	倍率 `100%`	ボタン押下で倍率変更、閉じる押下で終了	A-2, A-3
`B-2`	ローディング表示	スピナー + 読み込み文言	非表示（`loading` 時のみ表示）	なし	A-1
`B-3`	詳細ヒートマップ表示枠	台番セル + データセル（高さ 300px、内部スクロール）	データあり時に表示	スクロール、倍率に応じた表示確認	A-1, A-2
`B-4`	データなし表示	「表示するデータがありません」	非表示（`empty` 時のみ表示）	なし	A-1
`B-5`	データなし補足	ホール / 日付 / タイプ（詳細・簡易）	非表示（`empty` 時のみ表示）	なし	A-1

表示状態

状態キー	表示される主ブロック	説明
`loading`	`B-2`	非同期取得中の状態
`has_data`	`B-3`	データ取得成功時の通常表示
`empty`	`B-4` + `B-5`	データなし時の表示

責務分離

観点	担当	内容
データ取得	バックエンドAPI（`daily-article/v1`）	対象ホール・日付・タイプに対応するヒートマップ詳細データを返す
データ整形	フロントエンドのモーダル表示ロジック	API レスポンスをテーブル表示用のセル配列へ整形する
データ表示	モーダル UI（`B-1`〜`B-5`）	状態に応じて `loading` / `has_data` / `empty` を切り替えて描画する

処理連携仕様

アクション一覧

A-1 モーダル初期表示時に詳細データを取得する

モーダル表示開始時に daily-article/v1 のヒートマップ詳細 API を呼び出し、結果に応じて表示状態を更新する。

リクエスト

requestParam	本画面の値（どの部品から何を送るか）
`hall`	SC-001 が保持する対象ホール
`date`	SC-001 が保持する対象日付
`type`	モーダル表示タイプ（詳細/簡易）

レスポンス

項目	内容
成功時	`has_data` または `empty` へ遷移し、必要データを描画
失敗時	`empty` 相当表示にフォールバック
画面更新時の処理	`B-2` / `B-3` / `B-4`+`B-5` のいずれかを再描画

A-2 ズーム操作で倍率を更新する

ヘッダーのズームイン/ズームアウト押下時に倍率を更新し、表示スケールへ反映する。

リクエスト

requestParam	本画面の値（どの部品から何を送るか）
`zoom_delta`	`+` または `-`（押下した操作種別）

レスポンス

項目	内容
成功時	倍率表示を更新し、`B-3` の描画スケールを変更
失敗時	直前倍率を維持し表示を継続
画面更新時の処理	倍率ラベルと表示領域のみ再描画

A-3 閉じる操作でモーダルを終了する

閉じるボタン押下時にモーダルを非表示に戻す。

リクエスト

requestParam	本画面の値（どの部品から何を送るか）
`close`	閉じるボタン押下イベント

レスポンス

項目	内容
成功時	モーダルを非表示にする
失敗時	なし（クライアント内状態更新のみ）
画面更新時の処理	モーダル DOM を非表示化

外部インターフェース

画面 URL

項目	値
URL	`/daily-article/{post-name}` 内のモーダル
種別	公開画面
権限	なし（公開投稿に依存）

関連インターフェース

種別	名称	用途
ショートコード	SC-001 日別記事結果ショートコード	モーダル起動元と引数契約
REST API	API-001 日別記事 REST	ヒートマップ詳細データ取得
画面設計	SC-001 日別記事結果ショートコード（ワイヤーフレーム節）	日別記事結果ブロック全体
画面設計	PUB-001 日別記事（シングル）	ページ URL を持つ親