アプリ ブループリントの有効性と生成されるコードの品質は、プロンプトの明確さと詳細さに依存します。App Prototyping agent を使用する場合は、アプリの生成とデバッグ時に効果的なプロンプトを表示するための次のガイドラインを考慮してください。
- 具体的にする: アプリの機能、ユーザー インタラクション、データ要件を明確に定義します。可能であれば、具体的なテクノロジーについて尋ねます。たとえば、3D 要素を含むウェブアプリを作成する場合は、Gemini に
three.jsを使用するよう依頼できます。 - サービスを設定するための追加のタスクについて尋ねる: Gemini はアプリのコードを書くことはできますが、実際にサービスを設定したり、API を有効にしたり、リソース（Cloud Storage バケットや Stripe アカウントなど）をプロビジョニングしたりすることはできません。特定のサービスのコードを記述する場合は、そのサービスの設定方法も指定するように Gemini に伝えてください。
- Gemini を使用してプロンプトを絞り込む: Google の Gemini、Code ビューの Firebase で Gemini とチャット、または他の Gemini サーフェスを使用して、プロンプトを絞り込み、最適化します。
- コンテキストを提供する: アプリの目的、ターゲット ユーザー、望ましいユーザー エクスペリエンスに関する背景情報を含めます。
- 例を使用する: 可能であれば、ユーザーがアプリを操作する方法や表示するデータの例を記載します。
- 反復して改善する: 開発を反復的に行う。基本的なリクエストから始めて、機能を追加し、テストして、調整してから、別の機能を追加することを検討してください。
これらのガイドラインに沿って作成することで、Firebase Studio によって生成されるアプリ ブループリントの品質と関連性が大幅に向上し、アプリのデバッグが成功しやすくなります。
追加のプロンプトを使用して回答を絞り込む
最初の結果が期待どおりでない場合は、詳細を追加したり、具体的な指示を提供したりすることで、プロンプトを調整できます。
- 制約を追加する: UI、データモデル、または機能に制約を指定します。
- 例を示す: ユーザーがアプリを操作する方法と表示されるデータの例を示す。
- キーワードを使用する: キーワードを使用して、LLM が目的の出力クラスに関連付ける機能を記述します。たとえば、アプリが Google のデザイン基準に準拠していることを示すプロンプトで マテリアル デザインを使用できます。
- 具体的な変更を依頼する: 生成されたコードまたはブループリントの具体的な変更を依頼します。各機能リクエストを個別のリクエストで追加します。
- モデルに推論を依頼する: 目的の結果が得られない場合は、プロンプトから推論するようにモデルに依頼してみてください。たとえば、「順を追って考えてください。タスクアプリの入力ボックスを作成したいのですが、[タスクを追加] ボタンと [キャンセル] ボタンを含める必要があります。」
これらの手法を使用すると、プロンプトを反復的に調整して、目的の結果を得ることができます。
アプリ ブループリントの効果的なプロンプトの例
以下は、さまざまな種類のアプリで効果的なプロンプトの例です。
シンプルなタスク トラッカー:
Create a simple web app that displays a list of to-do items.
Users should be able to add new items to the list and mark items as complete.
Provide a way to delete items and export the list as a text file.
Use a clean and modern UI using Google Material Design principles.
予算管理アプリ:
A budgeting and expense tracking app with spending categories, charts, and
budget goals. Include a clean dashboard with key insights. It should include
spending categories, charts, and budget goals. The app should allow users to
manually add expenses or upload csv files. The app should also allow users to
upload receipts, then use AI to convert the receipt into an expense entry that
users can edit. Data should be stored in browser cache, with download and
delete options.
Gemini による支援を含むゲームアプリのプロンプト（Markdown）:
Generate a delightful sliding number puzzle game (15-puzzle) with Javascript,
HTML, and CSS.
- **Setup:** Create a 4x4 grid with numbers 1-15 and one empty space. Use a
**solvable shuffling algorithm** to randomize the start.
- **Gameplay:** Allow clicking tiles **adjacent to the empty space** to slide
them. Count and display the number of moves.
- **Timer:** Include a **countdown timer** starting at **120 seconds**
(2 minutes).
- **End Conditions:**
- If solved (numbers 1-15 in order): Alert with an encouraging winning
statement generated by AI.
- If timer reaches 0: Alert with a funny retort generated by AI.
デバッグのヒント
Firebase で Gemini を使用すると、Code ワークスペースまたは App Prototyping agent でチャットを使用してコードをデバッグできます。
Gemini はコードを自動生成できますが、エラーが発生することもあります。エラーを検出すると、修正を試みます。エラー メッセージに記載されている問題を解決できない場合は、次の方法をお試しください。
問題を説明する: チャット インターフェースで、発生している問題をできるだけ明確かつ簡潔に説明します。Gemini はエラー メッセージやログなどのコンテキストにアクセスできますが、コンテキスト全体を理解できない場合があります。エラー メッセージとともに動作を説明すると、Gemini がエラーを迅速に修正しやすくなります。
具体的な質問をする: コードについて直接質問Geminiすることを恐れないでください。たとえば、「この関数で null ポインタ例外が発生する原因は何ですか？」や「この競合状態を防ぐにはどうすればよいですか？」などです。
複雑な問題を分割する: 複雑な問題に対処する場合は、より管理しやすい小さな部分に分割します。各部分を個別にデバッグし、問題を段階的に検討できるよう、Gemini に依頼します。
コードフェンスを使用: コードスニペットを共有する際は、コードフェンスを使用することで、コードが適切にフォーマットされるようにします。これにより、Gemini がコードを読みやすく、理解しやすくなります。
反復処理と改良: Gemini は、最初の試行で完璧なソリューションを提供するとは限りません。回答を確認し、詳細を明確にする質問を行い、必要に応じて追加情報を提供します。
プロンプトのループを回避する: Gemini がループに陥ったり、質問に回答できなかったりする場合は、プロンプトを言い換えるか、追加のコンテキストを提供してみてください。質問を言い換えるだけで、Gemini が質問内容を理解できることもあります。
プロンプトを言い換えてもループが解消されない場合は、次の手法をお試しください。
新しいチャットを開始する: Code ワークスペースの Firebase チャットで Gemini を使用している場合は、新しいチャット セッションを開始して Gemini のコンテキストをリセットします。これにより、Gemini が前の会話で抱いた誤解や前提を解消できます。
反例を提供する: Gemini が誤った前提を立てている場合は、正しい動作を理解できるように反例を提供します。
次のステップ
- App Prototyping agent を使ってみる
- App Prototyping agent のガイドツアーに沿って、アプリを開発、公開、モニタリングする。
- Firebase Studio ワークスペースでアプリケーションを開発する。