【ITニュース解説】600+ game pages from one TypeScript file: lessons from building a static games site with Astro

今回解説する記事は、一人で開発・運用している「MathLogic Games」というウェブサイトの構築事例に関するものだ。このサイトは、バックエンドを持たない「静的サイト」でありながら、600以上のゲームページを持つ大規模なものだ。どのようにして、これほど多くのページを効率的に管理し、機能を追加し、ユーザー体験を向上させているのか、その工夫を学ぶことができる。システムエンジニアを目指す初心者にとっても、ウェブサイト開発の現場で役立つヒントが満載だ。

このサイト構築の核となる考え方は、「データからすべてのページを生成する」というものだ。具体的には、すべてのゲーム情報（タイトル、説明、遊び方、画像など）が「ExternalGame」という形式のデータとして、たった一つのTypeScriptファイルにまとめられている。このデータは、まるでデータベースのテーブルのように、それぞれのゲームが「オブジェクト」という単位で表現されている。この単一のデータファイルがあれば、そこから個別のゲームページだけでなく、カテゴリ別のページ、新着ゲームの一覧、サイトの地図（サイトマップ）など、サイト内のあらゆるページが自動的に作られる。新しいゲームを追加したい場合でも、このデータファイルに一行追加するだけで、サイトの必要な場所すべてに自動的に反映されるため、手作業で何百枚ものページを更新する必要がない。さらに、データの中に重複するIDやURLのパス（スラッグ）がないか、サイトを公開するためのビルド時に自動的にチェックする仕組み（ガード機能）も導入されており、ミスを防いでくれる。これは大規模なデータを扱う上で非常に重要な品質管理の考え方だ。サイトマップの更新日を、ゲームデータの実際の更新日に合わせることで、検索エンジンに対して本当に変更があったページだけを正確に伝えられるようにしている点も細やかな工夫だ。

ウェブサイトに新しい機能を追加する際、意図しない変更が既存のページに影響を与えてしまうことはよくある。この記事では、それを防ぐための重要な原則が示されている。新しい機能は、特定のページにだけ適用されるように「オプション」として設計するのだ。例えば、FAQの情報を表示する機能や、スマートフォンで全画面表示するボタンは、必要なゲームやカテゴリにだけ「true」と設定することで有効になる。こうすることで、機能を追加しても、それとは関係のない他の600以上のページには一切変更が加わらない。この「既存ページに影響を与えない」ということを確実に検証するため、「ビルド成果物の差分比較」という手法が使われている。これは、新しい変更を加える前のサイトと、変更を加えた後のサイトの最終的なファイル群（公開されるウェブサイトのコード）を比較し、意図しない差分がないかを確認する作業だ。この作業により、「もしかしたら大丈夫だろう」という推測ではなく、「どのページがどのように変わったか」を正確に把握し、安心して公開できる。

ウェブサイトの成功を測る上で、「ユーザーがどれくらいサイトに滞在したか」や「どれくらいコンテンツに関与したか」を測る「エンゲージメント」は非常に重要だ。しかし、このサイトのように外部のゲームをiframe（ウェブページ内に別のウェブページを埋め込む技術）で表示する場合、一般的なアクセス解析ツール（Google Analyticsなど）では、ユーザーがiframe内のゲームを操作している時間を正確に計測できないという問題がある。解決策として、この開発者は、1秒ごとにウェブページが「今、ユーザーがiframeを操作しているか」を確認する簡単なJavaScriptコードを作成した。これにより、ユーザーがゲームを開始した時点や、1分、5分といった特定の時間プレイし続けた時点で、特別なイベントをアクセス解析ツールに送信できるようになり、より正確なユーザーの行動を把握できるようになった。

スマートフォンでゲームをプレイする際、一部のゲームは横向き画面でしかうまく動作しないことがある。ユーザーが縦向きのままプレイしようとすると、「デバイスを回転してください」といったメッセージが表示され、そこでプレイを諦めてしまう可能性がある。この記事では、この問題を解決するために、「全画面表示」ボタンを導入している。このボタンは、可能であればゲームを全画面表示にし、さらに画面を横向きに固定しようと試みる。しかし、iPhoneのSafariブラウザのように、一部の環境では全画面表示や画面向きの固定に対応していない場合がある。そのような状況でもユーザー体験を損なわないよう、ゲームを新しいタブで開くという「代替策（フォールバック）」が用意されている。これにより、少なくともウェブサイトのヘッダーやサイドバーが隠れ、ゲームに集中しやすい環境を提供できる。このボタンは、デスクトップユーザーには表示されないように、CSSでモバイルデバイスのみに表示されるよう設定されている。

次にどんなコンテンツ（ゲーム）を作るべきか、何がユーザーに求められているのかを知ることは、サイト運営において非常に重要だ。この記事の開発者は、この意思決定を支援するために、自動化されたスクリプトを「GitHub Actions」というツールを使って実行している。GitHub Actionsは、コードの変更を検知したり、定期的にスケジュールされたりして、自動的に特定の処理（スクリプトの実行など）を行うことができるサービスだ。このスクリプトは、Googleトレンド、Bingウェブマスターツール、Googleオートコンプリートといった複数の情報源から、特定のキーワード（ゲーム名など）に対するユーザーの関心度や検索量、関連する検索意図などのデータを収集・分析する。複数の情報源を組み合わせることで、より信頼性の高い「需要のあるコンテンツ」を見つけ出せる。「タイピングゲーム」のように、これまでサイトになかったが実は需要が高いカテゴリを発見できた事例も紹介されている。これにより、開発者は自身の思い込みではなく、客観的なデータに基づいて、次にどんなゲームを追加すべきか、どんなカテゴリに力を入れるべきかを判断できる。

他にも細かな改善点がいくつか挙げられている。サイトを更新した際、変更されたURLを検索エンジン（Bingなど）にすぐに通知する「IndexNow」の活用。広告配信に必要なファイル「ads.txt」が正しく配信されているか、実際にブラウザで確認することの重要性。ウェブサイトがwwwあり/なしなど複数のURLでアクセスされ得る場合でも、検索エンジンに「このページの本物のURLはこれだ」と伝えるための「正規URL (Canonical URL)」を自動生成する設定。そして、手書きで作成するゲームの説明文が、外部プラットフォームのオリジナルテキストと重複していないか、自動的にチェックするスクリプトの導入などだ。これらは地味ながらも、サイトの品質維持や検索エンジンからの評価に大きく影響する重要な運用上の工夫と言える。

このように、このサイト構築の事例は、一人で大規模なサイトを効率的に開発・運用し、ユーザーのニーズに応えながら成長させていくための、実践的なノウハウが凝縮されている。データ駆動型開発、堅牢な変更管理、正確な効果測定、データに基づいた意思決定、そして細かいながらも重要な運用上の工夫は、システムエンジニアを目指す初心者にとって、ウェブ開発の現場で直面するであろう課題への有効なアプローチを学ぶ良い機会となるだろう。