Firebase Studioで体験型Webアプリのデモをサクっと作ってみた：オンラインキッザニア編 | AIコーディング
公式リンク
サービスリンク
ドキュメントリンク
Firebase Studioとは
概要
ブラウザベースで生成AIを活用したフルスタックアプリのプロトタイプの開発・デプロイまでをスムーズに行えるサービス。
Firebase Studio は、API、バックエンド、フロントエンド、モバイルなど、本番環境品質のフルスタック AI アプリの構築と製品化に役立つクラウドベースのエージェント開発環境です。
Firebase Studio は、Project IDX と、Firebase の Gemini の専門 AI エージェントとアシスタンスを統合し、アプリケーション開発に必要なものがすべて揃った、どこからでもアクセスできるコラボレーション ワークスペースを提供します。既存のプロジェクトをインポートすることも、さまざまな言語とフレームワークをサポートするテンプレートを使用して新しいプロジェクトを開始することもできます。
Project IDXとの統合
Project IDX：Google製のクラウド開発環境のこと
Project IDXのプロジェクトが走ってたものがFirebase Studioにマージされたっぽい？
このリブランディングは、Project IDX を Firebase エコシステムに深く統合するという Google の取り組みを反映しています。Project IDX を Firebase エコシステムに導入することで、開発エクスペリエンスを効率化し、Firebase で Gemini の機能を最大限に活用することを容易にしています。
Firebase Studioの特徴
既存プロジェクトのインポートが可能
- GitHub、GitLab、BitbucketのレポジトリURLからインポート可能
-
https://firebase.google.com/docs/studio/get-started-import?hl=ja&import_type=source
- レポジトリURLのインポート後に最初は手動で依存関係のインストール作業実施が必要
-
プロジェクト リポジトリの dev.nix ファイルに onCreate フックを追加すると、テンプレートの今後のすべてのユーザーと今後のインポートに対してこれを変更できます。プロジェクトに適したビルドコマンド（npm install や flutter pub get など）を実行するように onCreate を構成できます。
-
- レポジトリURLのインポート後に最初は手動で依存関係のインストール作業実施が必要
-
https://firebase.google.com/docs/studio/get-started-import?hl=ja&import_type=source
- Figumaデザインからのプロジェクトインポートが可能
Figma デザインからコードを生成し、Builder.io Figma プラグインを使用してインポートします。
豊富な組み込みテンプレート
-
Firebase Studio は、Go、Java、.NET、Node.js、Python Flask などの一般的な言語や、Next.js、React、Angular、Vue.js、Android、Flutter などのフレームワークなど、幅広いフレームワークと言語のサポートを提供
https://studio.firebase.google.com/templates?category=web
・web
・バックエンド
・モバイル
・AI
・データベース
・Misc その他
・テンプレート
ノーコードエンジニアリング
- GeminiベースでのAIコーデディングが可能
App Prototyping agent でフルスタック ウェブ アプリケーションのプロトタイプを作成し、公開します。自然言語、画像、描画などのマルチモーダル プロンプトを使用して、アプリ全体を生成します。Unsplash のストック画像ギャラリーを使用してアプリを強化します。
https://firebase.google.com/docs/studio/get-started-ai?hl=ja
Geminiの常駐AIアシスタント
- 開発の様々な工程でGeminiの活用が可能
-
インタラクティブ チャット、コード生成、ツールの実行、インライン コードの候補など、すべての開発サーフェスで Firebase の Gemini の AI コーディング アシスタンスを使用できます。
-
Gemini in Firebase は、コードとドキュメントの作成、バグの修正、単体テストの作成と実行、依存関係の管理と解決、Docker コンテナの操作などを支援します。
-
料金面
Firebase Studio へのアクセスは、ユーザーごとに 3 つのワークスペースを無料でご利用いただけます。Google Developer Program に参加すると、作成できるワークスペースの数を最大 10 に増やすことができます。App Prototyping agent の Gemini 割り当てを増やして 30 個のワークスペースにアップグレードするには、Google デベロッパー プレミアム プランに登録してください。
特定のインテグレーション（Firebase App Hosting など）では、Cloud Billing アカウントが必要になる場合があります。
サービス構築してみる
プロンプト入力
プロンプト
仮案で企画をo3先生にFirebase Studio向けのプロンプト文に起こしてもらったものを挿入。
## 🔰 0. サービス概要
- **サービス名**：インターネット版キッザニア（MVP）
- **コンセプト**：「ウェブブラウザ操作＝仕事体験」
- **対象年齢**：小学校４〜６年生
- **提供価値**
1. 家にいながら職業体験ができる臨場感
2. KPI（いいね数／売上）を伸ばすゲーミフィケーションで主体的学習
3. 成功に応じてバッジが貯まり、継続的に挑戦したくなる
―――――――――――――――――――――――――――――――――――――――
## 🧩 1. MVP で実装する 2 職業
| # | 職業 | 体験の流れ | 成功条件 | 想定セッション |
|---|------|------------|----------|----------------|
| 1 | **SNSマーケター** | 投稿企画 → 投稿作成 → いいねがリアルタイム増加 | いいね数 ≥ 30 | 5 分 |
| 2 | **ECショップ運営者** | 商品ドラッグ → 価格設定 → 売上確認 | 3 品完売 | 5 分 |
## 🎯 2. 検証指標
| 指標 | 合格ライン |
|------|------------|
| 平均プレイ時間 | ≥ 4 分 |
| “また遊びたい”5段階評価 | 平均 4.0 以上 |
| ミッションクリア率 | ≥ 70 % |
---
# 🛠 3. システム要件（Firebase Studio 用）
### 3-1. 使用プロダクト
- **Auth**：匿名ログイン（ニックネーム入力のみ）
- **Firestore**：NoSQL データストア
- **Cloud Functions (TypeScript)**：ゲームロジック・採点
- **Storage**：商品画像・アイコン
- **Hosting + Preview URLs**：即時デプロイ
- **Extensions**：EML for リアルタイムカウンタ（任意）
### 3-2. Firestore スキーマ
#### コレクション `users`
| フィールド | 型 | 説明 |
|------------|----|------|
| `displayName` | string | ニックネーム |
| `currentMissionId` | string | 進行中ミッション |
| `badges` | map\<string, boolean> | 取得バッジ |
#### コレクション `missions`
| フィールド | 型 | 説明 |
|------------|----|------|
| `type` | string | “sns” / “ec” |
| `status` | string | “waiting” / “running” / “finished” |
| `target` | number | 成功条件値 (例: 30 likes) |
| `progress` | number | 現在値 |
| `userId` | string | 紐付く user |
#### コレクション `metrics`（日単位集計）
| フィールド | 型 | 説明 |
|------------|----|------|
| `userId` | string | |
| `date` | timestamp | |
| `likesEarned` | number | |
| `salesAmount` | number | |
### 3-3. Cloud Functions 概要
```mermaid
sequenceDiagram
participant U as User
participant C as Cloud Function
U->>C: 新規投稿イベント
C->>C: 疑似アルゴで like 増加計算
C-->>U: likes カウンタ更新
```
- **onCreate(`missions/{id}`)**：初期 `progress = 0` 設定
- **httpsCallable(`simulateLikes`)**：3 秒おき乱数で likes 増加し `progress` 更新
- **onUpdate(`missions/{id}`)**：`progress ≥ target` になったら `status → finished`, `badges.SNSスター = true`
### 3-4. UI 画面定義
| 画面ID | 概要 | Studio テンプレ基盤 |
|--------|------|---------------------|
| `LoginScreen` | ニックネーム入力 → 匿名 Auth | Form + Action |
| `LobbyScreen` | 職業カード 2 枚表示 | List-Detail |
| `MissionScreen` | 左：操作 UI ／ 右：KPI リアルタイム | Split-View |
| `ResultScreen` | 星評価 + 新バッジ演出 | Modal |
| `ProfileScreen` | 所有バッジ一覧 | Collection Grid |
### 3-5. セキュリティルール（要約）
```rules
match /databases/{db}/documents {
match /users/{userId} {
allow read, write: if request.auth.uid == userId;
}
match /missions/{missionId} {
allow read, write: if request.auth.uid == resource.data.userId;
}
match /metrics/{doc} {
allow read: if request.auth != null;
allow write: if false;
}
}
```
### 3-6. デプロイ & CI
- `npm run deploy` で Hosting + Functions 同期
- Preview URLs をユーザーテスト参加者に共有
### 3-7. テストユーザー投入手順
1. Console で **Import JSON** → サンプル商品 & 投稿データ投入
2. `simulateLikes` を cron 代わりにローカルから叩きサイクルを回す
---
## 📝 4. ガイド
- コード量を **1〜2 週間／1〜2 名** に収めるため、まず GUI で画面を組み、ロジックは Functions に最小限実装。
- 後続拡張（職業追加・難易度段階）はスキーマを共通化しておくことで横展開。
> **以上をもとに、Firebase Studio でプロジェクト生成 → コレクションと画面を自動作成し、Cloud Functions に雛形コードを生成してください。**
生成中
生成されたもの
- チャット画面が横についてる
エラー対応
GeminiのAPI Keyが取得できていなかった問題
→ Auto Generativeのボタン押してみると…
また同じ画面に戻ってきてしまうw（さすがにAPI Keyの生成まではできないっぽい）
API Key 生成
すでにGoogle Claudeのプロジェクトが立ち上がっていた
対処できた？？
無事ソーシャルメディアの投稿からリアクションフィードバックもらうキッザニア体験できました。
デプロイしてみる
決済設定
- 右上の「Publishボタン」から実行可能
- GCPの請求アカウントが必要っぽい
※登録時はFirebase Blazeプランへの加入が必要
デプロイ作業
Publish Now を押す
公開作業中
View detailをクリックすると詳細が見れる
デプロイ5分ぐらいかかるとのことで一旦待機。
無事デプロイ完了👏👏👏
デモサービスレベルであればサクっとデプロイできました！
Discussion