このページでは、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 は、スタック全体で複数のファイルをインテリジェントに管理し、変更が正しく伝播されるようにします。
The Antigravity Agent
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 の任意の部分をハイライト表示して、希望する変更を説明できます。
- アプリを共有してデプロイする: 作成したものを他のユーザーと共有して、共同作業を行ったり、作品を公開したりできます。アプリの準備ができたら、Cloud Run にデプロイします。
- アプリ ギャラリー: アプリ ギャラリーには、プロジェクトのアイデアのビジュアル ライブラリが用意されています。Gemini でできることを確認したり、アプリをすぐにプレビューしたり、アプリをリミックスして独自のアプリを作成したりできます。
アプリをデプロイまたはアーカイブする
アプリケーションの準備ができたら、デプロイできます。
- 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 を再共有します。
よくある質問
AI Studio の「Build」機能とは？
AI Studio Build は、Gemini を使用して簡単なプロンプトから本番環境対応の AI 搭載アプリケーションを作成できるように設計されたプラットフォームです。プロンプトで作成したい内容を説明すると、Gemini がアプリを生成します。ギャラリーで Gemini API でできることを確認したり、アプリをリミックスして独自のアプリを作成したりすることもできます。
Build がクライアントサイド コードから Gemini API を呼び出すのはなぜですか？
通常、API キーを公開しないように、サーバーサイドから Gemini API を呼び出すことをおすすめします。ただし、AI Studio にはクライアントサイド呼び出し用の Gemini API プロキシがあり、コードで API キーを公開することなく API キーを付加します。現時点では、このプロキシを利用するためにクライアントサイドで呼び出しを生成しています。これにより、コードが簡素化され、API キーを提供することなくアプリを他のユーザーと共有できます。
アプリを共有すると API キーが公開されますか？
アプリで実際の API キーを使用しないでください。代わりにプレースホルダの値を使用してください。process.env.GEMINI_API_KEY は、使用可能なプレースホルダ値に設定されます。別のユーザーがアプリを使用すると、AI Studio は Gemini API への呼び出しをプロキシし、プレースホルダ値をユーザーの（自分のものではない）API キーに置き換えます。アプリのコードは、アプリを閲覧できるユーザーに公開されるため、アプリで実際の API キーを使用しないでください。
アプリを公開するユーザー
アプリはデフォルトで非公開になっています。アプリを他のユーザーと共有して、他のユーザーがアプリを使用できるようにすることができます。アプリを共有したユーザーは、アプリのコードを表示して、自分の目的でフォークできます。編集権限を付与してアプリを共有すると、他のユーザーがアプリのコードを編集できるようになります。
AI Studio の外部でアプリを実行できますか？
AI Studio から Cloud Run にアプリをデプロイすると、アプリにパブリック URL が付与されます。API キーを非公開にするプロキシ サーバーとともにデプロイされますが、デプロイされたアプリはすべてのユーザーの Gemini API 呼び出しに API キーを使用します。アプリを zip ファイルとしてダウンロードすることもできます。プレースホルダの値を実際の API キーに置き換えても、引き続き動作します。ただし、この方法でアプリをデプロイすると、すべてのユーザーが API キーを確認できるようになるため、避けるべきです。AI Studio の外部でアプリを安全に実行するには、一部のロジックをサーバーサイドに移動して、API キーが公開されないようにする必要があります。
独自のツールを使ってローカルでアプリを開発し、ここで共有することはできますか？
この機能はまだご利用いただけません。今後もアプリのユースケースを増やしていく予定です。具体的なご意見やご提案がありましたら、ぜひフィードバックをお寄せください。
アプリでデータベースやその他のストレージを使用するにはどうすればよいですか？
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 追加利用規約が適用されます。
次のステップ
- フルスタック アプリの開発
- アプリギャラリーの例をご覧ください。