1. はじめに
この Codelab では、Gemini 3 と Antigravity コーディング エージェントを使用して、マッチ 3 アーケード ゲームの CloudCrush を作成します。ゲームは Go で記述され、Cloud Run を使用して Google Cloud にデプロイされます。
Go 言語の知識があることが推奨されますが、エージェントがすべてのコーディングを行うため、このワークショップに参加するために必須ではありません。この Codelab の主な目標は、コードを手動で記述するのではなく、エージェントをオーケストレートしてアプリケーションを構築するスキルを習得することです。
この Codelab は、高度なエージェント ワークフローを学習したい中級レベルのデベロッパーを対象としています。このラボの推定所要時間は 60 分です。この Codelab で作成するリソースでは、従量制料金が使用されます。
演習内容
- Go と Ebitengine フレームワークを使用して、マッチ 3 ゲームのコアロジックを構築します。
- WebAssembly（WASM）を使用してウェブブラウザで実行できるようにゲームを適応させる
- ゲームとそのハイスコア API を Cloud Run にデプロイします。
- テストとコードレビュー用の特別なサブエージェントと拡張機能をオーケストレートする
前提条件
- プログラミング言語に関する基本的な知識
- クラウド インフラストラクチャの基礎知識
- Google Cloud コンソールの基本知識
学習内容
- コーディング エージェントを使用して複雑なアプリケーションを構築する方法
- マルチモーダル コンテキストで Gemini を操作する方法
- Cloud Run を使用してアプリケーションをクラウドにデプロイする方法
必要なもの
このワークショップは Cloud Shell を使用してクラウド上で完全に実施できますが、ローカルマシンを使用する場合は次のものが必要です。
- Antigravity 2.0 と Antigravity CLI。antigravity.google の手順に沿ってダウンロードしてインストールします。
- Go ツールチェーン（バージョン 1.26 以降）。go.dev の手順に沿ってダウンロードしてインストールします。
- Google Cloud を操作するための gcloud CLI。Google Cloud ドキュメントの手順に沿ってダウンロードしてインストールします。
- Google Cloud 請求先アカウント（ゲームをクラウドにデプロイするため）
主なテクノロジー
使用するテクノロジーについて詳しくは、以下をご覧ください。
- Antigravity CLI: 開発エージェント
- Gemini 3: 最先端の大規模言語モデルの最新バージョン
2. 環境設定
この Codelab を独自のマシンで実行する場合は [Self-paced environment setup] を、この Codelab をクラウドで実行する場合は [Start Cloud Shell] を選択します。
セルフペース型の環境設定
- Google Cloud Console にログインして、プロジェクトを新規作成するか、既存のプロジェクトを再利用します。Gmail アカウントも Google Workspace アカウントもまだお持ちでない場合は、アカウントを作成してください。
- プロジェクト名は、このプロジェクトの参加者に表示される名称です。Google API では使用されない文字列です。いつでも更新できます。
- プロジェクト ID は、すべての Google Cloud プロジェクトにおいて一意でなければならず、不変です（設定後は変更できません）。Cloud コンソールでは一意の文字列が自動生成されます。通常は、この内容を意識する必要はありません。ほとんどの Codelab では、プロジェクト ID（通常は
PROJECT_IDと識別されます）を参照する必要があります。生成された ID が好みではない場合は、ランダムに別の ID を生成できます。または、ご自身で試して、利用可能かどうかを確認することもできます。このステップ以降は変更できず、プロジェクトを通して同じ ID になります。 - なお、3 つ目の値として、一部の API が使用するプロジェクト番号があります。これら 3 つの値について詳しくは、こちらのドキュメントをご覧ください。
- 次に、Cloud のリソースや API を使用するために、Cloud コンソールで課金を有効にする必要があります。この Codelab の操作をすべて行って、費用が生じたとしても、少額です。このチュートリアルの終了後に請求が発生しないようにリソースをシャットダウンするには、作成したリソースを削除するか、プロジェクトを削除します。Google Cloud の新規ユーザーは、300 米ドル分の無料トライアル プログラムをご利用いただけます。
Cloud Shell の起動
Google Cloud はノートパソコンからリモートで操作できますが、この Codelab では、Google Cloud Shell（Cloud 上で動作するコマンドライン環境）を使用します。
Google Cloud コンソールで、右上のツールバーにある Cloud Shell アイコンをクリックします。
プロビジョニングと環境への接続にはそれほど時間はかかりません。完了すると、次のように表示されます。
この仮想マシンには、必要な開発ツールがすべて用意されています。永続的なホーム ディレクトリが 5 GB 用意されており、Google Cloud で稼働します。そのため、ネットワークのパフォーマンスと認証機能が大幅に向上しています。この Codelab での作業はすべて、ブラウザ内から実行できます。インストールは不要です。
3. プロジェクトのセットアップ
プロジェクト ディレクトリを作成する
まず、プロジェクト用の新しいディレクトリを作成する必要があります。ターミナルで次のコマンドを実行します。
mkdir -p codelab-match3 && cd codelab-match3
Antigravity CLI を起動する
まず、Antigravity CLI が正しくインストールされていることを確認します。ターミナルで次のコマンドを実行します。
agy --version
次のように表示されます。
$ agy --version 1.0.2
agy コマンドで Antigravity CLI を起動します。
agy
Antigravity で、このプロジェクトを信頼するかどうかを尋ねられます。空のフォルダを作成したばかりなので、信頼しても安全です。アクセスを確認すると、CLI プロンプトが表示されます。
Antigravity CLI のプロンプトが表示されたら、準備完了です。表示されない場合は、前の設定手順を見逃していないか再確認してください。
4. プランニング モードでベースゲームを作成する
まず、マッチ 3 ゲームのコアロジックを構築しましょう。Antigravity はデフォルトでプランニング モードで起動するため、プランニングに切り替えるための特別なコマンドを発行する必要はありません。
ただし、Antigravity CLI プロンプトでスラッシュ コマンド /planning を使用すると、いつでもプランニング モードを有効にできます。
/planning
このコマンドを今実行しようとすると、Antigravity はすでに計画中であることを通知します。
プランニング モードの反対は高速モードです。高速モードは /fast で有効にできます。
/fast
高速モードでは、Antigravity はすぐにタスクの処理を開始します。このモードは、単純な自己完結型のタスクを対象としています。プランニング モードは、複雑なタスク向けに設計されています。エージェントが最初にプランを作成し、実行前に確認と反復を行うことができます。
アセットをダウンロードする
ゲームで使用する画像をダウンロードする必要があります。これは小さな自己完結型のタスクであるため、計画モードで実行する必要はありません。高速モードであることを利用して、すぐに実行しましょう。
Create a folder named "assets" and download the images
background.png, gcp_sprites.png, gemini.png and logo.png,
from this GitHub repository to the "assets" folder:
https://github.com/GoogleCloudPlatform/devrel-demos/tree/main/codelabs/gemini-cli/gemini-cli-match3-golang
Antigravity は、ファイルをダウンロードするためにいくつかのシェル コマンドを実行する権限を求めます。完了すると、次のように表示されます。
ベースゲームを作成する
アセットの準備ができたので、ベースゲームを構築します。ゲームの作成はかなり複雑なタスクなので、プロンプトを入力する前にプランニング モードに戻りましょう。
/planning
プランニング モードで、次のプロンプトをコピーして Antigravity CLI に貼り付けます。
Build a Match-3 game called 'Cloud Crush' in Go using Ebitengine v2.
The entire game screen should have background.png as background.
The play area should be an 8x8 grid with white background.
On the right side of the play area include a side panel with UI elements
like player score and how to play instructions.
The side panel should have a solid background colour to help with readability of the UI.
Use standard GCP product logos (e.g. Compute Engine, Cloud Storage, BigQuery, etc.)
as icons. These icons are provided in the gcp_sprites.png file.
The icons are saved as 64x64 sprites but scale them as necessary
based on the screen resolution. Implement swapping, clearing 3+ gems, and gravity.
Use ebitengine native font rendering (size 48 for titles and size
24 for normal text) for all text and not the debug print.
The font should be monospaced (golang.org/x/image/font/gofont/gomono).
Keep the UI tidy and harmonic, e.g. centered text should always be
adjusted based on text length, not just guess based on estimates.
たとえば、PNG ファイルのサイズを確認するなど、プランを立てる前に探索を行うことがあります。プランが完了すると、確認を求めるメッセージが表示されます。
右下の [1 artifact] と、/artifact を使用して確認するヒントに注目してください。Antigravity では、プラン、タスクリスト、チュートリアルなどのサポート ファイルは、ソリューションの一部である通常のファイル（ソースコードなど）と区別するために「アーティファクト」と呼ばれます。
プロンプトに「/artifact」と入力すると、プランを表示してコメントを追加できるため、必要に応じて調整できます。
/artifact
次のように表示されます。
implementation_plan.md というファイルがあり、開く、承認する、拒否するオプションがあります。Enter キーを押して開きます。システムでのプランの表示例を次に示します。
矢印キーで上下にスクロールできます。任意の行で C キーを押すと、コメントを追加できます。この場合、古いバージョンの Go が使用されているため、16 行目に Go 1.26（このドキュメントの作成時点での最新バージョン）を使用するコメントを追加します。
コメントを入力すると、インラインで表示されます。
確認する重要なセクションは [Verification Plan] です。ゲームは自動テストが難しいことで知られていますが、go はコンパイル言語なので、少なくともモデルがコンパイル可能なコードを渡してくれることを確認する必要があります。バイナリをビルドする自動化されたステップが含まれていない場合は、コメントとして追加します。
確認する重要なセクションは [Verification Plan] です。ゲームは自動テストが特に難しいですが、go はコンパイル言語なので、少なくともモデルがコンパイル可能なコードを渡してくれるようにする必要があります。バイナリをビルドする自動化されたステップが含まれていない場合は、コメントとして追加します。
プランに満足するまでこのプロセスを繰り返し、ESC キーを押して戻ります。次に、「Y」を押して、エージェントにコメントを送信することを確認します。
「Y」と入力すると、エージェントはすぐに動作を開始します。[アーティファクト] メニューを終了するには、もう一度 Esc キーを押す必要があります。プロンプト モードに戻ります。一方、エージェントはシェル コマンドを実行する必要があるため、ツール呼び出しの確認を何度も求めることがあります。
待機中に、プロンプトをキューに登録して、デザインの作業を続けることもできます。たとえば、この機会を利用して、元のプロンプトで漏れていた新しい要件を追加できます。
Add a 60-seconds countdown timer and an in-memory high-score tracker to enhance the arcade game experience. Combos should give a score bonus of 10% per combo number.
キューに登録されたプロンプトは、メッセージの履歴に表示されます。プロンプトの先頭には小さな矢印が表示されます。
アーティファクトの数が増加していることもあります。Antigravity は、計画に加えて、実装する必要がある各項目や実行する必要があるアクションを追跡するためのタスクリスト（task.md）も作成します。完了すると、達成した目標の説明を含むウォークスルー ファイル（walkthrough.md）が作成されます。これらすべてをもう一度 /artifact コマンドで確認できます。
ベースゲームの実装が完了した後の task.md ファイルの例を次に示します。
これらのファイルはいつでも開いてコメントを追加できます。コメントをエージェントに送信すると、キューに登録されたプロンプトと同様に、実行のためにキューに登録されます。これらのファイルにコメントを追加して、リクエストに関する追加のコンテキストをエージェントに提供することをおすすめします。
バイナリが正常にビルドされると、次のような出力が表示されます。
ゲームを実行して、想定どおりに動作するかどうかを確認します。エージェントのプロンプト内から実行することをおすすめします。感嘆符「!」を入力すると、プロンプトを「シェルモード」に切り替えることができます。
プロンプトの下に「bash モードが有効になりました」というメッセージが表示されます。Enter キーを押してコマンドを実行します。このモードでバイナリを実行すると、エージェントがターミナルへの出力を監視しているため、ゲームの実行が失敗したり、突然クラッシュしたりした場合に、エージェントに発生した問題を説明する必要がないというメリットがあります。シェル コンテキストから必要なすべての情報をすぐに取得します。
ゲームをプレイして、ゲーム パラメータを微調整し、満足のいくエクスペリエンスになるまで調整します（アニメーションの速度を上げたり下げたり、コマンドへの応答方法を調整するなど）。
たとえば、このプロンプトにより、ユーザー補助モードと新しいキーボード コマンドが追加され、エクスペリエンスが向上します。
Update the implementation to include: 'Q' to quit, 'F' for full-screen
and 'A' for Accessibility Mode: swap GCP logos for high-contrast coloured blocks.
Also enable Arrow Keys to move the selection cursor and Space to select the gem to
swap (space is pressed once to select, then arrow key immediately makes
the move - no need to press space again).
Use a golden square (4 px border, transparent fill) with a simple animation
to highlight where the cursor is at the moment.
磨き上げが完了したら、次のセクションに進んでウェブアプリに変換します。
5. ウェブブラウザで実行できるようにゲームを適応させる
Ebitengine ゲームは現在、デスクトップ アプリケーションです。Antigravity CLI に、WebAssembly（WASM）を使用してウェブブラウザで実行できるように適応させるようリクエストしてみましょう。これには、ブラウザ ターゲット用の Go コードのコンパイルと、基本的なウェブサーバーの設定が含まれます。
次のプロンプトを使用して、エージェントをガイドします。
We need to enable this game to run on a web browser. Compile the game to WASM
and create a Go web server to serve the compiled WASM and the assets.
エージェントはファイル システムで wasm_exec.js というファイルを探そうとします。これは想定どおりの動作です。このファイルは JS 経由で Go バイナリを実行できるようにするラッパーであるため、許可する必要があります。次に例を示します。
エージェントがタスクを完了したら、エージェントにゲームサーバーをバックグラウンドで実行するよう指示できます。
ブラウザで http://localhost:8080 を開いて、ウェブで実行されているゲームを確認します。
ウェブ上で実行できるようになったので、クラウドにデプロイする前に最終的な調整を行います。
6. タイトル画面とリーダーボードを作成する
ゲームは動作しますが、アーケードの適切な体験に必要な重要な機能がいくつかありません。まずタイトル画面を追加し、次にランキングを追加して、友だちと競い合えるようにしましょう。次のプロンプトを使用します。
Create a title screen that displays the game logo (logo.png) over the cloud background.
The logo should be centered and occupy no more than 75% of the screen area.
The title screen should display "Press ENTER to play" (black/bold) right below the logo,
with every letter animated in a slow wavy (cosine) pattern.
Once the player presses ENTER, it should be prompted to add their name, which
will then be recorded to populate the leaderboard at the end of the round.
Once the game is over, play the animated leaderboard with the top 10 highest scores.
The animated leaderboard should render entries one by one up to 10 entries,
using a fade in effect just like old school arcade games. The leaderboard
should fade out to the title screen after 15 seconds.
Please note that name entry should be processed independently of the play state
key handlers (e.g. pressing A during name entry should not toggle accessibility mode).
Leaderboard scores should be saved in-memory, server-side.
少しずつプロフェッショナルな印象になってきました。🙂
7. ゲームを Cloud Run にデプロイする
いよいよ、作成したものを世界に公開する時が来ました。どこからでもアクセスできるように、アプリケーション全体を Google Cloud Run にデプロイします。
Use the gcloud CLI to provision and deploy the Go web server and its assets to
Google Cloud Run. Provide the live URL when complete.
ゲームがクラウドでライブ配信されているため、モバイル デバイスで実行できないのは機会損失です。次のプロンプトを使用します。
Now enable this game to run on mobile devices. You need to update the input system to handle "taps" as well as key presses and clicks. Since mobile devices most likely won't have a keyboard, add a virtual keyboard to the name entry screen and a confirmation button to the name entry.
Finally, generate a QR code for the CloudRun link and display it on the screen so that people can scan it to access the mobile version and compete against their friends for the high score.
ブラウザでゲームを再度実行します。モバイル デバイスからも URL にアクセスしてみてください（QR コードを生成すると、この操作が簡単になります）。
8. ブラウザ エージェントを使用してゲームをテストする
ゲームは視覚的なフィードバックに依存するため、自動テストが難しいことが多いですが、少なくともデプロイが正しく機能し、基本的な要素が整っていることを確認するために、自動化を活用することはできます。
これを行うには、ブラウザ サブエージェントを使用します。Antigravity では、サブエージェントは新しいコンテキストを持つ分離されたペルソナです。現在のコンテキストが結果に影響しないようにしたいタスクや、タスクがメインのコンテキスト ウィンドウを「汚染」しないようにしたい場合に最適です。
ブラウザ エージェントは、ブラウザ関連のタスク用の特別な組み込みエージェントです。この手順では、ブラウザ エージェントは現在コマンドラインで使用できないため、Antigravity デスクトップ アプリを使用する必要があります。
Antigravity デスクトップ アプリを開き、Cloud Crush プロジェクトで新しい会話を開始します。
/browser に続いて次のプロンプトを入力すると、ブラウザ サブエージェントをトリガーできます。
Go to http://localhost:8080 and capture screenshots of the following game screens:
1. Title Screen (initial state: "PRESS ENTER TO PLAY")
2. Name Entry Screen (press Enter to reach this screen)
3. Main Gameplay Screen (type a name like "PLAYER" and press Enter to start)
4. Leaderboard Screen (let the game timer run out to view the high scores)
このアプローチにより、スクリーンショットを使用して、テキストのみでは説明が難しい UI の要素を修正できます。
「@」記号の後にファイル名を入力すると、ファイルを参照できます。たとえば、次の例では、タイトル画面のロゴのサイズを大きくするようにエージェントに指示しています。
この例は、モデルがサイズを 50% 補正するために画像を「見る」必要がないため、少し不自然ですが、テキスト形式で問題を説明するのが難しい UI の調整を行う場合に役立つ手法です。また、エージェントは前後のスクリーンショットを撮って自分の作業を検証することもできます。このテクニックはツールボックスに保管しておきましょう。
9. ゲームを保護するためのカスタム エージェントを作成する
「バイブス コーディング」されたアプリケーションでよく懸念されるのは、コーディングとセキュリティの両方の観点から、高品質とベスト プラクティスを維持する方法です。これらの両方の側面で厳密になるようにプロンプトを改善することもできますが、プロンプトに追加するほどエージェントの焦点が絞られなくなり、最適な結果が得られないことがよくあります。
このようなシナリオでは、サブエージェントは割り当てられたタスクに集中できるため、サブエージェントの使用が理想的です。このコードのセキュリティ監査を行い、このゲームのデプロイ中に認証情報が漏洩したり、不必要なリスクにさらされたりしないようにするカスタム エージェントを作成しましょう。
このプロンプトは、エージェントの適切なベースラインを提供します。
create a new subagent called "security_auditor" using the following instructions:
You are a ruthless Security Auditor. Your job is to analyze code for potential vulnerabilities.
Focus on:
1. SQL Injection
2. XSS (Cross-Site Scripting)
3. Hardcoded credentials
4. Unsafe file operations
When you find a vulnerability, explain it clearly and suggest a fix. Do not fix it yourself; just report it.
Antigravity は「DefineSubagent」ツールを使用して新しいエージェントを作成します。
エージェントに次のプロンプトを使用してゲームコードのセキュリティ チェックを行うよう依頼します。
Run the security auditor agent in this code
次のように表示されます。
エージェントがタスクを完了すると、次のようなレポートが表示されます。
Antigravity に修正を依頼しましょう。
Fix these findings for me please!
これで完了です。
この方法で作成されたエージェントは、会話の期間中のみ存在します。セッション間で「再利用可能」なエージェントが必要な場合は、構成ファイルを使用して作成できます。詳細については、/agents コマンドをご覧ください。
10. まとめ
おめでとうございます！Antigravity CLI を使用してアーケード ゲームをビルド、デプロイ、テスト、監査し、初期スキャフォールディングからデプロイまでの高度なエージェント ワークフローを実証しました。
クリーンアップ
Google Cloud アカウントに継続的に課金されないようにするには、この Codelab で作成したリソースを削除します。
- Cloud Run サービスを削除します。
I'm finished with this project. Delete the cloud run deployment.
- プロジェクト ディレクトリを削除します。
cd .. && rm -rf codelab-match3
この Codelab 専用に作成した場合は、Google Cloud プロジェクト全体を削除することもできます。
次のステップ
このプラットフォームの他の Codelab を試すか、Cloud Crush を独自に改善して、学習を続けることができます。ただし、リソースの使用が終わったら、必ずクリーンアップしてください。
ぜひコーディングにお役立てください。