Firebase StudioというGoogleが提供しているクラウドベースの開発環境を使用して、Webアプリのプロトタイプを作ってみました。Webアプリのフルスタック開発をより効率的に行っていくために、とても便利で革新的な環境だと感じたので、シェアしていきたいと思います。
まず初めに、Firebase Studioの公式ドキュメント（→こちら）にアクセスし、「Firebase Studioを今すぐ試す」をクリックして新しいプロジェクトを開始しましょう。
すると、上の画像のようなインターフェースが表示されるので、「Prototype an app with AI」のテキストエリアに、作って欲しいアプリの仕様を入力してみます。今回は、毎日晩御飯のメニューを考えるのが面倒だと感じたため、下記のようなプロンプト（ユーザーが入力する指示）を作成しました。
冷蔵庫の中にある食材を入力して、美味しい料理のレシピを考えてくれるWebアプリを作って欲しい
仕様は下記の通り
１、食材は複数入力できるようにすること
２、レシピは日本語で出力されること
３、レシピは一つではなく複数（2〜3つ程度）出力されること
４、レシピは入力された食材の全てを使わなくても良いものとする「Prototype with AI」のボタンをクリックしてみると、まずアプリのブループリント（設計図）が作成されます。
ブループリントは英語で書かれているので理解するのに少し時間がかかりますが、プロンプトに従った内容になっていると思います。また、ブループリントは自分で編集することもできるようです。今回は特に編集はせず、このまま「Prototype this App」ボタンをクリックしました。
すると、あっという間に「Chef AI」というWebアプリが生成されました。実際に使ってみるには、右下の赤枠の「Gemini API Key」を入力する必要があります。「Auto-generate」ボタンをクリックすれば、ボタン一つで自動的にAPIキーが生成され、Firebaseプロジェクトに紐付けられるそうです。また、既にGoogle Cloud Platform (GCP) などで取得済みのGemini APIキーがある場合は、それを使用することも可能のようです。
この「Gemini（ジェミニ）」は、Googleが開発した最先端のマルチモーダルAIモデルです。マルチモーダルAIモデルとは、テキスト、画像、音声、動画、センサーデータなど、複数の異なる種類のデータ（モダリティ）を同時に理解し、処理することができる人工知能（AI）モデルを意味します。
APIキーを入力するとアプリが使えるようになるため、実際に使ってみましょう。冷蔵庫の中にある食材を入力して、「Generate Recipes」ボタンをクリックしてみます。
すると、3件のレシピを作成してくれました。しかし、このレシピをよく見てみると、足りないところがいくつかあります。なんと分量と味付けの記載がありません。これでは実際に使えないので、もう少しアプリを作り替える必要がありそうです。右下の「Edit the Code」ボタンをクリックしてみましょう。
ソースコードエディタとGeminiのAIチャットウィンドウが表示されます。ここで実際にソースコードを編集したり、AIチャットをして再度指示を出したりすることができます。今回は「ノーコードで期待通りのWebアプリのプロトタイプを作成する」ことを体感したかったため、下記のような追加のプロンプトを作成しました。
「Generate Recipes」ボタンをクリックした後に生成されるレシピが、調理工程しか記載がなく味付けが分からない。レシピは、2人前の分量、味付け、調理工程が分かるようにして欲しい。
上の画像の赤枠の箇所がGeminiとのやり取りです。追加の指示を理解して、ソースの修正を提案していることが分かります。「Update File」ボタンをクリックすると、ファイルが更新され、Webアプリに反映されます。
修正が反映された「Chef AI」を再度使ってみたところ、実際に作成されたレシピには2人前の分量と味付けも表示されるようになりました。改良されたことで使えるレシピのアプリになったのではないかと思いますが、例えばカロリー計算ができる機能や一日の食事バランスをチェックする機能など、改善できるところはまだまだたくさんありそうです。
また、作成したアプリは公開することもできます。右上の「Publish」ボタンをクリックし、Firebase App Hosting を使用してアプリケーションをオンラインでホストする手順が表示されるので、それに従うことで可能となります。何と数クリックでデプロイが完了するそうです。ただし、利用状況によっては費用が発生するため、注意が必要です。
今回はお試しで作ったみたため、「Chef AI」の公開は行いませんでしたが、より使える面白いアプリのアイディアが思い付いたら、開発からリリースまでチャレンジしてみたいと思います。
AI技術の発達により、Webアプリを作るプロセスが大きく変わりつつあると感じています。今後は本ブログの「デザインどころ」でも、AIを用いたデザイン制作やプログラム実装について楽しみながら学び実践し、発信していきたいと考えています。
・プログラムとデザインについての記事一覧（→こちら）
