こんにちは！このサイトを運営しているTomoyaです。
今回は前回の続きで【Firebase Studio】を実際に登録して使ってみるまでを記事にしました。
前回の記事をご覧になっていない方は以下の関連記事からご覧ください。
実際にFirebase Studioに登録してみよう（手順）
ここではまず登録からFirebase Studioにログインして画面の見方を画像を使って説明していこうと思います。
作成の段階をご覧になりたい場合は次のセクションに進むことをおススメします。
ウェブブラウザからFirebase Studioへアクセスして開発環境、画面の見方を紹介します。
以下のボタンまたは「Firebase Studio」を検索してアクセスします。
⇩
Firebase Studioのホーム画面が表示されます。
スタートする場合は「Try Firebase Studio」か「Get Started」ボタンを押して次に進んでください。
⇩
Googleアカウントでログインまたは新規登録（アカウント作成）を行いログインしてください。
⇩
ログインすると以下の画像のような画面にアクセスできます。
ここでプロンプトを入力して作成を始めたりテンプレートの選択、GitHubからImportしてプロジェクトを始める事ができます。
プロンプトを入力してプロジェクトを作成すると表示される開発環境が以下の２つの画像のようなブラウザになります。
ここで開発を行っていきます。
【Prototyper】と【Codeモード】は行き来可能です。自分に合った編集方法で行うことをおススメします。
私は見やすさ重視で基本的にPrototyperモードでAIと対話しながらプレビューの確認を行っています。問題があればCodeモードに切り替えて調査するという風に使い分けて行っています。
Codeモードは、他のIDEのVScodeやCursorと同じような見え方なので馴染みがあるかもしれません。
Prototyper画面：
- 左側：プレビュー画面（リアルタイムで変更が反映される）
- 右側：AIエージェント画面：アイデアの指示を行う
⇕
Code編集画面：
- 左奥：ファイル構成：ファイル・フォルダーの作成もできます。左のアイコンから切り替え可能。
- 左：コードエディタ：ここで自力でのコードの編集を行えます。
- 右：プレビュー画面
- 右奥：AIエージェント画面：ダイヤ(Gemini)のボタンを押すことでオン・オフが可能です。
別ルート：ホーム画面→テンプレート選択
テンプレートからの作成もできます。自分が知っているプログラミング言語や行いたい事によっては、選択したいと思う言語やフレームワークがあると思うのでこちらも紹介しておきます。
⇩
⇩
AIと一緒にコードを書く体験（Vibe Codingの実践）
ここからは実際に簡単なwebアプリをVibe Codingしてみようと思います。
今回作るのは「やらないことリスト/NOT_ToDo」のwebアプリケーションです。
「やらないことリスト/NOT_ToDo」のVibe Coding実践
以下のような内容で作成を依頼します。
- Not＿todoリストの作成機能
- 回避日数を数える習慣化トラッカー機能
- 朝の時間にGmailに通知するリマインダー機能
- 色は爽やかブルーと深いダークブルーの指定
Firebase Studioのホーム画面の入力欄に以下のようなプロンプトを記入しました。
ちなみに「Improve prompt」ボタンを押してAIにプロンプトを整理してもらう事もできます。
入力後「Prototype with AI」ボタンを押すとAIがプランニングを行ってくれます。
⇩
作成されたプランニングが以下の画像の内容です。特に変更点がなければ「Prototype this App」のボタンを押すと作成が始まります。
もちろん変更点がある場合もプロンプトで指示すれば再度調整してプランニングしてくれます。
ここは英語での表示なので慣れていないと読みずらいかもしれません。
⇩
数分後、作られたアプリ（プロトタイプ）がこんな感じです。
⇩
このままでは、英語で分かりずらいのとリマインダーの朝の時間が短いので日本語のアプリにしてリマインダー指定時間の範囲を広げます。以下のように入力したので▶ボタンを押して修正を依頼します。
このように変更したいポイントがあれば右側のAIエージェント画面に記入して▶ボタンを押して修正を依頼していきます。
⇩
最終的にこんな感じに作成できました。
5. まとめ
今回は簡単なVibe Codingを行っていきましたがFirebase機能を追加したりセキュリティを行っていくとだんだんと複雑になっていくので一気に行わずに一歩ずつ行っていきたいと考えています。
例として「AI Studio」でプロンプトを練り、「Firebase Studio」で形にして、「Firebase Hosting」で公開する。と言ったルートを作って個人開発を進めていきたいと思います。
いかがだったでしょうか？
結構簡単で誰でも出来そうに感じませんでしたか？
ここから「あれも欲しい」「これも欲しい」となると複雑になっていくので気を付けてください。
あの状態のwebアプリケーションも前回の説明の通りプランをアップグレードして(Blazeプラン/従量課金）にすることで直ぐに公開（デプロイ）する事が可能です。始めにGCP(Google Cloud Platform)でBilling Accountを登録する必要がありますが個人利用であればSparkプラン内(無料)の利用量で済むのでよっぽどでない限り料金は発生しないと思います。料金が発生するのは、あくまでその無料枠を超えた場合のみです。
補足：なぜ請求先アカウントが必要か？
- 本人確認と不正利用防止:
-
請求情報を登録することで、Google Cloudがユーザーの本人確認を行い、プラットフォームの不正利用を防ぐ目的があります。
- シームレスなアップグレード:
-
もし将来的にアプリの利用が拡大し、無料枠を超えた場合でも、サービスが停止することなくスムーズに有料プラン（Blazeプラン）に移行できるようにするためです。
こんな形で個人開発を行っていき記事にして公開していこうと思います。行ってもらいたい企画等あればコメントでぜひ聞かせてください。
ここまで読んでいただきありがとうございました。
また次回もご覧になってください。
コメント