AI Studio がフルスタック開発プラットフォームに進化した日
2026年3月18日、Google は AI Studio を大きくアップデートしました。モデルの実験やプロトタイピングの道具だったこのツールが、フルスタックの Vibe Coding プラットフォームへと姿を変えたのです。Antigravity エージェントの統合、Firebase バックエンドの自動プロビジョニング、そして本記事の主役となるリアルタイムマルチプレイヤー機能が一度に加わりました。
プログラミングの基礎知識があれば、自然言語のプロンプトだけでバックエンド込みのアプリを作り上げるプロセスを体験できます。
この記事で学べること
- AI Studio + Antigravity + Firebase の統合アーキテクチャの仕組み
- リアルタイム同期の基盤となる Cloud Firestore のセットアップ
- マルチプレイヤーアプリの設計パターンとプロンプト技法
- Secrets Manager を使った安全な API キー管理
- デプロイまでの一連のワークフロー
AI Studio × Antigravity × Firebase の統合アーキテクチャ
新しい AI Studio では、3つのコンポーネントが連携して動作します。
役割分担
AI Studio（フロントエンド）は、ブラウザ上でプロンプトを入力するとリアルタイムにプレビューが表示される開発環境です。Gemini がコードを生成し、Antigravity エージェントがプロジェクト全体の構造を理解しながらコードを最適化します。
Antigravity エージェント（オーケストレーション）は、プロジェクトの文脈を深く理解し、データベースやユーザー認証が必要な場面を自動検出します。必要に応じて Cloud Firestore や Firebase Authentication の接続を提案してくれるため、開発者が手動でインフラを設定する手間が大幅に省かれます。
Firebase（バックエンド）は、Cloud Firestore によるリアルタイムデータベース、Firebase Authentication によるユーザー認証、そしてホスティング機能を提供します。
[AI Studio ブラウザ]
↓ プロンプト入力
[Antigravity エージェント]
↓ コード生成 + インフラ検出
[Firebase バックエンド]
├── Cloud Firestore（リアルタイム同期）
├── Firebase Auth（ユーザー認証）
└── Firebase Hosting（デプロイ）
ステップ1: AI Studio でマルチプレイヤープロジェクトを開始する
まず Google AI Studio にアクセスし、新しいプロジェクトを作成します。
プロンプトの設計
マルチプレイヤーアプリを構築する際、最初のプロンプトが非常に重要です。Antigravity エージェントに十分な文脈を与えることで、適切なアーキテクチャを自動で選択してくれます。
以下は、リアルタイム共同編集ホワイトボードアプリを構築する際のプロンプト例です。
リアルタイムで複数のユーザーが同時に描画できる
コラボレーティブ・ホワイトボードアプリを作成してください。
要件:
- Canvas API を使ったフリーハンド描画
- ユーザーごとに異なるカーソル色を自動割り当て
- Firebase Authentication でログイン（Google アカウント）
- Cloud Firestore でストロークデータをリアルタイム同期
- 接続中のユーザー一覧をサイドバーに表示
- フレームワークは Next.js + TypeScript を使用
このプロンプトを入力すると、Antigravity エージェントが以下の処理を自動的に行います。
- 依存関係の解析 — Next.js、Firebase SDK、Canvas 関連ライブラリを特定
- Firebase プロジェクトの提案 — Cloud Firestore と Authentication の有効化を提案
- コード生成 — フロントエンドとバックエンドの両方のコードを生成
- リアルタイムリスナーの実装 — Firestore の
onSnapshotを自動設定
ステップ2: Firebase リアルタイム同期の実装
Antigravity が生成するコードの中核となるのが、Cloud Firestore のリアルタイムリスナーです。以下は、自動生成されるコードの典型的なパターンです。
// lib/firestore-sync.ts
// Firestore リアルタイム同期ユーティリティ
import {
collection,
onSnapshot,
addDoc,
query,
orderBy,
serverTimestamp,
Timestamp,
} from "firebase/firestore";
import { db } from "./firebase-config";
// ストロークデータの型定義
interface StrokeData {
points: { x: number; y: number }[];
color: string;
userId: string;
createdAt: Timestamp;
}
// リアルタイムリスナーを設定して、
// 他のユーザーの描画データを即座に受信する
export function subscribeToStrokes(
roomId: string,
callback: (strokes: StrokeData[]) => void
) {
const strokesRef = collection(db, "rooms", roomId, "strokes");
const q = query(strokesRef, orderBy("createdAt", "asc"));
// onSnapshot で Firestore の変更をリアルタイムに監視
return onSnapshot(q, (snapshot) => {
const strokes = snapshot.docs.map((doc) => doc.data() as StrokeData);
callback(strokes);
});
}
// 新しいストロークデータを Firestore に保存
export async function addStroke(
roomId: string,
stroke: Omit<StrokeData, "createdAt">
) {
const strokesRef = collection(db, "rooms", roomId, "strokes");
await addDoc(strokesRef, {
...stroke,
createdAt: serverTimestamp(),
});
}
// 期待される動作:
// - ユーザーAが描画 → Firestoreに保存 → ユーザーBの画面に即座に反映
// - 遅延は通常100ms以内（同一リージョンの場合）Firestore セキュリティルール
マルチプレイヤーアプリでは、セキュリティルールの設定が重要です。Antigravity は基本的なルールを自動生成しますが、本番環境では必ず見直しましょう。
// firestore.rules
rules_version = '2';
service cloud.firestore {
match /databases/{database}/documents {
// ルームへのアクセス: 認証済みユーザーのみ
match /rooms/{roomId} {
allow read, write: if request.auth != null;
// ストロークデータ: 認証済みユーザーが読み書き可能
match /strokes/{strokeId} {
allow read: if request.auth != null;
// 書き込みは自分のユーザーIDと一致する場合のみ
allow create: if request.auth != null
&& request.resource.data.userId == request.auth.uid;
}
}
}
}ステップ3: Secrets Manager で API キーを安全に管理する
今回のアップデートで追加された Secrets Manager は、外部 API キーや認証情報を安全に管理するための機能です。
これまでの Vibe Coding ツールでは、決済サービスや地図サービスなど外部 API との連携が必要になると、API キーの管理が壁になりがちでしました。Secrets Manager を使うと、キーをプロジェクトに安全に保存でき、Antigravity エージェントが必要に応じて自動的に参照します。
AI Studio の画面上部にある 「Secrets」 タブから、以下の手順で設定します。
- 「Add Secret」をクリック
- キー名（例:
STRIPE_SECRET_KEY）と値を入力 - 保存すると、エージェントがコード内で
process.env.STRIPE_SECRET_KEYとして参照
// Secrets Manager に保存したキーはコード内で環境変数として利用可能
// 例: 決済機能を追加する場合
const stripe = new Stripe(process.env.STRIPE_SECRET_KEY!, {
apiVersion: "2026-02-28",
});
// 注意: Secrets Manager はプロトタイプ環境向けです
// 本番環境では Google Cloud Secret Manager の利用を推奨しますステップ4: マルチプレイヤー機能の設計パターン
リアルタイムマルチプレイヤーアプリを構築する際に、覚えておきたい設計パターンがいくつかあります。
パターン1: プレゼンス管理
接続中のユーザーを追跡するプレゼンス機能は、ほとんどのマルチプレイヤーアプリで必要になります。
// hooks/usePresence.ts
// オンラインユーザーのプレゼンス管理フック
import { useEffect, useState } from "react";
import {
doc,
setDoc,
deleteDoc,
onSnapshot,
collection,
serverTimestamp,
} from "firebase/firestore";
import { db, auth } from "../lib/firebase-config";
interface UserPresence {
uid: string;
displayName: string;
color: string;
lastSeen: Date;
}
export function usePresence(roomId: string) {
const [users, setUsers] = useState<UserPresence[]>([]);
useEffect(() => {
const user = auth.currentUser;
if (!user) return;
// 自分のプレゼンスを登録
const presenceRef = doc(db, "rooms", roomId, "presence", user.uid);
setDoc(presenceRef, {
uid: user.uid,
displayName: user.displayName || "Anonymous",
color: generateUserColor(user.uid),
lastSeen: serverTimestamp(),
});
// 他のユーザーのプレゼンスを監視
const unsubscribe = onSnapshot(
collection(db, "rooms", roomId, "presence"),
(snapshot) => {
const activeUsers = snapshot.docs.map(
(doc) => doc.data() as UserPresence
);
setUsers(activeUsers);
}
);
// クリーンアップ: 退出時にプレゼンスを削除
return () => {
deleteDoc(presenceRef);
unsubscribe();
};
}, [roomId]);
return users;
}
// ユーザーIDからユニークな色を生成
function generateUserColor(uid: string): string {
const hash = uid.split("").reduce((acc, char) => {
return char.charCodeAt(0) + ((acc << 5) - acc);
}, 0);
const hue = Math.abs(hash) % 360;
return `hsl(${hue}, 70%, 50%)`;
}
// 期待される動作:
// - ユーザーが入室 → プレゼンスが登録 → 他のユーザーに表示
// - ユーザーが退室 → プレゼンスが削除 → リストから消えるパターン2: 楽観的 UI 更新（Optimistic Update）
ネットワーク遅延を感じさせないために、ローカルで先に画面を更新し、バックグラウンドで Firestore と同期する手法です。
// 楽観的UIの基本パターン
function handleDraw(newStroke: StrokeData) {
// 1. ローカルの画面を即座に更新（ユーザーは遅延を感じない）
setLocalStrokes((prev) => [...prev, newStroke]);
// 2. バックグラウンドで Firestore に保存
addStroke(roomId, newStroke).catch((error) => {
// 3. 失敗した場合はローカルから削除してリトライ
console.error("同期に失敗しました:", error);
setLocalStrokes((prev) => prev.filter((s) => s !== newStroke));
});
}パターン3: ルームベースのアーキテクチャ
マルチプレイヤーアプリでは、ユーザーを「ルーム」単位でグループ化するのが一般的です。AI Studio のプロンプトにルームの概念を含めると、Antigravity が適切な Firestore コレクション構造を設計してくれます。
Firestore コレクション構造:
rooms/
└── {roomId}/
├── metadata (ルーム名、作成日時、オーナー)
├── presence/ (接続中ユーザー)
│ └── {userId} (表示名、色、最終更新)
└── strokes/ (描画データ)
└── {strokeId} (座標配列、色、ユーザーID)
ステップ5: AI Studio からデプロイまで
アプリが完成したら、AI Studio から直接 Firebase Hosting にデプロイできます。
AI Studio の右上にある 「Deploy」 ボタンをクリックすると、Antigravity エージェントが以下を自動実行します。
- ビルド最適化（Tree shaking、コード分割）
- Firestore セキュリティルールの適用
- Firebase Hosting へのデプロイ
- カスタムドメインの設定（オプション）
また、Antigravity IDE で同じプロジェクトを開いて、より細かいカスタマイズやデバッグを行うことも可能です。AI Studio で生成したプロジェクトは、そのまま Antigravity IDE にインポートできるため、プロトタイプから本番環境への移行もスムーズです。
詳しい Firebase のセットアップ手順については「Antigravity で Firebase を自動プロビジョニングする方法」を参考にしてください。
まとめ — Vibe Coding でマルチプレイヤーアプリの開発が身近に
Google AI Studio の2026年3月アップデートにより、リアルタイムマルチプレイヤーアプリの開発がこれまでになく手軽になりました。自然言語のプロンプトからバックエンド込みのアプリを生成し、Firebase のリアルタイム同期で複数ユーザーの同時操作を実現できます。
ポイントをまとめると、AI Studio でプロンプト設計を行い、Antigravity エージェントがインフラを自動検出してコードを生成し、Firebase がリアルタイムバックエンドを提供するという流れです。プロトタイプの段階では AI Studio で素早く形にし、本番化の際は Antigravity IDE に移行して品質を高めるワークフローが効果的です。
AI Studio のフルスタック Vibe Coding についてさらに詳しく知りたい方は「AI Studio 2.0 フルスタック Vibe Coding 完全ガイド」もぜひご覧ください。