個人開発 » beatoraja

追加仕様 詳細設計（2026-06-13）OBS/HTML側¶

親 #162 の追加表示要素のうち、HTML オーバーレイ側の設計。整形は本体（#181）に寄せ、HTML は /state.json の表記済み文字列を流し込むだけ、の方針を維持する。スキーマ拡張は #181 を参照。

now-playing.html への追加¶

• プレイオプション表示ブロックを追加し、nowPlaying.playOption を表示する。
  • ランダム: playOption.random（DP/バトル時は random2 も併記）。
  • ゲージ: playOption.gauge。1秒ポーリングのたびに最新値へ更新するため、GAS による種別切替が自動的に反映される（DOM 差分更新で十分）。
  • GAS バッジ: playOption.gaugeAutoShift が true のとき「GAS」表示。gaugeAutoShiftMode をツールチップ/サブ表記に。
  • レーンパターン行: playOption.lane が非 null のときのみ表示（RANDOM/R-RANDOM 時）。null のときは行ごと非表示。
• ゲージ値変化時に軽いハイライト演出を入れると配信上わかりやすい（CSS のみで実現、任意）。

プロフィール表示（名前・取得段位・一言）¶

• profile（name/dan/comment）は phase 非依存・常時表示要素のため、専用テンプレート profile.html を新設し、OBS で独立配置できるようにする（now-playing/session とは別ソースに置きたい需要が高い）。
• 併せて now-playing.html のヘッダにも名前/段位を小さく出せるよう、profile 参照を共通 JS に集約。
• comment 空文字時は枠ごと非表示にし、レイアウト崩れを防ぐ。

方針（既存踏襲）¶

• CSS 差し替えだけでテーマ変更できる構造を維持。playOption ブロックと profile ブロックそれぞれにクラスを付与し、自作テーマで個別に装飾可能にする。
• 約1秒ポーリング・差分 DOM 反映は既存設計のまま。ゲージのライブ更新も同じポーリングで賄える（push 不要）。

依存¶

• #181 の /state.json スキーマ拡張（profile / nowPlaying.playOption）確定後に着手。

本コメントは詳細設計であり実装着手前。

方針変更（2026-06-13）：単一HTMLへ集約¶

OBS で複数 HTML を読み込み個別配置する手間を避けるため、用途別3枚分割（now-playing / result / session / profile）を取りやめ、1枚の overlay.html に集約する。先行コメントの「profile.html 新設」「用途別分割」は本コメントで置き換える。

集約方針：フル画面オーバーレイ＋URLでブロック選択¶

• 既定（overlay.html）= 全ブロックを1ソースで表示。OBS ブラウザソースの追加は1回だけで済む。
  • ブラウザソースはキャンバスと同解像度・背景透過。各ブロックは CSS で絶対配置。
• 同一ファイルを再利用して一部だけ表示したい場合に備え、URL クエリでブロックを絞れるようにする。
  • 例: overlay.html?blocks=nowplaying,session（指定ブロックのみ表示）。未指定は全表示。
  • 表示/非表示は CSS クラスのトグルのみで実現し、デザイン作業に干渉させない。
• ブロックは class/id で分割（#profile #nowplaying #playoption #result #session）。CSS 差し替えでテーマ変更可能、の方針は維持。

/state.json 消費¶

• /state.json は元から全ブロック分を1本で返すため、単一 HTML が 1回のポーリングで全ブロックを更新できて自然。3枚分割時に同じ JSON を重複取得していた分のポーリング負荷も解消。
• 約1秒ポーリング・差分 DOM 反映は維持。ゲージ（GAS）のライブ更新も同じポーリングで賄う（push 不要）。
• スキーマ（profile / nowPlaying.playOption）は #181 のまま変更なし。profile ブロックも overlay.html 内に内包する。

デザイン（別タスク）への引き継ぎ前提¶

• 「キャンバス全面・背景透過・要素は絶対配置」「ブロック単位の class/id ＋ URL クエリによる表示トグル」までを土台として確定。
• 各ブロックの位置・装飾・演出は別タスクで決定する。

本コメントは方針確定であり実装着手前。

OBS配信画面は1920*1080なので、それに合わせてほしいかも

実装完了・MR !24 にて develop へ。https://gitlab.izu-san.com/games/beatoraja/-/merge_requests/24

オーバーレイ：単一 obs/overlay.html（背景透過・全画面絶対配置・約1秒ポーリング・DOM 差分更新・?blocks= で表示選別）。レイアウトは design.jpg 準拠：ゲーム画面フレーム(#stage 16:9 透過クリックスルー)・右レール(時刻/セッション/プロフィール/心拍予約)・下部フル幅の曲情報バー(1行・フォント自動フィット)・プレイオプション・中央リザルト・右下選曲履歴。ビジュアルは Claude 製 HUDデザイン（ライム×インク、Chakra Petch + Zen Kaku Gothic New）。テーマは :root の CSS 変数で差し替え可。心拍数は #185 の予約枠のみ。