このページでは、Google AI Studio のビルドモードを使用して、nano banana や Live API などの Gemini の最新機能をテストするアプリをすばやくビルド（またはバイブ コーディング）してデプロイする方法について説明します。
始める
Google AI Studio のビルドモードでバイブ コーディングを開始します。ビルドを開始するには、いくつかの方法があります。
- プロンプトから始める: ビルドモードで、入力ボックスを使用して、作成する内容の説明を入力します。[AI チップ] を選択して、画像生成や Google マップのデータなどの特定の機能をプロンプトに追加します。音声文字変換ボタンを使用して、リクエストする内容を話すこともできます。
- [ラッキー アイデア] ボタン: クリエイティブなアイデアが必要な場合は、[ラッキー アイデア] ボタンを使用します。Gemini がプロジェクトのアイデアを含むプロンプトを生成し、作業を開始できます。
- ギャラリーからプロジェクトをリミックスする: App Gallery からプロジェクトを開き、[アプリをコピー] を選択します。
プロンプトを実行すると、必要なコードとファイルが生成され、アプリのライブプレビューが右側に表示されます。
作成されるもの
プロンプトを実行すると、AI Studio によってウェブアプリが作成されます。デフォルトでは React ウェブアプリが作成されますが、設定メニューで Angular アプリを作成することもできます。生成されたコードを表示するには、右側のプレビュー ペインで [コード] タブを選択します。
注意すべきファイルは次のとおりです。
- geminiService.ts: このファイルには、プロンプトの作成から Gemini API の呼び出し、レスポンスの解析まで、アプリのメインロジックが含まれています。このファイルでベース プロンプトを編集したり、コンポーネントの機能を直接変更したり、ビルドモードで Gemini とインタラクティブにチャットして変更したりできます。このファイルのコードは、GenAI TS SDK を使用して Gemini API とやり取りします。
構築を続行
Google AI Studio でウェブ アプリケーションの初期コードが生成されたら、プロジェクトを続行するための主なオプションとして、AI Studio でビルドするか、外部で開発するかの 2 つがあります。
Google AI Studio で構築する
Google AI Studio 環境内で、アプリケーションの改良と拡張を続けることができます。
- Gemini を使用して反復処理を行う: ビルドモードのチャットパネルを使用して、Gemini に変更の実施、新機能の追加、スタイルの変更をリクエストします。たとえば、「ユーザーにアラートを出すボタンを追加して」や「配色を青と白に変更して」などと指示できます。
- コードを直接編集する: プレビュー パネルで [コード] タブを開き、ライブ編集を行います。プロジェクトを GitHub に保存して、開発中にバージョン管理を利用できます。
外部で開発する
より高度なワークフローでは、コードをエクスポートして、任意の環境で作業できます。
- Download and Develop Locally: 生成されたコードを ZIP ファイルとしてエクスポートし、コードエディタにインポートします。これにより、使い慣れたツール、ビルドシステム、ローカル バージョン管理プラクティスを使用して、最初のプロトタイプを超えて構築を続けることができます。
- GitHub に push: コードを GitHub リポジトリに push して、既存の開発プロセスとデプロイ プロセスに統合します。
主な機能
Google AI Studio には、直感的で視覚的な構築プロセスを実現するための機能がいくつか用意されています。
- アノテーション モード: アプリの外観を変更するコードを記述する代わりに、アノテーション モードでは、アプリの UI の任意の部分をハイライト表示して、必要な変更を説明できます。たとえば、コンポーネントを選択して「このボタンを青色にして」や「この画像を左からスライドインするようにアニメーション化して」と入力します。[チャットに追加] を選択すると、注釈付きアプリのスクリーンショットを含むプロンプトが生成されます。
- アプリを共有する: 作成したアプリを他のユーザーと共有して、共同作業を行ったり、作品を公開したりできます。
- App Gallery: App Gallery には、プロジェクトのアイデアのビジュアル ライブラリが用意されています。Gemini でできることを確認したり、アプリをすぐにプレビューしたり、リミックスして自分だけのアプリを作成したりできます。
アプリをデプロイまたはアーカイブする
アプリケーションの準備ができたら、AI Studio から直接デプロイできます。デプロイのオプションは次のとおりです。
- Google Cloud Run: アプリケーションをスケーラブルなサービスとしてデプロイします。使用状況に応じて Google Cloud Run の料金が適用される場合があります。
- GitHub: プロジェクトを GitHub リポジトリにエクスポートして、既存の開発およびデプロイ ワークフローに統合します。
制限事項
このセクションでは、Google AI Studio でビルドモードを使用する際の重要な制限事項について説明します。
API キーのセキュリティと公開
- 共有アプリのコードは、閲覧するユーザーに表示されます。アプリのコードで実際の API キーを直接使用しないでください。
- デフォルトでは、アプリは API キーのプレースホルダ（process.env.GEMINI_API_KEY など）を使用します。ユーザーが AI Studio 内で共有アプリを実行すると、AI Studio がプロキシとして機能し、プレースホルダをエンドユーザーの API キーに置き換えて、キーのプライバシーを確保します。
アプリの公開設定と共有
- アプリは Google ドライブに保存され、その権限モデルを継承します。つまり、デフォルトでは非公開になります。
- 共有権限: アプリを他のユーザーと共有する場合:
- 共有ユーザーはコードを表示し、アプリをフォークして独自に使用できます。
- 編集権限が付与されている場合、共有ユーザーはアプリのコードを変更できます。
AI Studio 以外でのデプロイ
- アプリを Cloud Run にデプロイして公開 URL を取得できますが、この設定では、すべてのユーザーの Gemini API 呼び出しに API キーが使用されます。
- JavaScript アプリはクライアント サイドで実行されるため、データ漏洩や不正使用を防ぐために、API キーのアクセス権を最小限に抑えてください。たとえば、同じプロジェクトの他のファイル検索ストアに、このメカニズムを介してユーザーがアクセスできる場合があります。
- 外部デプロイの保護: AI Studio の外部でアプリを安全に実行するには（zip ファイルのダウンロード後など）、API キーを使用するロジックをサーバーサイド コンポーネントに移動して、エンドユーザーにキーが公開されないようにする必要があります。Cloud Run を使用してデプロイする場合は、この操作は必要ありません。
- キーの漏洩に関する警告: クライアントサイド環境でプレースホルダを実際の API キーに置き換えることは、キーがすべてのユーザーに表示されるため、強く推奨されません。
ツールと機能のサポート
- ローカル開発のインポート: 現在、外部ツールを使用してローカルでアプリを開発し、AI Studio にインポートすることはできません。
次のステップ
- 他のユーザーが作成したものを確認し、アプリ ギャラリーで既存のプロジェクトをリミックスしてアイデアを得ましょう。
- AI Studio のバイブレーション コーディング チュートリアルを集めた YouTube プレイリストをご覧ください。