App Prototyping エージェントを使用してフルスタックウェブアプリを開発、公開、モニタリングする

このガイドでは、App Prototyping agent を使用して、Gemini in Firebase を活用してフルスタックアプリを迅速に開発して公開する方法について説明します。自然言語プロンプトを使用して、ログインしたユーザーが提供した写真またはブラウザ内カメラから食品を識別し、識別された食材を含むレシピを作成する Next.js アプリを生成します。ユーザーは、レシピを検索可能なデータベースに保存するかどうかを選択できます。

その後、アプリを調整して改善し、最終的に Firebase App Hosting に公開します。

このガイドで使用する他のテクノロジーは次のとおりです。

ステップ 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.
```
ヒント: 最適な結果を得るには、プロンプトをできるだけ具体的にします。必要な機能、ユーザーワークフロー、データ要件を含めます。必要に応じて、[プロンプトを改善] をクリックして、最初のプロンプトを改良するよう Gemini にリクエストします。また、AI を使用した最も効果的な開発プロセスはイテレーションであり、Gemini と連携して機能を継続的に改良して追加できることを理解してください。詳しくは、効果的なプロンプトの作成方法をご覧ください。
必要に応じて、画像を追加してプロンプトに添えます。たとえば、アプリで使用するカラーパターンを含む画像をアップロードし、Firebase Studio にその画像を使用するよう指示できます。画像のサイズは 3 MiB 未満である必要があります。
[AI でプロトタイプを作成する] をクリックします。

アプリプロトタイピングエージェントは、プロンプトに基づいてアプリブループリントを生成し、提案されたアプリ名、必要な機能、スタイルガイドラインを返します。
ブループリントを確認します。必要に応じて、いくつかの変更を加えます。たとえば、次のいずれかのオプションを使用して、提案されたアプリ名やカラーパターンを変更できます。
- [カスタマイズ] をクリックして、ブループリントを直接編集します。必要に応じて変更を加え、[Save] をクリックします。
- チャットペインの [Describe...] フィールドに、明確にするための質問とコンテキストを追加します。画像をアップロードすることもできます。
[このアプリのプロトタイプを作成する] をクリックします。

重要: Gemini は、事実に反するもっともらしい出力を生成する場合があります。Google の考え方を反映していない不正確な情報を回答することがあります。Gemini からの出力はすべて、使用する前に検証してください。また、生成されるコードをテストせずに本番環境で使用しないでください。個人を特定できる情報（PII）やユーザーデータをチャットに入力しないでください。
アプリプロトタイピングエージェントがアプリのコーディングを開始します。
- アプリで AI を使用しているので、Gemini API キーを追加または生成するよう求められます。[自動生成] をクリックすると、App Prototyping agent が Firebase プロジェクトと Gemini API キーをプロビジョニングします。
重要: [自動生成] を選択すると、App Prototyping agent が Firebase Studio　ワークスペースの名前に一致する接頭辞を持つ Firebase プロジェクトを代わりに作成し、プロジェクトに新しい Gemini API キーを作成します。また、Firebase Studio ワークスペース内のキーを .env ファイルに保存します。新しいプロジェクトにいつでもアクセスするには、ページ上部のプロジェクト名をクリックします。今後、コピーまたは削除するために Gemini API キーにアクセスするには、Google Cloud コンソールを使用します。

ステップ 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.
```
ヒント: アプリプロトタイピングエージェントは、初期のアプリブループリントではなく、イテレーションフェーズでアプリに Cloud Firestore と Firebase Authentication を追加できます。
エラーが発生したら修正する: ほとんどの場合、App Prototyping agent は発生したエラーを修正するよう求めるメッセージを表示します。[エラーを修正] をクリックして、修正を試行します。

自動修正を求めるメッセージが表示されないエラーが発生した場合は、エラーと関連するコンテキスト（「Firebase の初期化コードでこのエラーを修正できますか？」など）をチャットウィンドウにコピーして Gemini に送信します。

ヒント: 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 をクリックします。
  
  注: App Prototyping agent で作成されたアプリは、デフォルトで Prototyper chat in Code view. To use Gemini interactive chat になります。Gemini で [+] をクリックし、[新しいチャット] を選択します。Prototyper chat, click history Recent chats, and then choose Prototyper chat.
  に戻るには、
- Firebase Local Emulator Suite にアクセスして、データベースと認証データを表示します。ワークスペースでエミュレータを開くには:
  1. [コードに切り替え] をクリックし、Firebase Studio 拡張機能（Ctrl+',Ctrl+'、macOS では Cmd+',Cmd+'）を開きます。
  2. [バックエンドポート] までスクロールして展開します。
  3. [ポート 4000] に対応する [操作] 列で、[新しいウィンドウで開く] をクリックします。
生成 AI 機能のパフォーマンスをテストして測定する: Genkit デベロッパー UI を使用して、Genkit AI フローのを実行、さまざまなモデルのテスト、デバッグ、操作、プロンプトの調整ができます。

Genkit デベロッパー UI に Genkit フローを読み込んでテストを開始するには:
1. Firebase Studio ワークスペースのターミナルで、次のコマンドを実行して Gemini API キーをソースし、Genkit サーバーを起動します。
```
 npm run genkit:watch
```
2. Genkit デベロッパー UI のリンクをクリックします。新しいウィンドウで Genkit デベロッパー UI が開き、フロー、プロンプト、エンベッダー、使用可能なさまざまなモデルが表示されます。
Genkit デベロッパー UI の詳細については、Genkit のデベロッパーツールをご覧ください。

（省略可）ステップ 3: App Hosting を使用してアプリを公開する

アプリをテストしてワークスペースで問題がなければ、Firebase App Hosting を使用してウェブに公開できます。

App Hosting を設定すると、Firebase Studio によって Firebase プロジェクトが作成されます（Gemini API キーの自動生成またはその他のバックエンドサービスによってまだ作成されていない場合）。また、Cloud Billing アカウントのリンク手順が示されます。

アプリを公開するには:

[公開] をクリックして Firebase プロジェクトを設定し、アプリを公開します。[アプリを公開する] ペインが表示されます。

重要: Gemini API キーを自動生成しなかった場合や、App Prototyping agent に Firebase プロジェクトの作成を求めるプロンプトが表示されなかった場合、[公開] をクリックすると、Firebase Studio が代わりに Firebase プロジェクトをプロビジョニングします。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 App Hosting には Cloud Billing アカウントが必要です。請求先アカウントを Firebase プロジェクトにリンクすると、プロジェクトは自動的に従量課金制の Blaze お支払いプランにアップグレードされ、Gemini API と他の Firebase サービスと Google Cloud サービスの使用量は有料のティアにアップグレードされます。無料割り当てを超える有料サービスの使用量については課金されます。詳細については、App Hosting の費用について、Firebase の料金、Gemini Developer 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 CLI を使用してセキュリティルールをデプロイすると、Firebase コンソール内の既存のルールが、プロジェクトディレクトリで定義したルールで上書きされます。そのため、Firebase コンソールでセキュリティルールを定義または編集する場合は、必ずプロジェクトディレクトリで定義したルールも更新してください。
単体テスト: より包括的なテストを行うには、セキュリティルールの単体テストを作成します。Firebase Local Emulator Suite を搭載した Firebase Studio プレビューバックエンドを使用すると、これらのテストをローカルで実行し、本番環境ルールの動作をシミュレートできます。これは、複雑なルールロジックを検証し、さまざまなシナリオのカバレッジを確認する堅牢な方法です。デプロイ後、エミュレータを使用する単体テストが想定どおりに動作し、すべてのシナリオを網羅していることを再確認する必要があります。