Google AI Studio がフルスタック開発に対応し、クライアントサイドのプロトタイプにとどまらないアプリケーションを構築できるようになりました。サーバーサイドのランタイムを使用すると、シークレットの管理、外部 API への接続、リアルタイムのマルチプレーヤー エクスペリエンスの構築が可能になります。
サーバーサイドのランタイム
Google AI Studio アプリケーションにサーバーサイド コンポーネント（Node.js）を含めることができるようになりました。 この機能には次のような利点があります。
- サーバーサイド ロジックの実行: クライアントに公開すべきでないコードを実行します。
- npm パッケージへのアクセス: Antigravity Agent は、広範な npm エコシステムのパッケージをインストールして使用できます。
- シークレットの処理: API キーと認証情報を安全に使用します。
npm パッケージを使用する
npm install を手動で実行する必要はありません。パッケージを必要とする機能を追加するようエージェントに指示するだけで、インストールとインポートを処理してくれます。
例: > 「axios を使用して外部 API からデータを取得する。」
シークレットを安全に管理する
サーバーサイドのコードとシークレットの管理により、世界とやり取りするアプリを構築できるようになりました。
Gemini API キー
Gemini API を使用する新しいアプリを作成すると、AI Studio は GEMINI_API_KEY をサーバーサイドのシークレットとして自動的に構成します。手動での設定は不要です。このキーは、[設定] パネルの [シークレット] で確認できます。アプリの Gemini API 呼び出しは、このキーを使用してサーバーサイドのコードから行われるため、ブラウザに公開されることはありません。
サードパーティ API キー
他のサービスについては、API キーを手動で追加できます。
- サードパーティ API: Stripe、SendGrid、カスタム REST API などのサービスに接続します。
- データベース: 外部データベース（Supabase、Firebase、 MongoDB Atlas など）に接続して、セッションを超えてデータを永続化します。
実際のアプリを構築する場合、API キーを必要とするサードパーティ サービス（Twilio、Slack、データベースなど）に接続する必要があることがよくあります。次の手順でキーを手動で追加できます。
- [Add a secret]: Google AI Studio の [設定] メニューに移動し、 [シークレット] セクションを探します。
- キーを保存する: ここに API キーまたはシークレット トークンを追加します。
- コードでアクセスする: エージェントは、これらの シークレットに安全にアクセスするサーバーサイド コード（通常は環境変数経由）を記述し、クライアントサイドのブラウザに 公開されないようにします。
必要に応じて、新しいシークレットが必要な場合や、プロジェクトの環境変数で新しいキーが検出された場合は、チャットにカードが表示され、キーを追加するように求められます。
データベースと認証のための Firebase 統合
Google AI Studio では、Firebase 統合により、アプリにデータベースや認証を簡単に追加できるようになりました。Antigravity Agent は、次のサービスを自動的にプロビジョニングして設定できます。
- Firestore データベース: クライアントサイドとサーバーサイドの開発でデータを保存して同期するための、柔軟でスケーラブルな NoSQL クラウド データベース。
- Firebase Authentication: ユーザーが [Google でログイン] フローを使用して アプリケーションに安全にログインできるようにします。
エージェントに「アプリにデータベースを追加する」または「Google ログインを設定する」と指示するだけで、必要な構成とコード生成が自動的に行われます。
Firebase は無料で開始できます。割り当てを増やしたり、有料機能を使用したりする準備ができたら、有料アカウントでスケールアップすることもできます。
OAuth を設定する
シークレット管理の主なユースケースの 1 つは、OAuth を設定して他のウェブサイトやアプリに接続することです。プロンプトに、OAuth 認証を必要とするサードパーティ アプリに接続する手順が含まれている場合、エージェントはそのアプリケーションの OAuth を設定する方法の手順を提供します。これらの手順には、OAuth アプリケーションを構成するために必要なコールバック URL が含まれます。 コールバック URL は、[設定] パネルの [統合] で確認することもできます。
マルチプレーヤー エクスペリエンスを構築する
フルスタック ランタイムでは、リアルタイムのコラボレーション機能を使用できます。
- リアルタイムの状態: エージェントに「ライブ チャット」、「共同ホワイトボード」、「マルチプレーヤー ゲーム」などの機能を構築するよう指示できます。
- セッションの同期: サーバーが状態を管理するため、複数のユーザー が同じアプリケーション インスタンスをリアルタイムで操作できます。
プロンプトの例: > 「プレーヤーが互いのカーソルを確認できるマルチプレーヤー ゲームにする。」
マルチプレーヤー アプリをテストする際のヒント
アプリをデプロイする前に、マルチプレーヤー モードを 2 つの方法でテストできます。
- Google AI Studio のビルドモードでアプリを複数のタブで開きます。ビルドモードで開発する場合、アプリは開発コンテナにあります。アプリを複数のタブで開くと、アプリを使用している複数のプレーヤーをシミュレートできます。
- 右上の [共有] メニューを使用して、アプリを他のユーザーと共有します。次に、[共有] メニューの [統合] タブの [共有 URL] を使用して、アプリを共有したプレーヤーとアプリを使用します。
ベスト プラクティス
- Gemini API 呼び出し:
GEMINI_API_KEYは、 サーバーサイドのシークレットとして自動的に構成されます。このキーを使用して、サーバーサイドのコードから Gemini API 呼び出しを行います。[シークレット] パネルで確認できます。 - シークレットのセキュリティ: 機密性の高いキーには常にシークレット マネージャーを使用してください。 ファイルにハードコードしないでください。
- 関心の分離: UI ロジックはクライアントサイド フレームワーク （React/Angular）に、ビジネス ロジック/データ処理はサーバーサイドに保持します。
- エラー処理: 外部 API 呼び出しからのエラーをサーバーサイドのコードで確実に処理し、アプリがクラッシュしないようにします。