GoogleからAIとチャットしながらアプリを作れる開発ツールFirebase Studioがリリースされました。コードを1行も書かずにあっという間にアプリを作れます。
制限はありますが無料で使えます。（現在は試験公開版です）
Firebase Studioの使い方
以下のリンクに記載されていますが、使い方は大きく分けて4通りです。
・GitHubなどから既存のプロジェクトをインポートまたはアップロード
・AI（Gemini）によりプロトタイプを作成する
・Firebase Studio のテンプレートギャラリーから開始する
・App Prototyping エージェントのガイド付きツアーを試す
普段開発をやらない人は2番目か4番目がよさそうですね。（実質的に4番目は2番目と同じです）
App Prototyping エージェントを使用してみる：レシピ考案アプリ
こちらのチュートリアルを試してみます。
https://firebase.google.com/docs/studio/solution-build-with-ai?hl=ja
チュートリアルと同じで作りたいアプリを自然言語で入力します。
プロンプトの日本語訳：「アップロードされた写真やブラウザ内カメラから食品を識別できるウェブアプリを構築してください。アプリは、識別された食材を使ったレシピを提供する必要があります。」
するとGeminiがどんなアプリにするか考えてくれます。
日本語訳すると、こんな感じ。
最初に投げたプロンプトの内容は結構大雑把でしたが、Geminiがアプリの仕様をちゃんと考えてくれました。しかも、AIで画像を分析してレシピも生成するという仕様。
とりあえずこれでOKとしましょう。
Prototype this appをクリックすると、Geminiが勝手にコーディングしてくれます。
30秒ほど待つと出来上がります。シンプルですが、画像のURLを投げるとレシピを考えてくれるようです。
出来上がったアプリを試してみる
先ほどの画像URLに、適当に野菜が写っている画像のURLを渡すと、食材を分析してくれます。ここではGemini 2.0 Flashを利用しています。さすがマルチモーダルに強いGemini。的確に分析してくれます。
Generate Recipeをクリックすると、レシピが生成されました。
一通り動くことは確認できました。
レシピ考案アプリ：生成されたファイルを確認してみる
TypeScriptでコーディングしてあるようですね。
Edit the Codeをクリックするとコードを編集できるようになります。
このあたり開発環境ははVSCodeとよく似てますね。
どうやらアプリに必要な一連のファイルが生成されているようです。
レシピ考案アプリ：いろいろ変更してみる
Geminiとチャットしてアプリにいろいろ変更を加えることが出来ます。
たとえば、
・UIを日本語にする
・画像ファイルをアップロードできるようにする＆カメラ撮影もOKにする
・色合いを指定したものに変更する
など。
有料プランに登録すれば、このままAppをGoogle Cloudでデプロイすることもできるとのこと。
今まで様々なコーディング系AIが存在していましたが、AI～開発環境～デプロイ環境までトータルでソリューションを用意できるのはさすがGoogleです。
データの記録が必要なアプリを開発してみる
先ほどのアプリは写真をAIに送って結果が返ってきたら終わりでしたが、今度はユーザーが入力したデータを記録しておく必要があるアプリを開発してみます。プロンプトも日本語でチャレンジ。
するとGeminiが方針を考えてくれます。
悪くはなさそうですが、せっかくなのでAIで自動的にリストに振り分ける機能も追加してみます。
とりあえず、これで作ってみましょう。
30秒ほど待つと・・・できました！
さっそく使ってみましょう。「トマト」と入力すると・・・
Supermarketに追加されました！
他にもいろいろ品目を追加してみます。
ちょっと意図とは違いましたが、自動的にリストに振り分けてくれました。
ユーザーが手動で各メモに品目を追加できるようにしたいので、Geminiに依頼してみます。
プロンプト： ユーザーが手動で各メモに品目を追加できるようにしたい。＋ボタンを追加して、それをクリックするとリストの項目が1つ増えてユーザーの入力待ち状態になるようにします。
すぐに反映されました！
＋ボタンを押すと入力できるようになってます。
さらにいろいろ指示してみます。
プロンプト： ＋ボタンをクリックするとリストの項目が1つ増えてユーザーの入力待ち状態になるようにしたときに、チェックマークと×マークを表示して、チェックマークをユーザーがクリックしたらその内容で確定してリストに追加。×マークをユーザーがクリックしたら、その項目は削除するようにして。
プロンプト： ユーザーがチェックを付けたリストは取り消し線を表示するようにして。
コード1行も書いてないのに、次々と開発が進んでいくのは快感ですね！
生成されたコードについての質問もできる
コーディングモードに変えると、そこでもGeminiに質問できます。たとえば今回リストに追加した項目を保存できるようにしてますが、そのデータはどこにあるのかを聞いてみるとこんな感じでコードを分析して回答してくれます。
料金はどうなる？
この手のAIコーディングツール（Cursor、Cline、GitHub Copilot とか）はAPI料金が気になるところです。料金についてはこちらに記載されています。
https://firebase.google.com/docs/gemini-in-firebase?hl=ja#pricing 
ん！？ 「Firebase コンソールで Gemini in Firebase を無料で利用できます。」！？
えっと...AIは使い放題ということでしょうか。相変わらずGoogleさん太っ腹ですね。Gemini Code Assistもそうでしたが圧倒的低価格で競合つぶしに来てるようです。
※注：別のページで試験運用中は無料というような書き方も見かけたので今後変更になる可能性あり。
※注：Firebase Studioを無料プランで利用する場合、作れるWorkspaceは3個までです。
ただ無料になる代わりに、Geminiとやり取りした内容はモデルのトレーニングに利用されますのでご注意ください。利用してほしくない場合は有償プランを利用する必要があります。
https://firebase.google.com/docs/gemini-in-firebase?hl=ja#how-gemini-in-firebase-uses-your-data 