このページは Cloud Translation API によって翻訳されました。

Firebase Studio を使ってみる

1. 概要

この Codelab では、Firebase Studio のアプリプロトタイピングエージェントを使用して、新しい言語の学習に役立つアプリを作成します。その後、アプリを改良して改善し、必要に応じて Firebase App Hosting に公開します。

言語学習アプリのアニメーション GIF

学習内容

Firebase Studio でのプロンプトのベストプラクティス
アプリを反復して機能を加え、バグを修正する
Firebase App Hosting にアプリを公開して他のユーザーと共有する
App Hosting アプリの概要パネルで主要な指標を追跡する

必要なもの

任意のブラウザ（Google Chrome など）
Firebase プロジェクトの作成と管理に使用する Google アカウント

2. App Prototyping エージェントを使用してアプリを生成する

アプリプロトタイピングエージェントは、Gemini in Firebase を使用してアプリを構築します。同じプロンプトを使用しても、結果がこの Codelab で紹介されているものとまったく同じようにはならないことがあります。行き詰まった場合は、この Codelab の複数のチェックポイントでラボを再開するためにワークスペースに追加できる一連のファイルが用意されています。

Google アカウントにログインし、Firebase Studio を開きます。

[AI を使用してアプリのプロトタイプを作成する] フィールドに、作成するアプリの説明を入力します。この Codelab では、物語、フラッシュカード、AI チューターを通じて新しい言語を学習できるアプリを作成します。次のようなプロンプトを入力します。

An app to help someone learn a new language. The app should include
AI-generated stories in the target language, where users can click vocab
words or the entire story to see it in English. A different section
includes flashcards, where the user is shown a word in the chosen language
and can click it to flip the card and see the word in English. The final
section includes an AI chatbot that allows the user to have simple
conversations in the chosen language or ask questions in English about
what a word means or how to form a sentence in the chosen language. All
content should be beginner-friendly, focusing on basic greetings, common
questions/answers, and vocabulary relevant to the lessons or stories.
To start, the app should teach the user French, although we might add
additional languages in the future.

[AI でプロトタイプを作成する] をクリックします。
提案されたアプリブループリントを確認します。[カスタマイズ] をクリックして、ブループリントを編集します。
1. [アプリ名] を「Speak Easy」に変更します。
2. カラーパターンを次のように変更します。
```
Primary color: Asparagus green (#98BF64) for a calm and friendly feel.
Secondary color: Light parchment (#F5EBCD) to complement the primary color.
Accent: Marigold (#FFB833) for interactive elements and call-to-action buttons.
```
配色やレイアウトを画像として送信する場合は、 [添付ファイル] オプションをクリックして、プロンプトまたはブループリントのプロセス中に画像をアップロードします。画像のサイズは 3 MiB 未満である必要があります。
[保存] をクリックします。
ブループリントに更新が組み込まれたら、[このアプリのプロトタイプを作成する] をクリックします。
このアプリには AI 要素が含まれているため、エージェントは Gemini キーの入力を求めます。独自の Gemini API キーを追加するか、[自動生成] をクリックして Gemini API キーを生成します。[自動生成] をクリックすると、Firebase Studio が Firebase プロジェクトを作成し、Gemini API キーを生成します。
アプリプロトタイピングエージェントは、アプリブループリントを使用してアプリの最初のバージョンを作成します。完了すると、アプリのプレビューが Gemini チャットインターフェースとともに表示されます。アプリをテストしてみましょう。思い描いたとおりに表示されなくても、次のセクションで新しい機能を追加してデザインを調整する方法について説明します。

3. （省略可）コードを取得する

行き詰まった場合や、サンプルアプリをより詳しく確認したい場合は、Codelab のチェックポイントで提供されているサンプルファイルを使用してください。

フォルダ内のファイルをダウンロードします。
Firebase Studio で、 [コードに切り替え] をクリックしてコードビューを開きます。
ダウンロードしたファイルを Firebase Studio のエクスプローラペインにドラッグします。ファイルが既存のファイルを置き換えることを許可します。
[Switch to Prototyper] をクリックして、アプリのサンプルバージョンを使用して Codelab を続行します。

4. アプリの機能をテスト、反復、デバッグする

アプリをプレビューすると、バグや予期しない機能が見つかることがあります。アプリのサンプルバージョンでは、次の変更と修正が追加されます。

AI ストーリージェネレータで、ユーザーが語彙の単語をクリックして英語の定義を取得できるようにする必要があります。
フラッシュカードはフランス語で表示され、クリックすると英語に切り替わります。
ユーザーは設定ページに移動して、フランス語ではなく日本語の学習に切り替えることができるはずです。

目標 1: AI ストーリージェネレーターに語彙を追加する

省略可: この時点からアプリのサンプルバージョンを使用するには、これらのファイルをダウンロードして、コードビューの Firebase Studio のエクスプローラペインにドラッグします。

チャットインターフェースで、追加する機能を説明します。

In the AI Story Generator, users should be able to click vocab words or
phrases to get the definition in English. Words or phrases should be
underlined to indicate they can be clicked.

プレビューウィンドウでアプリをテストします。アプリのデザインは後で更新するので、今は機能だけに集中してください。

アプリが想定どおりに機能しない場合は、App Prototyping エージェントに調整を求めるプロンプトを送信し続けます。例:

IMPORTANT: Be sure to underline and provide a definition for most words
and phrases, and ESPECIALLY all nouns and verbs. If a word or phrase in the
story appears multiple times, only underline and define the first instance.

[コードに切り替え] をクリックしてコードビューを開きます。ここで、アプリのすべてのファイルを表示し、コードを直接変更できます。Gemini で解決できないバグがある場合は、ファイルを手動で編集する方が簡単なことがあります。準備ができたら、[プロトタイパーに切り替え] モードに切り替えて、App Prototyping エージェントの使用を続行します。

AI ストーリージェネレーターがフランス語のストーリーを作成し、単語に下線が引かれているアニメーション GIF

目標 2: フラッシュカードに翻訳を追加する

上記と同じ手順で、チャットインターフェースを使用して機能を説明し、プレビューウィンドウでテストしてから、追加のプロンプトまたはコードビューを使用してフラッシュカードに翻訳を追加します。次のようなプロンプトを試してください。

 The flash cards should appear in the target language to start, then switch to
 English when clicked.

App Prototyping エージェントがバグを認識しないことがあります。次のように、何が見えていて、何を修正する必要があるかを説明すると、より効果的です。

 The flip button for the flash cards isn't working. Can you debug it? All flash
 cards are only showing in English.

フランス語と英語を切り替えるフラッシュカードのアニメーション GIF

目標 3: 新しい言語を追加する

次のようなプロンプトを試してください。

 Add a settings section to the app, where users can swap to a new language
 to learn. Add Japanese to the list of languages the user can pick from. If
 the user selects Japanese, the AI-generated stories, flash cards, and chatbot
 tutor should all use Japanese instead of French.

アプリを日本語に切り替えるアニメーション GIF

5. アプリの設計を繰り返し行う

アプリに必要な機能がすべて実装されたので、次はスタイルに取り組みましょう。

アプリのカラーパターンを変更する

使用する色を具体的に指定することも、App Prototyping エージェントに任せることもできます。チャットインターフェースで、添付ファイルアイコン [添付ファイル] オプションをクリックして、使用したい色やスタイルの画像をアップロードすることもできます。プロンプトを使用する場合は、次の方法をお試しください。

 Add color to the design of the app. Use modern, clean colors that adhere
 to accessibility standards and have a calming feel.

アプリで使用されるテキストを更新する

たとえば、「AI Chatbot Tutor」ではなく「チャット」とだけ表示したい場合:

 Change the text "AI Chatbot Tutor" to "Chat".

アプリの UI を調整して、より直感的に操作できるようにする

たとえば、ユーザーがボタンを押してテキストを送信する代わりに、キーボードの Return を押せるようにしたいとします。

 In the story generator section, allow the user to press the return key on
 the keyboard to submit the text.

ライトモードとダークモードをユーザーが選択できるオプションを追加

多くのユーザーは、アプリのテーマを明るいものと暗いものから選択できるオプションを好む可能性があります。この切り替えを見つけるのに論理的な場所はどこかを検討してください。

 Add an icon in the upper right corner to dynamically switch the color theme of
 the app between dark mode and light mode.

プロンプトとデバッグのヒント

プロンプトのサポートを受ける: 必要な内容を App Prototyping エージェントに説明できない場合は、Gemini for Google にプロンプトの調整を依頼してみてください。効果的なプロンプトの詳細
他のデバイスでテストする: プロトタイプモードで、 [プレビューリンクを共有] をクリックして、他のデバイスでアプリをテストします。
組み込みツールを使用する: コードビューで、Firebase Studio の組み込みのデバッグ機能とレポート機能を使用して、アプリを検査、デバッグ、監査します。
シンプルに始める: 一度に 1 つの機能に取り組む。プロトタイプでは、まず基本的な機能セットから始め、それらが期待どおりに動作したら拡張することを検討してください。
バグを説明する: 動作しないものがある場合は、現在の動作を App Prototyping エージェントに説明し、次に希望する動作を説明します。
必要に応じてロールバックする: アプリプロトタイピングエージェントがプロンプトを誤解したり、解決が難しい問題が発生したりした場合は、[復元] ボタンをクリックしてアプリの以前のバージョンにロールバックし、別のプロンプトで再試行します。

6. （省略可）アプリを公開する

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

[公開] をクリックして新しい Firebase プロジェクトを作成し、App Hosting の設定を開始します。[アプリを公開する] ペインが表示されます。
[Firebase プロジェクト] の手順では、作成された Firebase プロジェクトの名前をメモして、[次へ] をクリックします。
[Cloud 請求先アカウントをリンク] の手順では、次のいずれかを選択します。
1. Firebase プロジェクトにリンクする Cloud 請求先アカウントを選択します。
2. Cloud 請求先アカウントをお持ちでない場合、または新しいアカウントを作成したい場合は、[Cloud 請求先アカウントを作成] をクリックします。Google Cloud のテキストが開き、そこで新しいセルフサービスの Cloud 請求先アカウントを作成できます。アカウントを作成したら、Firebase Studio に戻り、[Link Cloud Billing] リストからアカウントを選択します。
[次へ] をクリックします。Firebase Studio は、ワークスペースに関連付けられたプロジェクトに請求先アカウントをリンクします。このプロジェクトは、Gemini API キーを自動生成したとき、または [公開] をクリックしたときに作成されます。その後、App Hosting は Google Cloud にアプリのフルマネージド環境を設定します。
[最初のロールアウトを作成する] をクリックします。Firebase Studio で App Hosting のロールアウトが開始されます。完了するまでに最大で 10 分かかります。裏側で行われていることの詳細については、App Hosting のビルドプロセスをご覧ください。
ロールアウトが完了すると、App Hosting オブザーバビリティを備えた URL とアプリ分析情報とともに [アプリの概要] が表示されます。Firebase で生成されたドメインの代わりに、カスタムドメイン（example.com や app.example.com など）を使用するには、Firebase テキストでカスタムドメインを追加します。

App Hosting の詳細については、App Hosting とその仕組みについてをご覧ください。

7. （省略可）アプリをモニタリングする

App Hosting の [アプリの概要] パネルには、アプリに関する主な指標と情報が表示されます。App Hosting に組み込まれたオブザーバビリティツールを使用して、ウェブアプリのパフォーマンスをモニタリングできます。サイトがロールアウトされたら、[公開] をクリックして概要にアクセスできます。このパネルでは次のことができます。

[ロールアウトを作成] をクリックして、アプリの新しいバージョンをリリースします。
アプリへのリンクを共有するか、[アプリにアクセスする] でアプリを直接開きます。
リクエストの合計数や最新のロールアウトのステータスなど、過去 7 日間のアプリのパフォーマンスの概要を確認します。[詳細を表示] をクリックすると、Firebase テキストでさらに詳細な情報にアクセスできます。
過去 24 時間にアプリが受信したリクエスト数を HTTP ステータスコード別にグラフで表示します。

アプリの概要パネルを閉じた場合は、[公開] をクリックしていつでも再び開くことが可能です。

App Hosting のロールアウトの管理とモニタリングの詳細については、ロールアウトとリリースを管理するをご覧ください。

8. まとめ

これで完了です。Firebase Studio を使用してアプリを作成しました。アプリには、拡張辞書、言語の追加、音声、アニメーション、難易度の選択など、さまざまな機能を追加できます。アプリで引き続き遊ぶことも、新しいものを作成することもできます。