1. はじめに
この Codelab では、コマンドライン コーディング エージェントである Gemini 3 と Gemini CLI を使用して、マッチ 3 アーケード ゲームの CloudCrush を作成します。ゲームは Go で記述され、Cloud Run を使用して Google Cloud にデプロイされます。
この Codelab の主な目標は、コードを手動で記述するのではなく、エージェントをオーケストレートしてアプリケーションを構築するスキルを習得することです。これらのテクノロジーを以前に使用したことがない場合でも、すべての開発タスクを Gemini CLI に委任します。
この Codelab は、エージェント コーディング ワークフローを学習したい中級レベルのデベロッパーを対象としています。このラボの推定所要時間は 60 分です。この Codelab で作成されるリソースは、従量制料金を使用します。
演習内容
- Go と Ebitengine フレームワークを使用して、マッチ 3 ゲームのコアロジックを構築します。
- WebAssembly（WASM）を使用してウェブブラウザで実行できるようにゲームを適応させる
- ゲームとそのハイスコア API を Cloud Run にデプロイします。
- テストとコードレビュー用の特別なサブエージェントと拡張機能をオーケストレートする
前提条件
- プログラミング言語に関する基本的な知識
- クラウド インフラストラクチャの基礎知識
- Google Cloud コンソールの基本知識
学習内容
- コーディング エージェントを使用して複雑なアプリケーションを構築する方法
- マルチモーダル コンテキストで Gemini を操作する方法
- Cloud Run を使用してアプリケーションをクラウドにデプロイする方法
必要なもの
このワークショップは Cloud Shell を使用してクラウド上で完全に実施できますが、ローカルマシンを使用する場合は次のものが必要です。
- Gemini CLI。geminicli.com の手順に沿ってダウンロードしてインストールします。
- Go ツールチェーン（バージョン 1.26 以降）。go.dev の手順に沿ってダウンロードしてインストールします。
- Google Cloud を操作するための gcloud CLI。Google Cloud ドキュメントの手順に沿ってダウンロードしてインストールします。
- Google Cloud 請求先アカウント（ゲームをクラウドにデプロイするため）
主なテクノロジー
使用するテクノロジーについて詳しくは、以下をご覧ください。
- Gemini CLI: 開発エージェント
- Gemini 3: 最先端の大規模言語モデルの最新バージョン
2. 環境設定
プロジェクトの設定
Google Cloud プロジェクトの作成
- Google Cloud コンソールのプロジェクト セレクタ ページで、Google Cloud プロジェクトを選択または作成します。
- Cloud プロジェクトに対して課金が有効になっていることを確認します。プロジェクトで課金が有効になっているかどうかを確認する方法をご覧ください。
Cloud Shell の起動
Cloud Shell は、必要なツールがプリロードされた Google Cloud で動作するコマンドライン環境です。
- Google Cloud コンソールの上部にある [Cloud Shell をアクティブにする] をクリックします。
- Cloud Shell に接続したら、認証を確認します。
gcloud auth list - プロジェクトが構成されていることを確認します。
gcloud config get project - プロジェクトが想定どおりに設定されていない場合は、設定します。
export PROJECT_ID=<YOUR_PROJECT_ID> gcloud config set project $PROJECT_ID
3. プロジェクトのセットアップ
プロジェクト ディレクトリを作成する
まず、プロジェクト用の新しいディレクトリを作成する必要があります。ターミナルで、次のコマンドを実行します。
mkdir -p codelab-match3 && cd codelab-match3
Gemini CLI を起動
まず、Gemini CLI が正しくインストールされていることを確認します。ターミナルで次のコマンドを実行します。
gemini --version
次のように表示されます。
$ gemini --version 0.37.1
次に、コマンド gemini を使用して Gemini CLI を起動します。
gemini
Gemini CLI のプロンプトが表示されます。
Gemini CLI のプロンプトが表示されたら、準備完了です。表示されない場合は、前の設定手順を見落としていないか確認してください。
モデル ステアリングを有効にする
モデル ステアリングは、エージェントが特定のタスクを処理している間に、エージェントにコンテキストを追加できる機能です。これを使用して、エージェントが間違った方向に進んでいる場合にエージェントを修正したり、エージェントの回答を改善するための説明情報を追加したり、元のプロンプトで指定し忘れた小さな機能を追加したりできます。
モデル ステアリングを有効にするには、/settings コマンドを使用して設定メニューを開き、検索ボックスに「steering」と入力します。次に、[モデル ステアリングを有効にする] オプションを true に設定します。
変更を有効にするには、CLI の再起動が必要になることがあります（「r」キーを押します）。
アセットをダウンロードする
ゲームで使用する画像をダウンロードする必要があります。ファイルは GitHub のリポジトリ（こちら）に保存されています。手動でダウンロードすることも、次のプロンプトを使用して Gemini に依頼することもできます。
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
4. プランモードとモデルの調整を使用してゲームを作成する
まず、マッチ 3 ゲームのコアロジックを構築します。これは複雑なタスクであるため、プランモードで Gemini CLI を使用して開発をオーケストレートすることをおすすめします。
Gemini CLI プロンプトでスラッシュ コマンド /plan を使用して、プランモードを切り替えます。
/plan
プランモードが有効になっている状態で、次のプロンプトをコピーして Gemini 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.
Gemini CLI は、プランを生成する前に、いくつかの質問をして確認することがあります。
たとえば、単一ファイル アプリケーションと複数ファイル アプリケーションのどちらを希望するかを尋ねています。
アニメーションの好みを尋ねています。
最後の質問は、go:embed を使用してアセットをバイナリ自体に埋め込むことについてです。
すべての質問に回答すると、送信する前に最終確認を行うオプションが表示されます。
プランが完了すると、確認を求めるメッセージが表示されます。
レビュー ボックスの下部には、プランをそのまま承認するか、フィードバックを追加するかのオプションがあります。
この機会に、元のプロンプトで漏れていた新しい要件を追加します。
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.
実装計画の確認を求めるメッセージが最後に表示されます。
Enter キーを押すと、エージェントが作業を開始します。エージェントはプランモードを終了し、コードの作成を開始します。
通常、この時点で完了を待つか、実装を変更する場合は Esc キーで中断する必要がありますが、モデルの調整が有効になっているため、モデルを修正する手順をキューに登録できます。
エージェントが動作している間に、エージェントのチャット ウィンドウに次の内容を貼り付けます。これは、実装をピボットするためのコマンドをキューに登録する方法を示す「モデルの調整」機能のデモです。
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.
このプロンプトが「ステアリング ヒント」としてキューに登録されていることがわかります。
プランに同意すると、エージェントがすべての要件を実装します。
エージェントが実装を完了したら、プロジェクト フォルダで go run main.go を実行して、PC 版をデモします。このコマンドを実行するために Gemini CLI を終了する必要はありません。「!」と入力します。（感嘆符）を入力してシェルモードに入り、そこからコマンドを実行します。
シェルモードで実行するメリットは、発生する可能性のある問題がエージェント コンテキストにすぐにキャプチャされることです。たとえば、このケースでは、エージェントが一部の依存関係のダウンロードを忘れています。
エスケープ キーを押してシェルモードを終了し、エージェントにエラーの検査と修正を依頼します。
成功した場合の出力は次のようになります。
ゲームをプレイして、ゲーム パラメータを微調整し、満足のいくエクスペリエンスになるまで調整します（アニメーションの速度を上げたり下げたり、コマンドへの応答方法を調整するなど）。
5. ウェブブラウザで実行できるようにゲームを適応させる
作成した Ebitengine ゲームは、デスクトップ アプリケーションです。ウェブで実行できるようにするには、WebAssembly に変換します。
エージェントをガイドするには、次のプロンプトを使用します。
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.
エージェントがタスクを完了したら、エージェントにバックグラウンドでゲームサーバーを実行するよう指示できます。
バックグラウンド プロセスは、Ctrl+B のキーの組み合わせで管理できます。
このウィンドウを閉じるには、Ctrl+B キーをもう一度押します。
ブラウザで 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).
以下にタイトル画面の例を示します。
少しプロフェッショナルに見えてきました。🙂
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 button to generate a random name and
a confirmation button to the name entry.
Also 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.
ブラウザでゲームを再度実行します。QR コードを使用してモバイル デバイスからゲームにアクセスすることも試してください。
8. ブラウザ エージェントを使用してゲームをテストする
Gemini CLI では、サブエージェントは新しいコンテキストを持つ分離されたペルソナです。現在のコンテキストが結果に影響を与えないようにする必要がある、長時間実行されるタスクや高精度のタスクに最適です。
ゲームは、従来のテストツール（単体テストや統合テストなど）でテストするのが難しいものですが、ブラウザ エージェントを使用してテストを行うことができます。ブラウザ エージェントは、独自の Chrome ブラウザを起動し、DOM コマンドを発行してゲーム画面を操作できます。また、スクリーンショットを撮る機能も備わっています。この機能を使用してテストを記録し、後でエージェントに渡して UI の微調整を行うこともできます。
ブラウザ エージェントは現在試験運用中であるため、まず有効にする必要があります。このプロンプトを Gemini CLI に入力して、プロジェクト レベルでエージェントを有効にします。
Create a .gemini/settings.json file with the following content to
configure the browser sub agent:
{
"agents": {
"overrides": {
"browser_agent": {
"enabled": true
}
}
}
}
この変更を有効にするには、エージェントを再起動する必要があります。/chat save コマンドを使用して、現在の会話を保存します。
Ctrl+D キーを 2 回押して Gemini CLI を終了し、もう一度起動します。/chat resume cloud-crush との会話を復元します。
これでブラウザ エージェントにアクセスできるようになりました。タスクをブラウザ エージェントに委任する場合は、@browser_agent を使用して言及できます。
次に、ブラウザ エージェントを使用して、デプロイしたゲームの評価を行います。
@browser_agent perform an end-to-end test of the Cloud Run deployment URL.
Navigate the homepage, start a game, submit a score, and verify the new score
appears correctly on the leaderboard. Take screenshots to show each step of the
investigation and save to ./screenshots.
確認画面が表示されます。
エージェントと必要なツールへの同意が完了すると、新しい Chrome ブラウザ ウィンドウが開きます。これは、エージェントによって制御されるブラウザです。画面の青い枠線と、下部に表示される「Gemini CLI がこのブラウザを制御しています」というメッセージが、視覚的なヒントになります。
完了すると、次のようなメッセージが表示されます。
ブラウザ エージェントが取得したスクリーンショットの例を次に示します。
title_screen.png:
game_board.png:
エージェントが取得した画像のいずれかを使用して、ゲーム UI を最適化するのに最適なタイミングです。たとえば、次のように話しかけます。
Analyse the screenshot @screenshots/game_board.png and adjust the side panel to
have better contrast and be more harmonic with the rest of UI elements. Focus
on readability and color theory to achieve the best possible visuals.
9. ゲームを保護するためのカスタム エージェントを作成する
「バイブス コーディング」されたアプリケーションでよくある懸念事項は、コーディングとセキュリティの両方の観点から、高品質とベスト プラクティスを維持する方法です。プロンプトを改善して、これらの両方の側面で厳密にしようとすることはできますが、プロンプトに追加するほどエージェントの焦点が絞られなくなり、最適な結果が得られないことがよくあります。このようなシナリオでは、サブエージェントを使用するのが理想的です。サブエージェントはメインエージェントとは別のコンテキストで動作し、割り当てられたタスクに集中できるためです。このコードのセキュリティ監査を行い、このゲームを Cloud Run にデプロイする際に認証情報が漏洩したり、不要なリスクにさらされたりしないように、カスタム エージェントを作成しましょう。
Create a new custom agent in .gemini/agents/security_auditor.md using the following content:
---
name: security_auditor
description: Specialized in finding security vulnerabilities in code.
kind: local
tools:
- read_file
- grep_search
model: gemini-3-flash-preview
temperature: 0.2
max_turns: 10
---
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.
変更を有効にするには、CLI を再起動する必要があります。以前と同様に、/chat save でチャット セッションを保存し、/chat resume で再開します。
CLI が再開すると、起動時に新しいエージェントが自動的に検出されます。
Acknowledge and Enable をクリックし、次のプロンプトを使用してゲームコードのセキュリティ チェックを実行するようエージェントに依頼します。
@security-auditor please run a security audit on this code and cloud run
deployment to make sure it is safe against common attack patterns and that it is
not leaking any credentials
次のように表示されます。
監査が完了すると、推奨事項が提示されます。この例では、実際に修正すべき重要な点がいくつか見つかりました。
検出された問題がある場合は、Gemini CLI に修正を依頼してください。🙂
10. まとめ
おめでとうございます！Gemini CLI を使用してアーケード ゲームをビルド、デプロイ、テスト、監査し、初期スキャフォールディングからデプロイまでの高度なエージェント ワークフローを実証しました。
クリーンアップ
この Codelab に後で戻る予定がない場合は、この Codelab で作成したリソースを削除することをおすすめします。
- Cloud Run サービスを削除します。
Gemini CLI に削除を依頼します。
I'm finished with this project. Delete the cloud run deployment.
- プロジェクト ディレクトリを削除します。
cd .. && rm -rf codelab-match3
この Codelab 専用に作成した場合は、Google Cloud プロジェクト全体を削除することもできます。
次のステップ
このプラットフォームの他の Codelab を試すか、Cloud Crush を自分で改善することで、学習を続けることができます。
ゲームを改善するための提案をいくつかご紹介します。
- 4 個以上の宝石をマッチングさせたときに表示される特別な「Gemini」宝石（gemini.png を使用）を追加します。Gemini の宝石を 3 つ以上マッチさせると、ボーナスタイムを獲得できます。
- 音楽を追加します。Gemini のホームページで Lyria 3 を使用して音楽を生成できます。
- 効果音を追加する
- 他のゲームプレイ モードを追加する
ぜひコーディングにお役立てください。