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 は、視覚的なマークとテキスト コマンドを解釈してコードを更新します。
- 確認: プレビューの更新をライブで確認します。これで、ビジュアル フィードバックがコードに反映されます。
音声入力（The Spoken Vibe）
「雰囲気」は、書くよりも口で言う方が簡単な場合があります。
- アクション: 入力バー（+ ボタンの横）にあるマイクアイコンをクリックします。
- 「ヘイ、ヘビのアニメーションが遅すぎる。スピードを上げて、尾が光る軌跡を残すようにして。」
- 送信: Gemini が音声をテキストに変換し、変更を適用します。
5. システム指示を設定して再構築する
通常のプロンプトとは異なり、システム指示はセッション全体で保持されます。コーディング標準、命名規則、変更すべきでない特定のビジュアル ペルソナを定義するのに最適な場所です。
- [Open Advanced Settings]（詳細設定を開く）: Google AI Studio インターフェース（ビルドモード）で、[System Instructions]（システム指示）ボックスを探します。表示されていない場合は、チャットパネルの上部または横にある [設定]（歯車アイコン）または [詳細設定] をクリックします。
- 「雰囲気」の指示を追加する: 次の指示をテキスト ボックスに貼り付けます。これは、ゲームの「グリッチ アート」ペルソナを定義します。
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 にこれらの新しいルールを適用するよう指示する必要があります。
- 設定パネルを閉じます。
- チャット/プロンプトの入力欄に「Rebuild the application UI to strictly follow the new System Instructions.」と入力します。
- [実行 / 送信] をクリックします。
- 更新を確認する: Gemini が変更を認識します。
6. GitHub に保存する
ファイルをダウンロードしてコマンドラインを操作する代わりに、組み込みの GitHub 統合を使用してリポジトリを瞬時にブートストラップします。
- 統合を見つける: Google AI Studio インターフェースの上部ツールバーで、[ダウンロード] アイコンと [デプロイ] アイコンの間にある GitHub アイコンを探します。
- アカウントを接続: アイコンをクリックします。初めての場合は、Google AI Studio が GitHub アカウントにアクセスすることを承認するよう求められます。
- リポジトリを作成する: [Fill out the information below to create your repo] というタイトルのダイアログ ボックスが表示されます。
- リポジトリ名: 名前を入力します（例: 「React を使用して作成された AI 生成のヘビゲーム。」
- リポジトリの説明: リポジトリの説明を入力します。
- 公開設定: [公開]（簡単に共有できるようにするため）または [非公開] を選択します。
- GitHub に push: [Git リポジトリを作成] ボタンをクリックします。
7. Cloud Run にデプロイする
アプリケーションの準備が整い、GitHub に保存されたので、Cloud Run にデプロイしましょう。
- デプロイを開始: 下のハイライト表示されたボタンをクリックします。このボタンは、AI Studio ページの右上にあります。
- プロジェクトを選択: [クラウド プロジェクトを選択] プルダウンをクリックし、プルダウンからプロジェクトを選択します。
- トラブルシューティング: プルダウンでプロジェクトが見つからない場合は、[プロジェクトをインポート] をクリックし、[プロジェクトをインポート] ペインでプロジェクトを選択します。
- 課金の確認: プロジェクトを選択すると、プロジェクトで課金が有効になっていることが確認されます。「始める前に」セクションで課金アカウントをプロジェクトに関連付けたため、この確認は自動的に完了します。
- デプロイ: [アプリをデプロイ] ボタンをクリックし、アプリケーションが 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 を利用すると、サーバーレス環境のすべてのメリットを享受でき、インフラストラクチャ管理の複雑さとオーバーヘッドを抽象化できます。