AI を使用してウェブベースのビデオゲームをリリースする

1. はじめに

概要

今日の AI を使用した構築はどこから始まるのでしょうか。ほとんどの場合、簡単なクエリまたはプロトタイプから始まります。Google AI Studio には強力なビルドモード （「バイブ コーディング」とも呼ばれます）が用意されており、Gemini モデルによるコード生成を使用してフルスタック ウェブ アプリケーションを設計、テスト、構築できます。

この Codelab では、Firestore データベースとイベント ソーシング （ゲーム アクションを一連のイベントとして永続化し、プレイヤーが対戦履歴を確認して前のターンに戻れるようにする）を使用して、ターンベースのウェブベースのビデオゲームを構築します。ユーザー ログインには Firebase Authentication を使用します。AI Studio エージェントは、すべてのバックエンド サービスを構成し、フロントエンド、イベント ソーシング ロジック、データベース操作コードを記述します。アプリが完成したら、ワンクリックで Cloud Run に直接デプロイします。

ポートフォリオ ウェブサイトの完成版

演習内容

  • Google AI Studio に、ターンベースのマルチプレイヤー ビデオゲーム ウェブ アプリケーションのプロトタイプを作成するよう指示します。
  • 共有可能な短いゲームコードまたは参加リンクのサポートを実装して、友だちが同じ対戦に参加できるようにします。
  • イベント ソーシング パターンを使用して Firestore データベース ストレージを実装し、対戦履歴を追跡してゲームプレイのタイムトラベル（ターンの取り消しや再生）を可能にします。
  • Firebase 統合を構成して有効にし、Firestore データベースをプロビジョニングして Google ログイン認証を設定します。
  • インタラクティブ プレビュー サンドボックスでアプリケーションをテストします。
  • Google AI Studio UI から Cloud Run にアプリケーションを直接デプロイします。

学習内容

  • Google AI Studio のビルドモードを使用して、自然言語を使用してフルスタック ゲーム サービスのプロトタイプを迅速に作成する方法。
  • Cloud Firestore を使用してイベント ソーシング アーキテクチャ パターンを実装し、ゲーム履歴を保存する方法。
  • Google AI Studio が Firebase Firestore と Authentication の統合を自動的に構成する方法。
  • AI Studio アプリケーションを Cloud Run のサーバーレス コンテナとしてデプロイする方法。
  • Firebase コンソール内でデータベース レコードとセキュリティ ステータスを検査する方法。

2. プロジェクトのセットアップ

AI Studio を起動する前に、アカウントのステータスと前提条件を確認してください。

Google アカウントとティア情報

  1. Google アカウントをまだお持ちでない場合は、Google アカウントを作成します。
    • ヒント: このラボでは、可能な限り個人の Google アカウントを使用してください。グループ アカウント、企業アカウント、学校アカウントでは、試験運用版の機能やクラウド統合が無効になる Workspace ポリシーが適用される場合があります。
  2. デプロイの課金詳細を確認します。
    • Google Cloud スターター ティア: 完全な Google Cloud 請求先アカウントを設定せずに、選択したリージョンで最大 2 つのフルスタック アプリケーションを無料で公開できます。
    • 標準デプロイ: 既存の有料 Google Cloud プロジェクトに接続し、ストレージ上限、CPU リソース、API を拡張します。

3. AI Studio ビルドモードでターンベースのビデオゲームを作成する

アプリケーション シェルを作成し、AI コード アシスタントにセキュリティ、ゲームプレイ ロジック、イベント ソーシングによる永続化レイヤを構築するよう指示します。

  1. [Google AI Studio Apps panel] に移動し、[New App] をクリックします。
  2. チャット プロンプト ボックスに、ターンベースのビデオゲーム アプリケーションの説明を入力します。 
    Build a web-based, turn-based Tic-Tac-Toe game using
Firebase as a backend. Users must be able to securely sign in
using Google Sign-In, start a new game match, make moves, and play
against an AI player or another user. Any algorithm used for the
game opponent AI should use simple algorithms like min/max and the
app should not make any calls to an LLM like the Gemini API. To
support multiplayer matches, the application must generate a short
game code or share link that players can easily copy and send to a
friend to join the match. Use Firestore and an event sourcing
pattern to save a history of every move (turn) as a separate event
document in a subcollection under the game document. The
application must reconstruct the current game state by replaying
these events, and must allow users to view previous turns and opt
to restore/roll back the game to a prior turn's state.
    このリンクをクリックすると、プロンプト ボックスに自動的に入力されます。
  3. [Build] をクリックして、アプリケーション生成プロセスを開始します。

AI Studio エージェントは、データベース ストレージと安全なユーザー ログインの必要性を認識すると、自動化された Firebase 構成フローをトリガーします。

  1. 約 1 分後に、ワークスペースに [Enable Firebase] 統合カードが表示されます。
  2. [Enable Firebase] ボタンをクリックして、利用規約を確認して同意します。
  3. エージェントがバックグラウンドでセットアップを実行します。仕組み:
    • Firestore データベース インスタンスがプロビジョニングされます。
    • Google ログインが有効になっている状態で Firebase Authentication が有効になります。
    • サービス アカウント構成が確立されます（API 認証情報を含む src/lib/firebase.ts の作成など）。
    • デフォルトのセキュリティ境界（ユーザー分離ルール）を含む firestore.rules が追加されます。

4. テストを繰り返し行う

サービスをライブで起動する前に、インタラクティブ プレビューで検証チェックを実行します。

  1. Google AI Studio 内でプレビュー パネルを開きます。
  2. [Login] ボタンをクリックして、サンドボックス Google ログイン認証をトリガーします。
    • エラーの修正に関する注意: 生成またはテスト中に、セキュリティ ルールの不一致により、ランタイムの問題、コンパイル エラー、Firestore 権限の失敗が発生することがあります。この場合、AI Studio のチャットに [Fix] ボタンが表示され、エージェントに問題の自動診断と修復を依頼できます。
    Google AI Studio の修正ボタンの場所
  3. ログインしたら、新しいゲーム対戦を開始し、生成された短いゲームコードまたは共有リンクをコピーして、対戦に参加できることを確認します。
  4. 何度か移動して、対戦履歴が正しくレンダリングされることを確認します。
  5. 対戦の前のターンに戻ってみます。ボードまたは状態が更新され、ゲームプレイ履歴の過去の時点が反映されていることを確認し、その状態に復元またはロールバックできることを確認します。
  6. スタイルや動作を変更する場合は、チャット ウィンドウでエージェントに指示します。次に例を示します。
    • "Could you style the game board interface using Tailwind CSS and add a retro pixel-art theme?"
    • "Add a 'Turn History' sidebar matching the current state replay that shows when each move was made and by whom."
  7. エージェントがコードベースを更新するまで待ってから、プレビュー ブラウザで更新を確認します。

5. Cloud Run にデプロイする

プロトタイプが完全に機能したら、Cloud Run に公開サービスとしてデプロイします。

  1. Google AI Studio の右上にある [Publish] ボタンをクリックして、デプロイ ウィザードを開始します。Google AI Studio の公開ボタンの場所
  2. [Get Started] をクリックして、Google Cloud プロジェクトを構成します。
    • ターゲットの [Google Cloud Project] プルダウンが、ワークスペースに関連付けたプロジェクトと一致していることを確認します。
    • AI Studio は、Cloud Run インスタンスの一意のサービス ID を自動的に生成します。
    • 必要に応じて、デプロイ構成の一部としてカスタム .ai.studio URL プレフィックス（your-portfolio-name.ai.studio など）を指定できます。
  3. 初めてデプロイする場合で、標準の Google Cloud パラメータを使用している場合は、組織タイプを指定して課金情報を入力するよう求められることがあります。
  4. [Publish App] をクリックします。
  5. コンテナのビルド、コンテナの登録、サービスのデプロイはバックグラウンドで行われます。通常、このプロセスは 2 ～ 4 分で完了します。
  6. デプロイが完了したら、生成されたアプリの URL をコピーし、ブラウザタブでライブ アプリケーション リンクにアクセスします。
  7. ブラウザでライブ ウェブ アプリケーションをテストします。

6. Firebase コンソールで検査する

データスキーマとユーザーがどのように追跡されるかを確認します。

  1. Firebase コンソールに移動します。
  2. プロジェクト（AI Studio ラベルまたは手動でバインドしたプロジェクト ID が付いているプロジェクト）を選択します。
  3. 左側のナビゲーション パネルで、Build > Firestore Database を選択します。
    • アプリケーションによって作成されたデータベース コレクションとドキュメントを表示します。
    • 各ドキュメントに、アクティブなユーザー認証情報と一致するオーナー ID が設定されていることを確認します。
  4. Firestore パネルで [Security] タブを選択し、読み取り権限と書き込み権限を検証済みのドキュメント オーナーに制限する自動生成されたセキュリティ ディレクティブを確認します。
  5. Security > Authentication に移動して、ログイン テスト中に入力されたアクティブなユーザー認証情報のリストを表示します。

7. クリーンアップ

予期しない課金を回避するか、ワークスペース リソースをクリーンアップするには:

  1. Google AI Studio で [Apps ページ] に移動します。
  2. グリッドまたはリストでアプリケーションを見つけます。
  3. ゴミ箱アイコンをクリックしてアプリの状態を削除し、Cloud Run からサービスの公開を停止します。
  4. 標準プロジェクトを使用してデプロイし、すべてのリソースを完全にシャットダウンする場合は、[Google Cloud コンソールのプロジェクトの設定] に移動して、基盤となるプロジェクトを削除します。

8. まとめ

おめでとうございます！Google AI Studio から直接、ターンベースのビデオゲームを設計、開発、デプロイしました。

[this link] にアクセスして、[Completed Builder Journey] バッジを受け取ってください。

次のラボに進むには、goo.gle/builders にアクセスしてください。

詳細