クソゲーの森 2026年8月リリース：ゲームパッケージとSSGを拡張

今回の更新

クソゲーの森へゲームを追加しやすくするため、ゲーム本体をパッケージ単位で管理し、サイト側のレジストリから一覧とルートを生成する構成を整えました。これまではゲームを追加するたびに、一覧、ルーティング、起動処理の複数箇所を修正する必要がありました。今回の構成では、ゲーム固有のルールとサイト全体のナビゲーションを分離し、追加時に確認すべき箇所を明確にしています。

今回の変更では、もぐら叩き、テトリス、スネーク、ブロック崩し、ぷよ、縦スクロールシューティング、オセロなど、性質の異なるゲームを同じサイトで扱えるようにしました。毎フレーム更新するゲームと盤面をクリックして進めるゲームでは、必要な描画方式と入力処理が異なるため、すべてを同じコンポーネントへ押し込めず、ゲームごとに実装方式を選んでいます。

ゲームを追加する単位

新しいゲームは、ゲーム固有のルール、描画処理、入力処理、説明用メタデータを一つのパッケージとして管理します。サイト本体が知るのは、ゲーム名、公開パス、説明、サムネイル、操作方法、クライアント起動に必要な入口だけです。ゲームの内部状態やスコア計算をサイト全体へ持ち込まないことで、あるゲームの変更が既存ゲームのルーティングや初期化へ波及しにくくなっています。

この単位には、ゲームを削除・停止するときの影響範囲を限定できるという利点もあります。ゲーム本体に不具合が見つかった場合は、そのゲームのURLを一覧から外す、または説明へ一時停止を表示するといった判断ができ、サイト全体を停止してから修正する必要はありません。ただし公開URLを変更すると外部リンクが壊れるため、URLを変える場合は旧パスの扱いを別途決めます。

ゲームごとの実装方式

Phaserを使うゲームはクライアント限定で動的に読み込み、サーバー側のプリレンダーを壊さないようにしています。ゲームページの説明とメタデータは先に生成し、ブラウザで必要なゲームコードを読み込んでからCanvasを初期化します。こうすることで、ゲームエンジンの初期化が失敗しても、ページのタイトルや操作説明まで消えてしまうことはありません。

オセロはDOMと純粋なルールエンジンで構成し、アクセシビリティとテーマ対応を保っています。盤面の更新、AIの思考中表示、手番の表示、ゲーム終了の表示を分け、AI処理が遅いときでもページ全体が操作不能にならないようにしています。異なる実装方式を同じ一覧へ載せるため、ゲームごとの操作方法と対応環境をメタデータとして管理します。

リリース前には、ゲームを直接開いた場合と一覧から開いた場合の両方を確認します。直接開いた場合でもページタイトル、操作方法、開始方法が先に読めること、一覧から開いた場合に選択したゲームと表示されるゲームが一致することを確認します。Phaserのチャンクが読み込めない場合でも、ゲーム本体が動かない原因を知らせる表示は残るようにしています。

公開URLと運用

ゲーム一覧と各ゲームのページはSSGで生成し、GitHub Actionsで検証・ビルドした成果物をAWSのS3とCloudFrontへ公開します。インフラ変更とコンテンツ変更のデプロイを分け、ゲーム追加だけでインフラ全体を再構築しない運用にしています。公開前には、レジストリに登録したゲームのURLが生成されること、一覧から詳細ページへ遷移できること、ゲームを開く前に操作説明が読めること、ビルド後のアセット参照が壊れていないことを確認します。

静的配信では、公開済みのHTMLがすぐに更新されるとは限らないため、CloudFrontのキャッシュとデプロイ完了もあわせて確認します。新しいゲームだけが404になる場合は、ルート生成、アップロード対象、キャッシュの順に調べます。ゲーム本体のコードとサイトの説明が一致しない場合は、先に操作と実装を確認したうえで、必要な記事やメタデータを更新してから再公開します。

ゲームを増やしたあとは、公開URLの数だけを確認するわけではありません。各ゲームのHTMLが生成されたか、説明に操作方法が含まれるか、JavaScriptと画像の相対パスが正しいか、スマートフォンの画面でCanvasやDOM盤面が切れないかを確認します。複数のゲームで共有するUIやスタイルを変更した場合は、異なる描画方式のゲームを少なくとも一つずつ開き、共通変更が個別実装を壊していないかを確認します。

ゲームはクソゲーの森から遊べます。操作方法と対応環境は各ゲームのページで確認してください。追加されたゲームが表示されない、操作できない、画面が端末からはみ出すといった問題がある場合は、ゲーム名、URL、端末、ブラウザ、操作手順を添えてご連絡ください。設計上の詳細は技術構成の記事で説明しています。