1. 概要
この Codelab では、音楽プレーヤーが統合されたレトロなスネークゲームであるウェブ アプリケーション「Snake & Beats」を作成します。Gemini を使用して、ネオン調の単一ファイル React アプリケーションを生成し、バージョン管理して Cloud Run にデプロイします。
演習内容
- ビルドとプロンプト: Google AI Studio の [ビルド] モードを使用して、単一のプロンプトから動作するゲームを生成します。
- システム指示で改良: 今後の編集のために永続的なペルソナを設定して、AI の「雰囲気」を確認します。
- GitHub に保存: AI Studio から直接新しいリポジトリをブートストラップします。
- Cloud Run にデプロイ: ワンクリックでゲームを Google Cloud Run にリリースします。
学習内容
- Google AI Studio でビルドモードを使用してアプリのプロトタイプを迅速に作成する方法。
- システム指示を使用して、反復処理中に一貫した「コーディングの雰囲気」を維持する方法。
- Google AI Studio を GitHub と Cloud Run に接続する方法。
必要なもの
- Chrome ウェブブラウザ
- Gmail アカウント
- 課金が有効になっている Cloud プロジェクト
- Gemini API キー
- GitHub アカウント
2. 始める前に
- Google Cloud コンソールのプロジェクト選択ページで、Google Cloud プロジェクトを選択または作成します。
- Cloud プロジェクトに対して課金が有効になっていることを確認します。詳しくは、プロジェクトで課金が有効になっているかどうかを確認する方法をご覧ください。
3. ビルドとプロンプト（コア）
まず、アプリケーション全体を一度にビルドします。 Google AI Studio にログインし、 ビルド インターフェースに移動します。
- ビルド プロンプトを入力: 次の詳細なプロンプトをチャット ボックスに貼り付けます。
Build a React web app that is a Music Player and a Snake Game combined. Use Tailwind CSS with a dark neon aesthetic. I want to be able to play Snake in the center window while the demo music plays in the background. Add 3 dummy ai generated music. Include controls for the music (play/pause/skip) and a score counter for the game.
- モデルを選択: 右側の設定パネルで、コードを最速で生成するために Gemini 3.0 Pro（または最新のプレビュー モデル）が選択されていることを確認します。
- [実行]: [ビルド] をクリックします（または Cmd+Enter キーを押します）。
- プレビュー: Gemini がコードを生成し、通常は右側にライブプレビューを表示します（以下を参照）。
4. アノテーション、画像、音声で改良する
視覚的な変更を言葉で説明するのは難しい場合があります。アノテーション モードでは、アプリのプレビューに描画して、ビジョンを即座に伝えることができます。
アノテーション モードを使用する
- アノテーション モードを有効にする: AI Studio インターフェースで（左側のサイドパネルまたはプレビュー ウィンドウの下部ツールバーを確認）、アノテーション ツールまたは改良ツールを選択します。
- アプリをマークアップする:
- 描画: ボックスツールを使用して、スコア カウンタの周りに長方形を描画します。
- コメント: そのボックスに添付するプロンプトを入力します。「このフォントを大きくして、デジタルでグリッチ風にしてください。」
- スケッチ: 矢印ツールを使用して、再生/一時停止ボタンを指します。
- コメント : 「これらを光るネオンアイコンに変更してください。」と入力します。
- 反復: [チャットに追加] をクリックし、[プロンプトを送信] をクリックします。Gemini は、視覚的なマークとテキスト コマンドを解釈してコードを更新します。
- 確認: プレビュー アップデートがライブで更新されるのを確認します。視覚的なフィードバックがコードに反映されました。
音声入力（音声による雰囲気）
「雰囲気」は、書くよりも話す方が簡単な場合があります。
- アクション: 入力バーの [＋] ボタンの横にあるマイクアイコンをクリックします。
- 話す: 「ヘイ、スネークのアニメーションが遅すぎます。スピードアップして、尻尾に光る軌跡を残してください。」
- 送信: Gemini が音声をテキストに変換し、変更を適用します。
5. システム指示を設定して再ビルドする
通常のプロンプトとは異なり、システム指示はセッション全体で保持されます。コーディング標準、命名規則、変更しない特定の視覚的なペルソナを定義するのに最適です。
- [詳細設定を開く]: Google AI Studio インターフェース（ビルドモード）で、[システム指示] ボックスを探します。表示されていない場合は、チャットパネルの上部または横にある設定（歯車アイコン）または [詳細設定] をクリックします。
- 「雰囲気」の指示を追加: 次の指示をテキスト ボックスに貼り付けます。これにより、ゲームの「グリッチ アート」ペルソナが定義されます。
You are a Retro-Futurist UI Designer and Senior React Engineer. Visual Style: 'Glitch Art'. Use raw, pixelated fonts, jarring color contrasts (Cyan vs. Magenta), and CSS animations that simulate screen tearing or static noise. Tone: Cryptic and machine-like.
- 変更をトリガーする: システム指示を変更しても、コードは自動的に書き換えられません。Gemini にこれらの新しいルールを適用するように指示する必要があります。
- 設定パネルを閉じます。
- チャット/プロンプト入力に「新しいシステム指示に厳密に従ってアプリケーション UI を再ビルドしてください」と入力します。
- [実行 / 送信] をクリックします。
- 更新を確認: Gemini が変更を認識します。
6. GitHub に保存
ファイルをダウンロードしてコマンドラインで操作する代わりに、組み込みの GitHub インテグレーションを使用してリポジトリを即座にブートストラップします。
- インテグレーションを見つける: Google AI Studio インターフェースの上部ツールバーで、[ダウンロード] アイコンと [デプロイ] アイコンの間にある GitHub アイコンを探します。
- アカウントを接続: アイコンをクリックします。初めての場合は、Google AI Studio に GitHub アカウントへのアクセスを許可するように求められます。
- リポジトリを作成: [リポジトリを作成するには、以下の情報を入力してください] というタイトルのダイアログ ボックスが表示されます。
- リポジトリ名: 名前を入力します（例: 「React を使用した AI 生成のスネークゲーム」）。
- リポジトリの説明: リポジトリの説明を入力します。
- 公開設定: [公開]（簡単に共有できるように）または [非公開] を選択します。
- **GitHub に push**: [Git リポジトリを作成] ボタンをクリックします。
7. Cloud Run にデプロイする
アプリケーションの準備が整い、GitHub に保存されたので、Cloud Run にデプロイしましょう。
- デプロイを開始: 次のハイライト表示されたボタンをクリックします。AI Studio ページの右上にあります。
- プロジェクトを選択: [Cloud プロジェクトを選択] プルダウンをクリックし、プルダウンからプロジェクトを選択します。
- トラブルシューティング: プルダウンにプロジェクトが表示されない場合は、[プロジェクトをインポート] をクリックし、[プロジェクトをインポート] パネルでプロジェクトを選択します。
- 課金の確認: プロジェクトを選択すると、プロジェクトで課金が有効になっていることが確認されます。「始める前に」セクションでプロジェクトに請求先アカウントを接続したため、この確認は自動的に完了します。
- [デプロイ]: [アプリをデプロイ] ボタンをクリックし、アプリケーションが Cloud Run にデプロイされるまで待ちます。注: Cloud Run サービス名は自動的に生成されます。
- デプロイは数分で完了し、アプリの URL が表示されます。URL をクリックすると、デプロイされたウェブ アプリケーションがインターネット上でライブで表示されます。
8. クリーンアップ
この投稿で使用したリソースについて、Google Cloud アカウントに課金されないようにするには、次の手順を行います。
- Google Cloud コンソールで、[リソースの管理] ページに移動します。
- プロジェクト リストで、削除するプロジェクトを選択し、[削除] をクリックします。
- ダイアログでプロジェクト ID を入力し、[シャットダウン] をクリックしてプロジェクトを削除します。
9. 完了
完了AI Studio でアプリケーションの雰囲気コーディングが完了し、Cloud Run にデプロイされました。
AI Studio は、アプリケーションの開発とテストに最適なプラットフォームであり、ユーザーはデザインをすぐに視覚化できます。
AI Studio と Cloud Run のシームレスな統合により、ユーザーはアプリケーションを Google Cloud に簡単にデプロイできます。Cloud Run を使用すると、サーバーレス環境のすべてのメリットを活用でき、インフラストラクチャ管理の複雑さとオーバーヘッドを抽象化できます。