Content
こんにちは!w.tです。

今回は最近公開されたFirebase Studioを触ってみました!

本記事では、Firebase Studioの概要と、私が実際にプロトタイピングエージェントを使用してみた体験に基づき、
その魅力や可能性についてお話しできればと思います。

Firebase Studioとは?

Googleが提供するFirebaseは、いわゆるMBaaS(Mobile Backend as a Service)と呼ばれるもので、モバイアルアプリ開発に便利な機能を持ったプラットフォームとして広く知られていますが、この度新たなツールとして2025年4月に「Firebase Studio」が登場しました。

Firebase Studioは、API、バックエンド、フロントエンド、モバイルなど、本番環境品質のフルスタック AI アプリを構築してリリースするのに役立つエージェント型のクラウドベースの開発環境です。Firebase Studioは、Project IDXと、Firebaseの Gemini による専用の AI エージェントとアシスタントを統合し、アプリケーション開発に必要なものがすべて揃った、どこからでもアクセスできるコラボレーション ワークスペースを提供します。さまざまな言語とフレームワークをサポートするテンプレートを使用して、既存のプロジェクトをインポートすることも、新しいプロジェクトを開始することもできます。(公式から引用:https://firebase.google.com/docs/studio?hl=ja)

簡単にまとめると、Firebaseの持つ多様な機能を統合し、より直感的かつ効率的に利用できるよう設計されたクラウドベースの統合開発環境です。

例えるなら、Firebaseが持っているたくさんの便利な工具(データベース、認証機能、ファイル保存など)をFirebase Studioという使いやすい工具箱にまとめたようなイメージでしょうか。

Firebase Studio中で特に注目すべき機能の一つが「プロトタイピングエージェント」です。
近年、アプリケーション開発の現場では、アイデアを迅速に形にし、早期にユーザーからのフィードバックを得るためのプロトタイピングの重要性が増しています。

プロトタイピングエージェントとは?

自然言語、画像、描画ツールなどのマルチモーダルプロンプトを使用して、AI を活用したwebアプリを迅速にプロトタイプ化して生成できるwebベースのインターフェースです。

もはやコーディングなしに画像や自然言語からバックエンドも含めた実装をやってくれちゃう感じですね。
ただこのエージェントはまだNext.jsを使用したwebアプリケーションのみのサポートとなっており、今後は他のプラットフォームとフレームワークにも対応する予定のようです。

早速使ってみた

まずはGoogle アカウントにログインし、Firebase Studio を開く

すると「Prototype an app with AI」と書いており、もうここから自然言語や画像をアップロードして始めることができます。

作りたいアプリのプロンプトを入力する

せっかくなのでFirebaseの機能を使うようなアプリを作ってみたいですね・・・。
Genkitを使ったAIとのチャットアプリでも作ってもらいましょう!

ということでキャラ付けしたAIとLINE風のチャット画面でやり取りできるアプリでプロンプトを以下のように入力してみました。
(プロンプトもAIに考えてもらいました)

するとプロンプトを元にブループリントが作成されます。
日本語にはまだ対応していないようですが理解はしてくれているようなので一旦これで進めてみます。

プロトタイプ実行

ものの2分ほどで完成度の高いチャット画面ができちゃいました!
ただ、まだこれではAPIが有効になっていないのでAPI Keyを設定します。
右下を見てもらうとわかるのですが、API Keyの設定すらコードベースで行わずテキストボックスに入れるだけで簡単ですね。

ちゃんと設定されてそれっぽいチャットが送られてきました!

試しにチャット投げてみる

まだ会話には難ありですがそこは今回の趣旨から逸れるのでご愛嬌・・・。
ちゃんとユーザーのアイコンがあったり、吹き出しも右と左で送受信が分かれていたりなどちゃんと実装されておりとてもよくできています。

ちなみにissueを開くとエラー内容が表示され、これもエージェントに修正してもらうこともできます。

こんな感じで解消されます。(素晴らしい)

仕様を追加してみる

スタンプ送信機能を要望してみました。
すると自動的に必要なファイルに修正を加えていき1分も経たずに新規機能追加をしてくれました。

これはかなりいい感じにできてるのではないでしょうか。

ちゃんと送れます!

細かい修正をしたい場合は

どうしてもプロンプトでは指示しにくいものや、細かい修正をしたい場合は右上のアイコンからモード変更ができ
コードベースで修正することができます。

なので全てをエージェントに任せるのではなく適宜使い分けることができるということですね。

まとめ

いかがだったでしょうか!
Firebase Studioのプロトタイピングエージェントは、アイデアを素早く形にし、Firebaseの強力なバックエンド機能を活用したインタラクティブなプロトタイプを容易に作成できる画期的なツールです。

これまで、バックエンドの構築に手間がかかっていたためにプロトタイピングに時間をかけられなかった開発者や、コードを書くことに抵抗があるデザイナーにとって、Firebase Studioは強力な味方となるでしょう。

まだモバイルの対応はしていないですが「他のプラットフォームとフレームワークのサポートは近日提供予定です。」とのことで、近いうちにモバイルアプリにも対応するのではないかと思います。

すでにFirebase Studio上でAndroid、iOSのエミュレータを利用できるようなので、今回のエージェントがモバイルでも使用できるようになれば、かなり魅力的な製品になるのではないかと感じています!

もし、高速かつ効率的なプロトタイピングに関心がありましたら、
ぜひ一度Firebase Studioとそのプロトタイピングエージェントを試してみてはいかがでしょうか。

2025年6月2日 Firebase Studioを触ってみた

Category モバイル

ご意見・ご相談・料金のお見積もりなど、
お気軽にお問い合わせください。

お問い合わせはこちら