(´・ω・`)お知らせ工事中(´・ω・`)

Firebase Studioを使ってみた

  • 2025年5月12日
  • 2025年5月18日
  • Firebase
  • 17View
  • 0件
椎名
最近公開されたFirebase Studioをちょっと気になったので触ってみました🔥

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

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

椎名
本記事では、Firebase Studioの概要と、私が実際にプロトタイピングエージェントを使用してみた体験に基づき、
その魅力や可能性についてお話しできればと思います。
プロトタイピングエージェントとは?
自然言語、画像、描画ツールなどのマルチモーダルプロンプトを使用して、AI を活用したウェブアプリを迅速にプロトタイプ化して生成できるウェブベースのインターフェースです。
もはやコーディングなしに画像や自然言語からバックエンドも含めた実装をやってくれちゃう感じですね。
ただこのエージェントはまだNext.jsを使用したwebアプリケーションのみのサポートとなっており、今後は他のプラットフォームとフレームワークにも対応する予定のようです。
椎名
言葉だけではわかりにくいと思うので早速使ってみようと思います!

早速使ってみた

  1. まずはGoogle アカウントにログインし、Firebase Studio を開く
    するとPrototype an app with AIと書いており、もうここから自然言語や画像をアップロードして始めることができます。
  2. 作りたいアプリのプロンプトを入力する
    せっかくなのでFirebaaseの機能を使うようなアプリを作ってみたいですね・・・

    Genkitを使ったAIとのチャットアプリでも作ってもらいましょう!

    AIとのチャットアプリを作るように指示をすれば簡単にできてしまうはず。
    キャラ付けしたAIとLINE風のチャット画面でやり取りできるアプリでプロンプトを入力してみました。(プロンプトもAIに考えてもらいました)

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

    椎名
    サムライチャットwいい名前
  3. プロトタイプ実行
    ものの2分ほどで完成度の高いチャット画面ができちゃいました!
    ただ、まだこれではAPIが有効になっていないのでAPI Keyを設定します。
    右下を見てもらうとわかるのですが、API Keyの設定すらコードベースで行わず入力Boxに入れるだけで簡単ですね・・・。

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

    ちなみにissueを開くとエラー内容が表示され、これもAIに修正してもらうこともできる

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

  4. 仕様を追加してみる
    スタンプ送信機能を要望してみました
    これはかなりいい感じにできてるのではないでしょうか

    ちゃんと送れます(反応してくれるとは言っていない)

まとめ

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

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

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

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

椎名
ご覧いただきありがとうございました!

Firebaseの最新記事4件