ポータルトップ / 開発者ブログ / 開発の始まり

DEVELOPMENT STORY

AIと一緒に作った新しい五目並べ『CYBER GOMOKU』の裏話

少しだけプログラミング経験があっても、サーバーを使うオンライン対戦ゲームを一人で安全に公開するには、多くの分野を学ぶ必要があります。サイバー五目は、その不足をAIの支援で補いながら形にしたプロジェクトです。

定番の五目並べに情報戦を加える

企画の出発点は、「昔からある分かりやすいゲームに、デジタルでなければ成立しない要素を加える」という考えでした。盤面と勝利条件は五目並べを基礎にしながら、次の3種類の能力を追加しました。

  • 相手から見えない状態で置くステルス碁石
  • 指定マスを踏むと周囲の石を消す碁石爆弾
  • 隠された石や爆弾を発見する碁石レーダー

完全情報ゲームだった五目並べに、予測、罠、探索を加え、相手の盤面だけでなく意図を読むゲームにすることが目標です。

ブラウザゲームを選んだ理由

アプリのインストールを必要とせず、URLを開けばすぐ遊べることを重視してブラウザゲームにしました。クライアントにはReact、TypeScript、Viteを使い、対戦サーバーはNode.jsとSocket.ioで構築しています。

ログインと戦績の保存にはFirebase AuthenticationとFirestoreを利用し、ゲーム本体はCloudflare Pages、対戦サーバーはRenderから配信しています。

AIには実装だけでなく、問題の切り分けを手伝ってもらう

AIへ要望を伝えるだけで完成したわけではありません。生成された実装がゲームルールに合っているかを確認し、ブラウザ、サーバー、認証、データ保存のどこに問題があるかを切り分ける必要がありました。

本番公開時にはGoogleログインが動かない問題が発生しました。このとき、画面に出たエラー、発生する環境、ローカルとの差を具体的に整理してAIへ渡すことで、設定不足を特定できました。「動かない」とだけ伝えるのではなく、再現条件と観察結果を共有する重要性を学びました。

ゲームの正解はサーバー側で判断する

オンライン対戦では、ブラウザから送られた盤面や勝敗をそのまま信用できません。現在は、手番、座標、アイテム残数、勝敗をサーバー側で再検証し、クライアントは表示と操作を担当する構成にしています。

五目並べの判定ロジックはクライアントとサーバーから利用できる純粋なモジュールへ集約し、同じルールを別々に実装して結果がずれないようにしました。AIを使う場合でも、どこを信頼境界にするかは開発者が決める必要があります。

公開後も改善を続ける

ゲームを公開した後は、初回説明、アクセシビリティ、CPU戦の目標、海外ポータル向けビルドなどを追加しました。完成したコードを得ることより、問題を小さく分け、検証し、次の改善につなげることがAIとの開発で最も役立った点です。

AIが生成した内容はそのまま採用せず、ゲームルール、セキュリティ、型チェック、ビルド結果を人間が確認する方針で開発しています。

ゲームの詳細を見るサイバー五目をプレイ