スロット攻略 プロジェクトドキュメント

Appearance

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

概要 ​

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

ワイヤーフレーム ​

画面仕様 ​

ブロック一覧 ​

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

台番セルの増台・減台表示（Issue #2774） ​

  • 対象: 台番セル（type === '台番'）のみ。差枚・回転の データ セルの色分けは変更しない。
  • データ: db_daily_article_kishu_count_delta の当日×ホール行（機種表示名キー）。変化なし・前日ホール欠損は行が無いため従来の紺背景のまま。
  • 表現:
    • 増台（delta > 0）: 台番セル背景をシアン系（CSS 変数 --count-delta-up、既定 #00ccff）
    • 減台（delta < 0）: 台番セル背景を黄系（CSS 変数 --count-delta-down、既定 #ffcc00）
    • 同一機種の全台番セルに同じ色を付与
  • 機種名キー: 台別 raw 名は to_display() でマスタ表示名に揃え、台数変化テーブル（KishuMasterJoinSql::display_name_select = m.name）と突合する。
  • 凡例: 非ゼロの台数変化が 1 件以上あるとき、表の直下に増台・減台の色サンプルと文言を表示する（マップ空時は凡例も出さない）。
  • ツールチップ: 増減文言は追加しない。
  • 簡易ヒートマップ: 台番セルが無いため本仕様の対象外（変更なし）。

表示状態 ​

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

責務分離 ​

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

処理連携仕様 ​

アクション一覧 ​

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

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

リクエスト

requestParam本画面の値（どの部品から何を送るか）
hallSC-001 が保持する対象ホール
dateSC-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 APIAPI-001 日別記事 RESTヒートマップ詳細データ取得
画面設計SC-001 日別記事結果ショートコード（ワイヤーフレーム節）日別記事結果ブロック全体
画面設計PUB-001 日別記事（シングル）ページ URL を持つ親