異世界戦記（全画面・迷路レイアウト）の記録
— Fullscreen API・Canvas サイズ・面クリア UI
テスト環境「異世界戦記」において、全画面表示と迷路キャンバスのリサイズ、面クリア後の操作を成立させるまでの経緯を整理します。仕様・API・連携の正本はリポジトリ内 docs/異世界戦記-サイト連携仕様書.md、レイアウト制作の詳細な箇条書きは docs/isekai-senki-fullscreen-layout-record.md にまとめています（デプロイバンドルに docs/ が含まれる場合はサーバー上でも参照可能）。
1. 起きていたこと
- 全画面で迷路が描画されない … ラップ要素の参照用 id が欠け、getElementById が失敗し得た。
- 全画面時に HUD 文字が読みにくい … :fullscreen だけに依存すると環境によってスタイルが抜ける。
- 全画面解除後、迷路が大きいまま … 特に PC。モバイルでは問題にならないケースがあった。
- 全画面中の面クリア後、「次へ」が押せない … 全画面に含まれる DOM の範囲が狭く、進行 UI がレイヤ外にあった。
2. 対応の要点
2.1 DOM と参照
templates/game_isekai_senki.html のキャンバスラップに id="senki-canvas-wrap" を付与し、スクリプトからの取得を安定化。
2.2 見た目（CSS と API の同期）
Fullscreen API の状態に合わせて .senki-fs-active を切り替え、ステータスブロックには必要に応じて インラインの文字色（important）を当て、トップレイヤ上でも読めるようにした。スタイルの集約は static/css/main-layout.css を主とする。
2.3 全画面に含める範囲
#senki-fs-target を、迷路だけでなくステージ結果・エンディングなど進行に必要な UI を含む外側に変更。別画面（タイトル・編成など）へ遷移するときは 全画面解除を行う。
2.4 解除後のキャンバス一辺（PC 向け）
非全画面では getBoundingClientRect と clientWidth / clientHeight の min、パネル・viewport による 上限クランプ、ResizeObserver と fullscreenchange 後の複数回リサイズで追いつきを待つ。さらに、全画面に入る直前の迷路の一辺を記録し、解除直後の数秒間だけ、算出サイズが明らかに過大なとき 記録値へ戻す保険を入れた（デスクトップでラップ寸法が残りやすい現象への対処）。
3. 主な実装ファイル
- templates/game_isekai_senki.html … 構造・id・キャッシュバスター付きスクリプト参照。
- static/js/isekai-senki.js … リサイズ・全画面・クラス同期・スナップ／クランプ。
- static/css/main-layout.css … レイアウト・全画面時の見た目。
4. デバッグと後片付け
検証時は HTTP ingest へ送る一時ログを仕込んだが、不具合解消の確認後にすべて削除している。本番相当のスクリプトには計測コードを残さない方針。
5. デプロイ
build_deploy_bundle.ps1 は templates/・static/・docs/ をディレクトリごとコピーし、異世界戦記用の isekai_senki_*.py も root 一覧に含める。本記事の HTML・上記 Markdown・ゲーム用アセットはこの方針でバンドルに乗る。
6. 遊び方
左メニュー「テスト環境」→「異世界戦記」。
← 立ち上げストーリー
← プログラム構築の記録
← デプロイの記録
← ボタン1つデプロイの記録
← デプロイでまたハマった話
← ログイン設定の記録
← 改善記録
← ファイル紹介の使い方
← OGP・SEOの記録
← 統合ログインの設計・経緯
← Search Console・サイトマップ
← 環境変数・.env の管理
← Git 入門・インストール
← インストール後に Git で行う設定
← カード神経衰弱の記録
← 異世界シューティングの記録
← 異世界シューティングの難易度
← 複数人でのゲーム進行
← 異世界衰弱（不具合の修正）
← 異世界衰弱（機能別フローチャート）
← 異世界ポイントの活用について
← 異世界ポイント市場の実装記録