このガイドでは、App Prototyping agent を使用して、Gemini in Firebase を活用してフルスタック アプリを迅速に開発して公開する方法について説明します。自然言語プロンプトを使用して、ログインしたユーザーが提供した写真またはブラウザ内カメラから食品を識別し、識別された食材を含むレシピを作成する Next.js アプリを生成します。ユーザーは、レシピを検索可能なデータベースに保存するかどうかを選択できます。
その後、アプリを調整して改善し、最終的に Firebase App Hosting に公開します。
このガイドで使用する他のテクノロジーは次のとおりです。
- Firebase Studio ワークスペース
- Firebase プロジェクト
- Firebase App Hosting
- Cloud Firestore
- Firebase Authentication
- Firebase App Check
ステップ 1: アプリを生成する
Google アカウントにログインし、Firebase Studio を開きます。
[AI を使用してアプリのプロトタイプを作成する] フィールドに、次のプロンプトを入力します。これにより、ブラウザのカメラと生成 AI を使用する画像ベースのレシピアプリが作成されます。
たとえば、次のようなプロンプトを入力して、レシピ生成アプリを作成できます。
Use secure coding practices to create an error-free web app that lets users upload a photo or take a picture with their browser camera. The app identifies the food in the picture and generates a recipe and accompanying image that includes that food. If no food product is identified, generate a random dessert recipe.必要に応じて、画像を追加してプロンプトに添えます。たとえば、アプリで使用するカラーパターンを含む画像をアップロードし、Firebase Studio にその画像を使用するよう指示できます。画像のサイズは 3 MiB 未満である必要があります。
[AI でプロトタイプを作成する] をクリックします。
アプリ プロトタイピング エージェントは、プロンプトに基づいてアプリ ブループリントを生成し、提案されたアプリ名、必要な機能、スタイル ガイドラインを返します。
ブループリントを確認します。必要に応じて、いくつかの変更を加えます。たとえば、次のいずれかのオプションを使用して、提案されたアプリ名やカラーパターンを変更できます。
[カスタマイズ] をクリックして、ブループリントを直接編集します。必要に応じて変更を加え、[Save] をクリックします。
チャットペインの [Describe...] フィールドに、明確にするための質問とコンテキストを追加します。画像をアップロードすることもできます。
[このアプリのプロトタイプを作成する] をクリックします。
アプリ プロトタイピング エージェントがアプリのコーディングを開始します。
- アプリで AI を使用しているので、Gemini API キーを追加または生成するよう求められます。[自動生成] をクリックすると、App Prototyping agent が Firebase プロジェクトと Gemini API キーをプロビジョニングします。
ステップ 2: テスト、調整、デバッグ、イテレーション
最初のアプリが生成されたら、テスト、調整、デバッグ、イテレーションを行うことができます。
アプリを確認して操作する: コード生成が完了すると、アプリのプレビューが表示されます。プレビューを直接操作してテストできます。詳しくは、アプリをプレビューするをご覧ください。
Cloud Firestore と Firebase Authentication を追加する: イテレーション フェーズでは、Cloud Firestore と Firebase Authentication を使用してユーザー認証とデータベースを追加するよう App Prototyping agent に依頼できます。たとえば、次のようなプロンプトを表示して、レシピを保存してダウンロードできるようにします。
Add user authentication to the app. Authenticated users can: - Download the recipe and its generated image as a PDF (Print). - Save the recipe as public or private and make accessible to a search feature. For now, just save the text, not the image, to the database. Important: Only authenticated users can download the PDF.エラーが発生したら修正する: ほとんどの場合、App Prototyping agent は発生したエラーを修正するよう求めるメッセージを表示します。[エラーを修正] をクリックして、修正を試行します。
自動修正を求めるメッセージが表示されないエラーが発生した場合は、エラーと関連するコンテキスト（「Firebase の初期化コードでこのエラーを修正できますか？」など）をチャット ウィンドウにコピーして Gemini に送信します。
自然言語を使用してテストとイテレーションを行う: アプリを徹底的にテストし、App Prototyping agent を使用して、満足できるまでコードとブループリントをイテレーションします。
Prototyper view, you can also use the following features: では
[アノテーション] をクリックして、プレビュー ウィンドウを直接利用します。使用可能な図形ツール、画像ツール、テキストツールと、オプションのテキスト プロンプトを使用して、App Prototyping agent で変更する内容を視覚的に記述します。
[選択] をクリックして特定の要素を選択し、App Prototyping agentの手順を入力します。これにより、特定のアイコン、ボタン、テキストの一部、その他の要素をすばやくターゲットにできます。 画像をクリックすると、Unsplash からストック画像を検索して選択することもできます。
必要に応じて、
[プレビュー リンクを共有] をクリックして、Firebase Studio 公開プレビュー版を使用してアプリを一般公開で一時的に共有することもできます。Firebase プロジェクトを作成する: アプリ プロトタイピング エージェントは、次の操作を行うときに、ユーザーに代わって Firebase プロジェクトをプロビジョニングします。
- Gemini API キーを自動生成する
- アプリを Firebase プロジェクトに接続するようリクエストする
- Cloud Firestore や Firebase Authentication などの Firebase サービスにアプリを接続する方法についてのサポートを要求する
- [公開] ボタンをクリックして Firebase App Hosting を設定します
ワークスペースに接続されている Firebase プロジェクトを変更するには、代わりに使うプロジェクト ID を指定して App Prototyping agent に指示します。たとえば、「ID
<your-project-id>の Firebase プロジェクトに切り替えます。」アプリをテストして Cloud Firestore データベース ルールを確認する: アプリのプレビュー ペインで、さまざまな料理が写っている画像をアップロードして、アプリが食材を識別し、レシピを生成して保存する機能がテストされるようにします。
別のユーザーとしてログインしてレシピを生成します。認証されたユーザーが自分の非公開レシピとレシピを表示でき、すべてのユーザーが公開レシピを表示できることを確認します。
App Prototyping agent に Cloud Firestore の追加をリクエストすると、Cloud Firestore データベース ルールが作成され、デプロイされます。Firebase コンソールでルールを確認します。
コード内で直接デバッグとイテレーションを行う:
[コードに切り替え] をクリックして Code ビューを開きます。ここで、アプリのすべてのファイルを表示し、コードを直接変更できます。Prototyper mode at any time. に戻すことができますCode ビューでは、次の便利な機能も使用できます。
Firebase Studio の組み込みのデバッグ機能とレポート機能を使用して、アプリを検査、デバッグ、監査します。
Gemini を使用した AI アシスタント: コード内のインラインまたは Gemini インタラクティブ チャット（どちらもデフォルトで利用可能）。インタラクティブ チャットでは、問題の診断、解決策の提供、ツールの実行により、アプリの迅速な修正を支援できます。チャットにアクセスするには、ワークスペースの下部にあるスパークル アイコンGemini をクリックします。
に戻るには、Firebase Local Emulator Suite にアクセスして、データベースと認証データを表示します。ワークスペースでエミュレータを開くには:
- [コードに切り替え] をクリックし、Firebase Studio 拡張機能（
Ctrl+',Ctrl+'、macOS ではCmd+',Cmd+'）を開きます。 [バックエンド ポート] までスクロールして展開します。
[ポート 4000] に対応する [操作] 列で、[新しいウィンドウで開く] をクリックします。
生成 AI 機能のパフォーマンスをテストして測定する: Genkit デベロッパー UI を使用して、Genkit AI フローのを実行、さまざまなモデルのテスト、デバッグ、操作、プロンプトの調整ができます。
Genkit デベロッパー UI に Genkit フローを読み込んでテストを開始するには:
Firebase Studio ワークスペースのターミナルで、次のコマンドを実行して Gemini API キーをソースし、Genkit サーバーを起動します。
npm run genkit:watchGenkit デベロッパー UI のリンクをクリックします。新しいウィンドウで Genkit デベロッパー UI が開き、フロー、プロンプト、エンベッダー、使用可能なさまざまなモデルが表示されます。
Genkit デベロッパー UI の詳細については、Genkit のデベロッパー ツールをご覧ください。
（省略可）ステップ 3: App Hosting を使用してアプリを公開する
アプリをテストしてワークスペースで問題がなければ、Firebase App Hosting を使用してウェブに公開できます。
App Hosting を設定すると、Firebase Studio によって Firebase プロジェクトが作成されます（Gemini API キーの自動生成またはその他のバックエンド サービスによってまだ作成されていない場合）。また、Cloud Billing アカウントのリンク手順が示されます。
アプリを公開するには:
[公開] をクリックして Firebase プロジェクトを設定し、アプリを公開します。[アプリを公開する] ペインが表示されます。
[Firebase プロジェクト] の手順で、App Prototyping agent にワークスペースに関連付けられている Firebase プロジェクトが表示されます。Firebase プロジェクトがまだ存在しない場合は、App Prototyping agent によって新しいプロジェクトが作成されます。続行するには、[次へ] をクリックします。
[Cloud Billing アカウントをリンク] の手順では、次のいずれかを選択します。
Firebase プロジェクトにリンクする Cloud Billing アカウントを選択します。
Cloud Billing アカウントをお持ちでない場合、または新しいアカウントを作成したい場合は、[Cloud Billing アカウントを作成] をクリックします。そうすると、Google Cloud コンソールが開き、そこで 新しいセルフサービス Cloud Billing アカウントを作成できます。アカウントを作成したら、Firebase Studio に戻り、[Cloud Billing をリンク] リストからアカウントを選択します。
[次へ] をクリックします。Firebase Studio は、ワークスペースに関連付けられたプロジェクトに請求先アカウントをリンクします。このプロジェクトは、Gemini API キーを自動生成したとき、または [公開] をクリックしたときに作成されます。
[サービスを設定] をクリックします。アプリ プロトタイピング エージェントが Firebase サービスのプロビジョニングを開始します。
[今すぐ公開] をクリックします。Firebase Studio は Firebase サービスを設定し、App Hosting のロールアウトを開始します。完了まで数分かかることがあります。裏側で行われていることの詳細については、App Hosting ビルドプロセスをご覧ください。
公開ステップが完了すると、App Hosting オブザーバビリティを備えた URL とアプリ分析情報とともに [アプリの概要] が表示されます。Firebase で生成されたドメインの代わりに、カスタム ドメイン（example.com や app.example.com など）を使用するには、Firebase コンソールでカスタム ドメインを追加します。
App Hosting の詳細については、App Hosting とその仕組みを理解するをご覧ください。
（推奨）ステップ 4: 公開済みアプリをテストする
公開が完了し、アプリが Firebase にデプロイされると、Cloud Firestore と Firebase Authentication は本番環境でテストできるようになります。
Firebase コンソールで Cloud Firestore と Firebase Authentication のデータを表示する
アプリを公開すると、Firebase コンソールでアプリのライブデータを確認できます。
ライブ Cloud Firestore データベースを表示するには、Firebase コンソールを開き、ナビゲーション メニューから [Build] > [Firestore Database] を選択します。
ここから、保存されたデータの検査、セキュリティ ルールの表示とテスト、インデックスの作成を行うことができます。詳しくは、Cloud Firestore をご覧ください。
Firebase Authentication のライブデータを表示するには、Firebase コンソールを開き、ナビゲーション メニューから [Build] > [Authentication] を選択します。
ここから、認証構成とアプリユーザーを検査できます。詳しくは、Firebase Authentication をご覧ください。
本番環境で Cloud Firestore ルールをテストする
アプリを公開したら、本番環境に対して Cloud Firestore セキュリティ ルールを再度テストする必要があります。これにより、承認されたユーザーがデータにアクセスでき、不正アクセスから保護されます。
ルールは、次のすべての方法でテストできます。
アプリケーション テスト: デプロイされたアプリケーションを操作し、さまざまなユーザーロールまたは状態に対してさまざまなデータアクセス パターン（読み取り、書き込み、削除）をトリガーするオペレーションを実行します。この実環境でのテストにより、ルールが実際に正しく適用されていることを確認できます。
ルール プレイグラウンド: ターゲットを絞ったチェックを行うには、Firebase コンソールのルール プレイグラウンドを使用します。このツールを使用すると、本番環境ルールを使用して Cloud Firestore データベースに対するリクエスト（読み取り、書き込み、削除）をシミュレートできます。ユーザー認証の状態、データへのパス、オペレーションのタイプを指定して、ルールが意図したとおりにアクセスを許可または拒否するかどうかを確認できます。
単体テスト: より包括的なテストを行うには、セキュリティ ルールの単体テストを作成します。Firebase Local Emulator Suite を搭載した Firebase Studio プレビュー バックエンドを使用すると、これらのテストをローカルで実行し、本番環境ルールの動作をシミュレートできます。これは、複雑なルールロジックを検証し、さまざまなシナリオのカバレッジを確認する堅牢な方法です。デプロイ後、エミュレータを使用する単体テストが想定どおりに動作し、すべてのシナリオを網羅していることを再確認する必要があります。