このガイドでは、App Prototyping agent を使用して、Gemini in Firebase を活用してフルスタック アプリを迅速に開発して公開する方法について説明します。自然言語プロンプトを使用して、写真またはブラウザ内カメラから食品を識別し、識別された食材を含むレシピを作成する Next.js アプリを生成します。
このガイドで使用する他のテクノロジーは次のとおりです。
ステップ 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 でプロトタイプを作成する] をクリックします。
Gemini はプロンプトに基づいてアプリ ブループリントを生成し、提案されたアプリ名、必要な機能、スタイル ガイドラインを返します。
ブループリントを確認します。必要に応じて、いくつか変更を加えます。たとえば、次のいずれかのオプションを使用して、提案されたアプリ名やカラーパターンを変更できます。
[カスタマイズ] をクリックして、ブループリントを直接編集します。必要に応じて変更を加え、[Save] をクリックします。
チャットペインの [Describe...] フィールドに、明確にするための質問とコンテキストを追加します。画像をアップロードすることもできます。
[このアプリのプロトタイプを作成する] をクリックします。
アプリ プロトタイピング エージェントがアプリのコーディングを開始します。
- アプリが AI を使用するため、Gemini API キーを追加または生成するよう求められます。[自動生成] をクリックすると、App Prototyping agent が Firebase プロジェクトと Gemini API キーをプロビジョニングします。
ステップ 2: テスト、調整、デバッグ、イテレーション
最初のアプリが生成されたら、テスト、調整、デバッグ、イテレーションを行うことができます。
アプリを確認して操作する: コード生成が完了すると、アプリのプレビューが表示されます。プレビューを直接操作してテストできます。詳しくは、アプリをプレビューするをご覧ください。
エラーが発生したら修正する: ほとんどの場合、App Prototyping agent は発生したエラーを修正するよう求めるメッセージを表示します。[エラーを修正] をクリックして、修正を試行します。
自動修正を求めるメッセージが表示されないエラーが発生した場合は、エラーと関連するコンテキスト（「Firebase の初期化コードでこのエラーを修正できますか？」など）をチャット ウィンドウにコピーして Gemini に送信します。
自然言語を使用してテストとイテレーションを行う: アプリを徹底的にテストし、App Prototyping agent を使用して、満足できるまでコードとブループリントをイテレーションします。
Prototyper mode, you can also use the following features: では
[アノテーション] をクリックして、プレビュー ウィンドウを直接利用します。使用可能な図形ツール、画像ツール、テキストツールと、オプションのテキスト プロンプトを使用して、App Prototyping agent で変更する内容を視覚的に記述します。
[選択] をクリックして特定の要素を選択し、App Prototyping agent の手順を入力します。これにより、特定のアイコン、ボタン、テキストの一部、その他の要素をすばやくターゲットにできます。 画像をクリックすると、Unsplash からストック画像を検索して選択することもできます。
必要に応じて、
[プレビュー リンクを共有] をクリックして、Firebase Studio 公開プレビュー版を使用してアプリを一般公開で一時的に共有することもできます。
コード内で直接デバッグとイテレーションを行う:
[コードに切り替え] をクリックして Code ビューを開きます。ここで、アプリのすべてのファイルを表示し、コードを直接変更できます。Prototyper mode at any time. に戻すことができますCode ビューでは、次の便利な機能も使用できます。
Firebase Studio の組み込みのデバッグ機能とレポート機能を使用して、アプリを検査、デバッグ、監査します。
Firebase で Gemini を使用した AI アシスタント: コード内のインラインまたはインタラクティブ チャット（どちらもデフォルトで利用可能）。インタラクティブ チャットでは、問題の診断、解決策の提供、ツールの実行により、アプリの迅速な修正を支援できます。チャットにアクセスするには、ワークスペースの下部にあるスパークル アイコン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 が表示されます。Gemini API 鍵の生成中にプロジェクトが作成されなかった場合は、新しいプロジェクトが作成されます。続行するには、[次へ] をクリックします。
[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 オブザーバビリティを備えた URL とアプリ分析情報とともに [アプリの概要] が表示されます。Firebase で生成されたドメインの代わりに、カスタム ドメイン（example.com や app.example.com など）を使用するには、Firebase コンソールでカスタム ドメインを追加します。
App Hosting の詳細については、App Hosting とその仕組みを理解するをご覧ください。
（推奨）ステップ 6: アプリに Firebase App Check を追加する
Firebase サービスまたは Google Cloud サービスをアプリに統合している場合、Firebase App Check は、未承認のクライアントが Firebase リソースにアクセスするのを防ぐことで、アプリのバックエンドを不正使用から保護します。Google サービス（Firebase や Google Cloud サービスを含む）と独自のカスタマイズされたバックエンドの両方と連携して、リソースを安全に保ちます。
バックエンド リソースを不正使用から保護するため、一般公開するアプリには App Check を追加することをおすすめします。
このセクションでは、App Prototyping agent によって作成されたウェブアプリで reCAPTCHA Enterprise を使用して Firebase Studio 内に App Check を設定する方法について説明します。ただし、Firebase サービスを実装し、カスタム プロバイダを実装できる任意のアプリ内で App Check を設定できます。詳しくは、Firebase App Checkをご覧ください。
reCAPTCHA Enterprise では、最大 10,000 件のアセスメントを無料で利用できます。
ステップ 1: アプリに reCAPTCHA Enterprise を設定する
Google Cloud コンソールの [reCAPTCHA Enterprise] セクションを開きます。
Google Cloud コンソールのプロジェクト選択ツールから Firebase プロジェクトの名前を選択します。
reCAPTCHA Enterprise API を有効にするよう求めるメッセージが表示された場合は、有効にします。
[使ってみる] をクリックし、reCAPTCHA サイトキーの表示名を追加します。
デフォルトの [ウェブ] [アプリケーションの種類] キーを受け入れます。
[ドメインを追加] をクリックしてドメインを追加します。App Hosting ドメイン（
studio--PROJECT_ID.REGION.hosted.appなど）と、アプリで使用している、または使用を予定しているカスタム ドメインを追加します。[次のステップ] をクリックします。
[チャレンジを使用する] は選択しないでください。
[鍵を作成] をクリックします。
Key ID をコピーして保存し、App Check を構成するに進みます。
ステップ ２: App Check を設定する
Firebase コンソールを開き、ナビゲーション メニューから [ビルド] > [App Check] をクリックします。
[使ってみる] をクリックし、アプリの横にある [登録] をクリックします。
[ReCAPTCHA] をクリックして展開し、reCAPTCHA Enterprise 用に生成した Key ID を貼り付けます。
[保存] をクリックします。
ステップ 3: コードに App Check を追加する
Firebase Studio に戻り、Code ビューで、生成したサイトキーを
.envファイルに追加します。NEXT_PUBLIC_RECAPTCHA_SITE_KEY=RECAPTCHA_SITE_KEYFirebase 構成を
.envに保存していない場合は、次のように取得します。Firebase コンソールで [プロジェクトの設定] を開き、アプリに対応するセクションで探します。
Code ビューのターミナルから:
- Firebase にログインする：
firebase auth login - プロジェクトを選択する:
firebase use FIREBASE_PROJECT_ID - Firebase 構成を取得する:
firebase apps:sdkconfig
- Firebase にログインする：
構成を
.envファイルに追加して、次のようにします。NEXT_PUBLIC_FIREBASE_API_KEY=FIREBASE_API_KEY NEXT_PUBLIC_FIREBASE_AUTH_DOMAIN=FIREBASE_AUTH_DOMAIN NEXT_PUBLIC_FIREBASE_PROJECT_ID=FIREBASE_PROJECT_ID NEXT_PUBLIC_FIREBASE_STORAGE_BUCKET=FIREBASE_STORAGE_BUCKET NEXT_PUBLIC_FIREBASE_MESSAGING_SENDER_ID=FIREBASE_MESSAGING_SENDER_ID NEXT_PUBLIC_FIREBASE_APP_ID=FIREBASE_APP_ID NEXT_PUBLIC_RECAPTCHA_SITE_KEY=RECAPTCHA_SITE_KEYアプリコードに App Check を追加します。Gemini に、reCAPTCHA Enterprise を使用して App Check をアプリに追加するよう依頼できます（必ず「reCAPTCHA Enterprise」を指定し、必ず再確認してください）。または、App Check を初期化するの手順に沿って操作します。
サイトを App Hosting に再公開します。Firebase の機能をテストしてデータを生成してみましょう。
Firebase コンソールで [Build] > [App Check] を開き、App Check がリクエストを受信していることを確認します。
クリックして Firebase サービスを検査します。リクエストが届いていることを確認したら、[適用] をクリックして App Check を適用します。
Firebase Authentication の検証と適用を繰り返します。
アプリを App Check に登録した後に、App Check が通常は有効として分類しない環境（ローカルの開発環境や継続的インテグレーション（CI）環境など）でアプリを実行する場合は、実際の証明書プロバイダの代わりに App Check デバッグ プロバイダを使用するアプリのデバッグビルドを作成できます。 詳しくは、ウェブアプリのデバッグ プロバイダで App Check を使用するをご覧ください。
（省略可）ステップ 7: アプリをモニタリングする
Firebase Studioの [アプリの概要] パネルには、アプリに関する主な指標と情報が表示されます。App Hosting に組み込まれたオブザーバビリティ ツールを使用して、ウェブアプリのパフォーマンスをモニタリングできます。サイトがロールアウトされたら、[公開] をクリックして概要にアクセスできます。このパネルでは次のことができます。
- [公開] をクリックして、アプリの新しいバージョンをリリースします。
- アプリへのリンクを共有するか、[アプリにアクセスする] でアプリを直接開きます。
- リクエストの合計数や最新のロールアウトのステータスなど、過去 7 日間のアプリのパフォーマンスの概要を確認します。[詳細を表示] をクリックすると、Firebase コンソールでさらに詳細な情報にアクセスできます。
- 過去 24 時間にアプリが受信したリクエスト数を HTTP ステータス コード別にグラフで表示します。
アプリの概要パネルを閉じた場合は、[公開] をクリックしていつでも再び開くことが可能です。
App Hosting ロールアウトの管理とモニタリングについての詳細は、ロールアウトとリリースを管理するをご覧ください。
（省略可）ステップ 8: デプロイをロールバックする
アプリの連続バージョンを App Hosting にデプロイした場合は、以前のバージョンのいずれかにロールバックできます。これを削除することもできます。
公開済みのサイトをロールバックするには:
Firebase コンソールで App Hosting を開きます。
アプリのバックエンドを見つけて、[表示]、[ロールアウト] の順にクリックします。
ロールバックするデプロイの横にある [その他] をクリックし、[このビルドにロールバックする] を選択して、確認します。
詳細については、ロールアウトとリリースを管理するをご覧ください。
ウェブから App Hosting ドメインを削除するには:
Firebase コンソールで App Hosting を開き、Firebase Studio アプリ セクションで [表示] をクリックします。
[バックエンド情報] セクションで [管理] をクリックします。[ドメイン] ページが読み込まれます。
ドメインの横にある [その他] をクリックし、[ドメインを無効にする] を選択して、確認します。
これにより、ドメインがウェブから削除されます。App Hosting バックエンドを完全に削除するには、バックエンドを削除するの手順に沿って操作します。
（省略可）ステップ 9: デプロイされた機能の Genkit モニタリングを使用する
AI フローコードへのテレメトリーを有効にすると、Genkit の機能のステップ、入力、出力をモニタリングできます。Genkit のテレメトリー機能を使用すると、AI フローのパフォーマンスと使用状況をモニタリングできます。このデータは、改善の余地がある部分の特定、問題のトラブルシューティング、プロンプトとフローの最適化によるパフォーマンスと費用対効果の向上、フローの使用状況の経時的な追跡に役立ちます。
Genkit でモニタリングを設定するには、Genkit AI フローにテレメトリーを追加してから、Firebase コンソールで結果を表示します。
ステップ 1: Firebase Studio の Genkit フローコードにテレメトリーを追加する
コード内でモニタリングを設定するには:
Code ビューにまだ表示されていない場合は、
[コードに切り替える] をクリックして開きます。package.jsonを確認して、インストールされている Genkit のバージョンを検証します。ターミナルを開きます（
Ctrl-Shift-C、macOS ではCmd-Shift-C）。ターミナル内でクリックし、
package.jsonファイルと一致するバージョンを使用して Firebase プラグインをインストールします。たとえば、package.jsonの Genkit パッケージが 1.0.4 の場合、次のコマンドを実行してプラグインをインストールする必要があります。npm i --save @genkit-ai/firebase@1.0.4[エクスプローラ] で
src > ai > flowsを開きます。Genkit フローを含む TypeScript ファイルがflowsフォルダに 1 つ以上表示されます。いずれかのフローをクリックして開きます。
ファイルのインポート セクションの一番下に、以下を追加し
FirebaseTelemetryをインポートして有効にします。import { enableFirebaseTelemetry } from '@genkit-ai/firebase'; enableFirebaseTelemetry();
ステップ 2: 権限を設定する
Firebase Studio は Firebase プロジェクトの設定時に必要な API を有効にしましたが、App Hosting サービス アカウントに権限を付与する必要があります。
権限を設定するには:
Google Cloud IAM コンソールを開き、プロジェクトを選択して、App Hosting サービス アカウントに次のロールを付与します。
- モニタリング指標の書き込み（
roles/monitoring.metricWriter） - Cloud Trace エージェント（
roles/cloudtrace.agent） - ログ書き込み（
roles/logging.logWriter）
- モニタリング指標の書き込み（
App Hosting にアプリを再公開します。
公開が完了したら、アプリを読み込んで使用を開始します。5 分後に、アプリがテレメトリー データのロギングを開始します。
ステップ 3: Firebase コンソールで生成 AI 機能をモニタリングする
テレメトリーが構成されている場合、Genkit はすべてのフローのリクエスト数、成功数、レイテンシを記録します。また、特定のフローごとに、Genkit は安定性指標を収集して、詳細なグラフを表示し、キャプチャされたトレースをログに記録します。
Genkit で実装された AI 機能をモニタリングするには:
5 分後、Firebase コンソールで Genkit を開き、Genkit のプロンプトとレスポンスを確認します。
Genkit は、次の安定性指標をコンパイルします。
- 合計リクエスト数: フローによって受信されたリクエストの合計数。
- 成功率: 正常に処理されたリクエストの割合。
- 95%のレイテンシ: フローの 95% のレイテシ、これは 95% のリクエストが処理されるまでにかかる時間です。
トークン使用量:
- 入力トークン: プロンプトでモデルに送信されたトークン数。
- 出力トークン: レスポンスでモデルによって生成されたトークンの数。
画像の使用:
- 入力画像: プロンプトでモデルに送信される画像の数。
- 出力画像: レスポンスでモデルによって生成された画像の数。
安定性指標を開くと、詳細なグラフが表示されます。
- リクエスト数の推移。
- 成功率の推移。
- 入力トークンと出力トークンの推移。
- レイテンシ（95 パーセンタイルおよび 50 パーセンタイル）の推移。
Genkit について詳しくは Genkit をご覧ください。
次のステップ
- Firebase Studio ワークスペースでアプリを開発する方法を確認する。
- 詳細については、Firebase Studio の AI アシスタントをご覧ください。