旧画面の再描画を止め、
現在の画面を一度だけ表示する
旧デザインが順番に現れる原因と、起動・保存・描画の整理。
原因
指摘の通り、追加ファイルを使う改修が積み重なっていた。変更前のHTMLには103本のscriptタグと45本のゲーム用スタイルシートがあり、37か所の独立した起動時描画と、９段の描画関数の差し替えがあった。読み込み途中に旧画面を表示し、後続の処理が完成するたびに画面全体を作り直していた。
新規キャリアの計測では、メイン画面のHTMLを45回差し替えていた。ファイルが多いことだけでなく、初期化と描画を各機能で混在させていたことが問題だった。103本すべてが不要な旧デザインのファイルではなく、選手データ、規程、試合・成長モデルなども含まれる。
変更した構成
- 現在のアセット順序を保つdefer読み込み
完成したゲーム用CSSを１本で配信 - データ準備キャリアと基準編成の復元
必要な大会・移籍の更新 - 一度だけ描画現在の画面と５分類のナビ
準備中の旧画面は描画しない
- 共通の描画入口：機能ごとのrender関数の重ね掛けを廃止。画面生成の前後に必要な処理を登録し、現在の画面だけを一度マウントする。
- 専用画面へ直接移動：契約・Review deal・Transfer centreは共通の画面登録を使用。Homeを作ってから契約画面へ上書きする処理をなくした。
- スタイルの配信を統合：45本のゲーム用CSSを１本のtouchline-current.cssへ集約。起動表示のCSSを含め、実行時は２本を読む。後から到着するCSSで旧画面の外観を順番に変えない。
- 起動タスクを分離：国内杯・UEFA・他リーグ・予約済み移籍の処理を明示した順序で実行。処理内容を起動表示に示し、準備が完了してからゲーム画面を表示する。
- 保存を整理：機能登録中の保存要求は、全体の復元が完了してからまとめて保存。移行・契約など、起動タスク内の確定処理は即時保存の成否を受け取れる。
作者用のCSSファイルは保守のために残す。現在の画面が使う共通定義や大会テーマも含まれるため、古いファイル名だけを根拠に削除していない。CSSの統合は既存の優先順位を保ち、ゲームのデザイン自体を変更しない。試合・成長・移籍などのモデルをひとつのスクリプトに無理に結合してはいない。
計測
| 独立したテスト環境 | 変更前 | 変更後 |
|---|---|---|
| 新規キャリア・file起動 | 約7.0秒 | 約5.3秒 |
| 保存済みキャリア・HTTP起動 | 約2.9秒 / 44回描画 | 約2.7秒 / １回描画 |
このPC、Edgeの独立したブラウザー、390×844px。外部画像へのリクエストを止め、アプリの準備完了までを測定した一組の比較。初回の国内杯・他リーグの準備を含む。ユーザーのキャリアを操作した結果や、iPhoneでの保証値ではない。実行負荷・キャッシュ・保存されている期間で時間は変動する。
新規キャリアでは国内大会の準備に約2.1秒、他リーグの結果の補完に約1.2秒が必要だった。保存済みキャリアで同日まで補完されている場合、これらの更新はそれぞれ数ミリ秒で終了する。画面更新の重複を除いた後も、データファイルの取得・解析、未処理の試合の集計などは必要になる。
保存・動作の確認
実際のアクセス先である127.0.0.1:8765で、同じ保存済みキャリアを変更前・変更後のコードへ読み込み比較した。日付、選手の並び、4–3–3の基準編成、戦術値、戦術プラン、移籍台帳・交渉、既存の試合結果、保存されている成長レーティング・育成量・出場記録を確認した。キャリアの初期化・巻き戻しは実施していない。
- 新規・保存済みキャリアとも、現在の画面を一度だけ描画。
- Home / Squad / Transfers / Office / Competitionsと、契約・Review deal・Transfer centreへ直接描画。
- 基準編成と試合前の一時編成、確定後の相手メンバー表と戻れない制御、試合開始・試合中編集・翌日復元。
- 練習と翌日進行のローディング、連打の抑止、例外復帰、保存失敗時の再保存。
- 予約済み移籍の実行、資金の一度だけの差し引き、既存の編成と交渉の維持。
- 320・390・1280pxで現在のレイアウトとナビを確認。
- 必要なアプリファイルを意図的に欠損させ、復帰可能なエラーを表示。初期化途中の画面を表示せず、未完了の状態で既存のキャリアや編成を上書きしない。
検証：tests/touchline-startup-browser.cjs、touchline-pre-kickoff-browser.cjs、touchline-matchday-plan-browser.cjs、touchline-loading-browser.cjs、touchline-navigation-cup-centre-browser.cjs、touchline-club-calendar-browser.cjs、touchline-world-transfer-agreement-browser.cjs。
以後の改修方法
新しい画面はTouchlineUI.viewへ登録し、表示前後の機能はbefore / afterへ登録する。起動直後のrender呼び出しや、以前のrenderを包んで差し替える追加をしない。必要な起動処理はTouchlineBoot.taskへ登録する。
CSSを編集した後は、node scripts/build-touchline-styles.cjsで配信用ファイルを生成する。登録順はoutputs/assets/touchline-styles.jsonで管理し、生成したCSSのハッシュをURLへ付けて旧キャッシュとの混在を防ぐ。既存のファイル編集が画面に反映されない状態を、さらに上書き用のデザイン層を追加することで解決しない。