このページでは、Google AI Studio を使用して、Nano Banana や Live API などの Gemini の最新機能を試すアプリをすばやく構築(または「バイブ コーディング」)してデプロイする方法について説明します。Google AI Studio がフルスタック ランタイムに対応しました。これにより、自然言語プロンプトを使用して、サーバーサイド ロジック、安全なシークレット管理、npm パッケージのサポートを備えた堅牢なアプリケーションを構築できます。
始める
Google AI Studio のビルドモードでバイブ コーディングを開始します。ビルドを開始するには、いくつかの方法があります。
- プロンプトから始める: ビルドモードで、入力ボックスを使用して、作成したいものの説明を入力します。[AI チップ] を選択して、画像生成や Google マップのデータなどの特定の機能をプロンプトに追加します。音声文字変換ボタンを使って、リクエストしたい内容を話すこともできます。
- [ラッキー] ボタン: クリエイティブなアイデアが必要な場合は、[ラッキー] ボタンを使用します。Gemini がプロジェクトのアイデアを含むプロンプトを生成し、作業を開始できます。
- ギャラリーからプロジェクトをリミックスする: アプリギャラリーからプロジェクトを開き、[アプリをコピー] を選択します。
プロンプトを実行すると、必要なコードとファイルが生成され、アプリのライブプレビューが右側に表示されます。
作成されるもの
プロンプトを実行すると、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 内でリアルタイムのコラボレーション エクスペリエンスを直接構築できます。サーバーサイド ランタイムは、ユーザーが相互にやり取りするために必要な状態と接続を管理します。
- Firebase の統合: Firestore データベース(永続データ ストレージ)や Firebase Authentication(ログイン フロー、特に「Google でログイン」)など、Firebase のプロビジョニングと設定を自動的に行います。エージェントは、セットアップ プロセス全体を処理し、アプリでこれらのサービスのコードも生成します。
構築を続行
Google AI Studio がアプリケーションの初期コードを生成したら、次の手順でコードを調整できます。
Google AI Studio で構築する
- Gemini を使用して反復処理を行う: ビルドモードのチャット パネルを使用して、Gemini に相談し、変更の実行、新機能の追加、スタイルの変更をリクエストします。
- コードを直接編集する: プレビュー パネルで [コード] タブを開いて、ライブ編集を行います。
外部で開発する
より高度なワークフローでは、コードをエクスポートして、お好みの環境で作業できます。
- ダウンロードしてローカルで開発する: 生成されたコードを ZIP ファイルとしてエクスポートし、コードエディタにインポートします。
- GitHub に push: コードを GitHub リポジトリに push して、既存の開発プロセスとデプロイ プロセスに統合します。
主な機能
Google AI Studio には、構築プロセスを直感的かつ視覚的に行うための機能がいくつか用意されています。
- フルスタック アプリを作成して反復処理する: プロンプトだけでフルスタック アプリを作成し、チャットまたはアノテーション モードで反復処理します。アノテーション モードでは、アプリの UI の任意の部分をハイライト表示して、希望する変更を説明できます。
- アプリを共有してデプロイする: 作成したものを他のユーザーと共有して、共同作業を行ったり、作品を公開したりできます。共有すると、API 呼び出しは使用量上限にカウントされます。有料モデルを使用する場合は、費用が発生する可能性があります。アプリの準備ができたら、Cloud Run にデプロイします。
- アプリ ギャラリー: アプリ ギャラリーには、プロジェクトのアイデアのビジュアル ライブラリが用意されています。Gemini でできることを確認したり、アプリをすぐにプレビューしたり、アプリをリミックスして独自のアプリを作成したりできます。
アプリをデプロイまたはアーカイブする
アプリケーションの準備ができたら、デプロイできます。
Cloud Run: アプリケーションをスケーラブルなサービスとしてデプロイします。使用量に応じて、Google Cloud Run の料金が適用される場合があります。デプロイの詳細については、Google AI Studio からのデプロイをご覧ください。
GitHub: プロジェクトを GitHub リポジトリにエクスポートします。
制限事項
このセクションでは、Google AI Studio のビルドモードの現在の制限事項について説明します。
API キー管理
Gemini API を使用する新しいアプリを作成すると、AI Studio は Gemini API キーをアプリのサーバーサイド環境のシークレットとして自動的に構成します。この鍵は、[シークレット] パネルで表示および管理できます。
- 自動設定:
GEMINI_API_KEYが自動的に設定されるため、ビルドを開始するために手動で構成する必要はありません。 - サーバーサイドのみ: API キーはサーバーサイドのランタイムに挿入され、クライアントサイドのコードには含まれません。
- 既存のアプリ: 2026 年 5 月 14 日より前にビルドされたアプリの場合、アプリの Gemini 機能を次回変更する際に、エージェントが Gemini API 統合を推奨されるサーバーサイド アプローチに自動的にアップグレードします。
Google AI Studio 以外でのデプロイ
- Cloud Run: AI Studio から Cloud Run にデプロイすると、API キーがサーバーサイド環境に安全に組み込まれます。デプロイされたアプリは、すべてのユーザーの Gemini API 呼び出しに API キーを使用します。
- ZIP ダウンロード: アプリを ZIP ファイルとしてダウンロードして別の場所で実行する場合は、ホスティング環境で
GEMINI_API_KEY環境変数を設定する必要があります。アプリの Gemini API 呼び出しはサーバーサイド コードから行われるため、キーがエンドユーザーに公開されることはありません。
アプリの共有時のエラー
アプリを共有したエンドユーザーが共有 URL を使用したときに 403 Access Restricted エラーが発生した場合、次のいずれかの原因が考えられます。
- ブラウザの拡張機能: Privacy Badger などのプライバシー拡張機能がアプリをブロックしている可能性があります。エラーを回避するには、拡張機能を無効にします。
- ビルドに関する問題: 現在のコードに問題がある可能性があります。エージェントに「現在のコードのビルドの問題を修正」するよう指示し、URL を再共有します。
よくある質問
AI Studio の「Build」機能とは?
AI Studio Build は、Gemini を使用して簡単なプロンプトから本番環境対応の AI 搭載アプリケーションを作成できるように設計されたプラットフォームです。プロンプトで作成したい内容を説明すると、Gemini がアプリを生成します。ギャラリーで Gemini API でできることを確認したり、アプリをリミックスして独自のアプリを作成したりすることもできます。
Build では Gemini API キーはどのように処理されますか?
Gemini API を使用するアプリを作成すると、AI Studio は Gemini API キーをサーバーサイド シークレットとして自動的に設定します。アプリの Gemini API 呼び出しは、このキーを使用してサーバーサイド コードから行われるため、ブラウザで公開されることはありません。API キーは、[設定] の [シークレット] パネルで確認できます。
アプリを共有すると API キーが公開されますか?
いいえ。API キーはサーバーサイドのシークレットとして保存され、クライアントサイドのコードには含まれません。アプリを共有すると、他のユーザーはアプリを使用できますが、API キーは表示されません。
アプリを他のユーザーと共有する場合、API 呼び出しは使用量上限の対象となります。有料モデルを使用する場合は、費用が発生する可能性があります。アプリで費用が発生する可能性がある場合は、設定時と共有前に AI Studio から通知されます。
アプリを公開するユーザー
アプリはデフォルトで非公開になっています。アプリを他のユーザーと共有して、他のユーザーがアプリを使用できるようにすることができます。アプリを共有したユーザーは、アプリのコードを表示して、自分の目的でフォークできます。編集権限を付与してアプリを共有すると、他のユーザーがアプリのコードを編集できるようになります。
AI Studio の外部でアプリを実行できますか?
はい。AI Studio から Cloud Run にアプリをデプロイできます。これにより、アプリにパブリック URL が付与され、API キーがサーバーサイド環境で安全に構成されます。アプリを ZIP ファイルとしてダウンロードして別の場所でホストすることもできます。この場合は、ホスティング環境で GEMINI_API_KEY 環境変数を設定する必要があります。Gemini API 呼び出しはサーバーサイド コードから行われるため、キーは安全に保たれます。
デプロイ オプションの詳細については、Google AI Studio からのデプロイをご覧ください。
独自のツールを使ってローカルでアプリを開発し、ここで共有することはできますか?
この機能はまだご利用いただけません。今後もアプリのユースケースを増やしていく予定です。具体的なご意見やご提案がありましたら、ぜひフィードバックをお寄せください。
アプリでデータベースやその他のストレージを使用するにはどうすればよいですか?
AI Studio アプリは、Cloud Run コンテナで実行される標準アプリです。動的 IP 範囲からのアクセスをブロックするファイアウォールがない限り、ネットワーク経由で接続できるストレージ ソリューションを使用できます。
今後、ストレージの直接サポートを追加する予定です。これにより、AI Studio 内で直接構成できるようになります。
マイク、ウェブカメラ、その他の Navigator API にアクセスするにはどうすればよいですか?
視聴者がアプリによるウェブカメラなどのデバイスの使用を認識できるように、アプリがこれらの Navigator API にアクセスする前に、追加の確認を求める必要があります。アプリ作成者は、アプリの metadata.json ファイルにこれらの権限リクエストを追加できます。次に例を示します。
{
"name": "My app",
"requestFramePermissions": [
"microphone",
"camera",
"display-capture",
"geolocation",
"bluetooth",
"clipboard-read",
"serial",
"usb"
]
}
requestFramePermissions でサポートされている値は、標準のポリシー制御機能のサブセットです。
アプリで GitHub を使用するにはどうすればよいですか?
AI Studio の GitHub 統合により、作業用のリポジトリを作成して最新の変更を commit できます。現在、リモートの変更の取得はサポートされていません。
他のユーザーにアプリの編集権限を付与できますか?
この機能はまだサポートされていませんが、近日中にサポートされる予定です。
アプリがポリシー違反として報告されたのはなぜですか?
Google には、アプリがポリシーに準拠しているかどうかを自動的に審査するシステムがあります。アプリがポリシーに違反していることが判明した場合、そのアプリは AI Studio から削除されます。ポリシー違反には、次のようなものがあります。
- マルウェア、フィッシング、なりすましを含むアプリ
- 児童への性的虐待の画像に関するポリシーに違反するコンテンツを表示または配信するアプリ
- ハラスメントに関するポリシーに違反するコンテンツを表示または配信するアプリ
- ヘイトスピーチに関するポリシーに違反するコンテンツを表示または配信するアプリ
- 人身売買に関するポリシーに違反するコンテンツを表示または配信するアプリ
- 露骨な性的描写を含むコンテンツに関するポリシーに違反するコンテンツを表示または配信するアプリ
- 暴力的または残虐なコンテンツに関するポリシーに違反するコンテンツを表示または配信するアプリ
- 有害または危険なコンテンツに関するポリシーに違反するコンテンツを表示または配信するアプリ
アプリにポリシー違反のフラグが付けられ、それが誤りであると思われる場合は、再審査請求を送信できます。ポリシーの度重なる違反があった場合、AI Studio へのアクセスが停止されることがあります。
アプリ デベロッパーの責任
アプリケーションの所有者は、アプリケーションの動作と、アプリケーションが処理するすべてのデータに対して責任を負います。これには以下が該当します。
- 法令遵守と第三者の権利: アプリが適用されるすべての法律および規制を遵守し、知的財産権やプライバシーの権利など、他者の権利を侵害しないようにします。
- コンテンツのモニタリング: アプリで使用される他のサービスには、追加利用規約の遵守が適用される場合があります。たとえば、Firestore に適用される Google Cloud 利用規約では、第三者のコンテンツをホストするお客様は、禁止されているコンテンツ(違法なコンテンツなど)を定義するポリシーを公開し、その違法なコンテンツの存在をモニタリングすることが求められています。
- 安全な実装: アプリケーションの不正使用を防ぐために必要な保護対策とモデレーション ツールを実装します。
利用規約の使用制限に注意してください。
AI Studio のアプリギャラリーのアプリにはどのような規約が適用されますか?
特に記載がない限り、AI Studio のアプリギャラリーで紹介されているアプリの使用には、Gemini API 追加利用規約が適用されます。
次のステップ
- フルスタック アプリの開発
- アプリギャラリーの例をご覧ください。