Firebase Studio と Project IDX とは？ ブラウザで高機能開発・ノーコードも行ける！・Google One AI Pro プランで使える
📝 記事について：
本記事は、５０近辺のくたびれたおっさん（貧乏）の筆者が、サイトやコードを作っていく際に気になったものをまとめたものです。利用するかもしれない製品・サービスについて、公開情報を調べています。
内容の正確性については、必ず公式情報やデータソースをご確認ください。
Firebase Studio はブラウザが起動すれば開発できるクラウド開発環境で、ローカルに開発環境を用意する必要がありません。
Google One AI Proプランに契約すると、Google デベロッパー プログラムのプレミアムが付き、ワークスペース数や AI 割り当てが増えてかなり使いやすくなります。
Core Insights
① ブラウザで完結 → ② プロトタイプ〜デプロイ一気通貫 → ③ Google One AI Pro で増量
-
1 ブラウザで完結
環境構築不要
インストール不要。IDE・ビルド・プレビュー・デプロイまでブラウザ内で完結します。
-
2 一気通貫
プロンプトから本番まで
自然言語でプロトタイプ生成、Code ビューで編集、エラーはチャットで修正。App Hosting で公開可能。
-
3 Google One AI Pro
プレミアムが付く
AI Pro 契約でデベロッパー プログラム プレミアムが付属。30 ワークスペース・割り当て増で十分使えます。
Firebase Studio とは
Project IDX が Firebase Studio に統合され、ブラウザから AI を活用したフルスタック開発ができるクラウド環境になりました。
開発環境をローカルに用意せず、ブラウザが起動すれば開発できます。
図1: Firebase Studio トップ（クリックで拡大）
できること
自然言語でアプリの要件を書くとブループリントができ、プロトタイプが生成されます（会話で UI を生成するStitch と Antigravity の連携も当サイトで紹介しています）。
エラーは右側のチャットで LLM に修正を依頼でき、左のアプリを触るとエラーを自動検知して「修正しますか？」と出ます。Code ビューに切り替えれば、おなじみのエディタでソースとプロジェクト構成を確認しながら作業できます。
流れのイメージです（すべてクリックで拡大）。
図2: プロンプト入力
図3: ブループリント
図4: プロトタイプ完成
図5: エラーをチャットで修正
図6: エラー自動検知
試しに生成したアプリ
今回の例として、画像をアップロードすると LLM が画像を解析し、英語の俳句と解説文を表示する Web アプリ「Image Muse」を作りました。
チャットで何度か修正を重ねると、そのまま動くアプリができあがります。
図7: 完成例（Image Muse）
図8: Code ビューで編集
Code ビューは VS Code のオープンソース版「Code OSS」をベースにしており、使った印象も VS Code やAntigravityのエディタに近いです。ブラウザ内でかなり高度な開発ができます。
図9: VS Code 風の Code ビュー全体（クリックで拡大）
料金と Google One AI Pro
Firebase Studio 本体は無料で使えます。ワークスペース数は次のとおりです。
| プラン | ワークスペース数 |
|---|---|
| プログラムなし | 3 |
| 標準 | 10 |
| プレミアム（Google AI Pro に含まれる） | 30 |
Google One AI Proに契約すると、Google デベロッパー プログラムのプレミアムが追加料金なしで付き、30 ワークスペースや App Prototyping の割り当て増が使えます。かなり使いやすくなります。クオータ（Compute Quota）の話は別記事にまとめています。
図10: プラン比較（クリックで拡大）
試してみる
- 試しに Web アプリを作成して Web で公開してみる
プロンプト例：
LLM・AI・生成APIは一切使わないでください。
タップ操作だけで完結するWebアプリを1ページで作ってください。
・操作:
- 入力は「＋」ボタンやカードのタップのみ。テキスト入力欄は使わないか、最小限にする
- 追加・削除・完了切り替え・並び替えなどはすべてタップで実行
- スマホ・タブレットのタップ操作を前提にしたUI
・機能例（いずれかで可）:
- タップで項目追加／タップで削除・完了するToDo風
- タップでカウントアップ・リセットするカウンター
- タップで並び替えできるカード一覧
・技術:
- フロントエンドのみ。localStorageで保存し、リロードしても残る
- 外部API・LLM呼び出しは禁止
- レスポンシブで、記事からリンクできる見た目にすること結果のURL：https://studio--studio-9110271515-15f6c.us-central1.hosted.app/（掲載期間不定期・リンク切れ時は申し訳ありません）
公開処理をする様子です。Google One AI Proプランと GCP の請求先アカウントが必要で、それがないと Web 公開はできません。
図11: 公開処理（クリックで拡大）
Web 公開まではボタン操作のみで、細かな設定内容はまだ把握しきれていませんが、ここまではかなりスムーズな印象です。
GCP は請求先アカウントだけ意識すればよく、あとは Firebase で完結している感覚です。ほぼ自動設定で、リージョンは US になっているようです。このあたりは調整が必要かもしれません。ほかにも仕組みの詳細はこれから調べていきたいところです。
図12: 公開作業中（クリックで拡大）
公開アドレスを掲載します。アクセス料金などはまだわかりませんが、コードは単純な JavaScript なので、お試しでここまでノーストップで作業できます。
https://studio--studio-9110271515-15f6c.us-central1.hosted.app/（掲載期間は不定期です。リンクが切れていたら申し訳ありません。）
図13: 公開されたアプリ（TapList）（クリックで拡大）
料金については未知な部分がありますが、Google One AI Pro プランでは毎月 10 ドル分のクレジットが付与されます。
Artist's Perspective
Firebase サービス内で完結できるような感じで、利用できるサービス同士が連携していて開発体験が向上している印象です。ブラウザ一つあればある程度のところまで開発ができるって、すごい世の中になりましたね。サーバー設定や CPU をどうするかなど細かく指定できるようですが、今回は「簡単にこんなことができる」というご紹介です。
試しに作った Web アプリは、アクセスが増えると料金も増えますが、Google One AI Pro プランの 10 ドル分クレジットがあるので、ちょっと使いきれていません。お暇なときにアクセスしてみてください。週に万人とか来たらさすがに足りないと思いますが、数千人程度ならなんとか収まるかな……。貧乏なくたびれたおっさんなので、アクセスが増えると怯えています（笑）。
データソース・参考リンク
本記事は以下の公式ページの情報を参考にしています。内容の正確性については、必ず元のデータソースをご確認ください。