このページでは、Google AI Studio を使用して、Nano Banana や Live API などの Gemini の最新機能を試すアプリをすばやく構築（または「バイブ コーディング」）してデプロイする方法について説明します。Google AI Studio でフルスタック ランタイムがサポートされるようになりました。これにより、自然言語プロンプトを使用して、サーバーサイド ロジック、安全なシークレット管理、npm パッケージのサポートを備えた堅牢なアプリケーションを構築できます。
始める
Google AI Studio のビルドモードでバイブ コーディングを開始します。ビルドを開始するには、いくつかの方法があります。
- プロンプトから始める: ビルドモードで、入力ボックスを使用して、作成したいものの説明を入力します。[AI チップ] を選択して、画像生成や Google マップ データなどの特定の機能をプロンプトに追加します。音声文字変換ボタンを使って、リクエストしたい内容を話すこともできます。
- [ラッキー] ボタン: クリエイティブなアイデアが必要な場合は、[ラッキー] ボタンを使用します。Gemini がプロジェクトのアイデアを含むプロンプトを生成し、作業を開始できます。
- ギャラリーからプロジェクトをリミックスする: App Gallery からプロジェクトを開き、[アプリをコピー] を選択します。
プロンプトを実行すると、必要なコードとファイルが生成され、アプリのライブプレビューが右側に表示されます。
作成されるもの
プロンプトを実行すると、AI Studio によって完全なアプリケーションが作成されます。デフォルトでは、次のものを含むフルスタック環境が作成されます。
- クライアントサイド: ウェブ フロントエンド（デフォルトは React）。
- サーバーサイド: 安全な API 呼び出し、データベース接続、npm パッケージの使用を可能にする Node.js ランタイム。
生成されたコードを表示するには、右側のプレビュー ペインで [コード] タブを選択します。Antigravity Agent は、スタック内の複数のファイルをインテリジェントに管理し、変更が正しく伝播されるようにします。
Antigravity エージェント
Antigravity エージェントは Google Antigravity の主な AI 機能であり、エージェント ハーネスのコア コンポーネントが Google AI Studio のビルドモード エクスペリエンスを強化しています。プロジェクト全体のコンテキストを維持し、複数のファイルを管理し、複雑な指示を理解して堅牢なフルスタック アプリケーションを構築することで、単純なコード生成を超えた機能を実現します。
主な機能は次のとおりです。
- コンテキスト認識: 以前のプロンプトとファイルの状態のコンテキストを維持します。
- 複数ファイル管理: 複数のファイル間の依存関係を処理します。
- 検証済みの実行: コードの更新を検証して、ハルシネーションを減らします。
フルスタックの機能
Google AI Studio は、最新のウェブ エコシステムの力を引き出し、クライアントサイドのプロトタイプだけでなく、さまざまなものを構築できます。
- サーバーサイド ランタイムと npm: npm パッケージの膨大なライブラリを使用します。エージェントは、アプリに必要なパッケージ（データ可視化や API クライアント用の特定のライブラリなど）を自動的に特定してインストールします。必要に応じて、特定のパッケージをリクエストすることもできます。
- シークレット管理: API キーとシークレットを [設定] メニューに安全に保存します。これらはサーバーサイド コードでアクセスできるため、クライアントサイドで公開されることはありません。
- マルチプレーヤー: AI Studio 内でリアルタイムのコラボレーション エクスペリエンスを直接構築できます。サーバーサイド ランタイムは、ユーザーが相互にやり取りするために必要な状態と接続を管理します。
構築を続行
Google AI Studio でアプリケーションの初期コードが生成されたら、引き続きコードを改良できます。
Google AI Studio で構築する
- Gemini を使用して反復処理を行う: ビルドモードのチャットパネルを使用して、Gemini に変更の実施、新機能の追加、スタイルの変更をリクエストします。
- コードを直接編集する: プレビュー パネルで [コード] タブを開き、ライブ編集を行います。
外部で開発する
より高度なワークフローでは、コードをエクスポートして、任意の環境で作業できます。
- ダウンロードしてローカルで開発する: 生成されたコードを ZIP ファイルとしてエクスポートし、コードエディタにインポートします。
- GitHub に push: コードを GitHub リポジトリに push して、既存の開発プロセスとデプロイ プロセスに統合します。
主な機能
Google AI Studio には、構築プロセスを直感的かつ視覚的に行うための機能がいくつか用意されています。
- フルスタック アプリを作成して反復処理する: プロンプトだけでフルスタック アプリを作成し、チャットまたはアノテーション モードで反復処理します。アノテーション モードでは、アプリの UI の任意の部分をハイライト表示して、希望する変更を説明できます。
- アプリを共有してデプロイする: 作成したものを他のユーザーと共有して、共同作業を行ったり、作品を公開したりできます。アプリの準備ができたら、Cloud Run にデプロイします。
- アプリ ギャラリー: アプリ ギャラリーには、プロジェクトのアイデアのビジュアル ライブラリが用意されています。Gemini でできることを確認したり、アプリをすぐにプレビューしたり、リミックスして自分だけのアプリを作成したりできます。
フルスタック アプリの作成と反復処理: ランタイム サポートに関する簡単な説明、アノテーション モードでの反復処理 共有とデプロイ - AI Studio 内でアプリを共有するか、Cloud Run にデプロイする アプリ ギャラリーを探索する
アプリをデプロイまたはアーカイブする
アプリケーションの準備ができたら、デプロイできます。
- Google Cloud Run: アプリケーションをスケーラブルなサービスとしてデプロイします。使用量に応じて、Google Cloud Run の料金が適用される場合があります。
- GitHub: プロジェクトを GitHub リポジトリにエクスポートします。
制限事項
このセクションでは、Google AI Studio のビルドモードの現在の制限事項について説明します。
API キーのセキュリティ
- クライアントサイド: クライアントサイド コードで実際の API キーを直接使用しないでください。
- サーバーサイド: シークレット管理機能を使用して、サーバーサイド ランタイムで機密性の高い鍵を安全に処理します。
Google AI Studio 以外のデプロイ
- アプリを Cloud Run にデプロイして公開 URL を取得できますが、この設定では、すべてのユーザーの Gemini API 呼び出しに API キーが使用されます。
- JavaScript アプリはクライアントサイドで実行されるため、データ漏洩や不正使用を防ぐために、API キーのアクセス権を最小限に抑えてください。たとえば、同じプロジェクトの他のファイル検索ストアに、このメカニズムを介してユーザーがアクセスできる場合があります。
- 外部の安全なデプロイ: AI Studio の外部でアプリを安全に実行するには（zip ファイルのダウンロード後など）、API キーを使用するロジックをサーバーサイド コンポーネントに移動して、エンドユーザーにキーが公開されないようにする必要があります。Cloud Run を使用してデプロイする場合は、この操作は必要ありません。
- キーの漏洩に関する警告: クライアントサイド環境でプレースホルダを実際の API キーに置き換えることは、キーがすべてのユーザーに表示されるため、強く推奨されません。
アプリの共有時のエラー
アプリを共有したエンドユーザーが共有 URL を使用したときに 403 Access Restricted エラーが発生した場合、次のいずれかの原因が考えられます。
- ブラウザ拡張機能: Privacy Badger などのプライバシー保護の拡張機能がアプリをブロックしている可能性があります。エラーを回避するには、拡張機能を無効にします。
- ビルドに関する問題: 現在のコードに問題がある可能性があります。エージェントに「現在のコードのビルドの問題を修正」するよう指示し、URL を再共有します。
次のステップ
- フルスタック アプリの開発
- アプリギャラリーの例をご覧ください。