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

自然言語を理解して自然言語で応答する Dialogflow CX Google Chat アプリを構築する

このページでは、Dialogflow を使用して自然言語を理解し、自然言語で応答できる Google Chat 用アプリを構築する方法について説明します。このガイドでは、Google Chat と直接統合されている Dialogflow CX を使用します。Dialogflow ES を使用して、Dialogflow ES Google Chat ガイドに沿って Dialogflow ES Google Chat アプリを作成することもできます。

たとえば、レンタカーを利用したいユーザー向けの Chat 用アプリを考えてみましょう。ユーザーは「車を借りたい」と入力するでしょう。Chat 用アプリは「どこで借りますか？」という質問を返すでしょう。こうして、ユーザーとの間で人間同士のような会話が始まります。レンタカーの予約手続きの際に、Chat 用アプリは人間の話し方を理解し、人間のような話し方で応答します。

これはほんの一例です。Dialogflow Chat アプリは、あらゆる種類のやり取りに役立ちます。人間の自然な会話が必要な場合は、Dialogflow Chat アプリが必要です。事前構築済みエージェントを使用すると、Dialogflow でできること（以下など）をすぐに確認できます。

フライトを予約する
診察の予約をスケジュールする
料理の宅配を注文する
小売商品のカタログに関する質問（商品の別の色があるかどうかなど）に回答する

図 1: Dialogflow Chat 用アプリの事前構築済みエージェントを選択する。
図 2. Dialogflow CX でエージェントをテストし、エージェントのロジックと構成が意図したとおりに機能することを確認します。この図は、会話の特定の手順（レンタカーの受け取り場所と返却場所の設定など）に関する一連のトピックページを示し、それらを接続するロジックを構成しています。会話はシミュレータでテストされます。
図 3. Google Cloud コンソールの Chat API 構成ページで、Dialogflow CX エージェントを使用してレスポンスを処理するように Chat 用アプリを構成します。
図 4. Google Chat の Dialogflow Chat アプリでレンタカーの予約について会話している。

目標

環境をセットアップする。
Dialogflow CX エージェントを作成してデプロイします。
Dialogflow CX エージェントを搭載した Chat 用アプリを作成してデプロイします。
Chat 用アプリをテストします。

前提条件

Google Chat へのアクセス権を持つ Business または Enterprise の Google Workspace アカウント。
課金を有効にした Google Cloud プロジェクト。既存のプロジェクトで課金が有効になっていることを確認するには、プロジェクトの課金ステータスを確認するをご覧ください。プロジェクトを作成して課金管理を設定するには、Google Cloud プロジェクトを作成するをご覧ください。

アーキテクチャ

次の図は、Dialogflow で構築された Chat 用アプリのアーキテクチャを示しています。

Dialogflow で実装された Chat 用アプリのアーキテクチャ。

上の図では、Dialogflow Chat アプリを操作するユーザーは、次のような情報の流れになります。

ユーザーが、ダイレクトメッセージまたは Chat スペースで Chat アプリにメッセージを送信します。
Google Cloud にある Dialogflow 仮想エージェントがメッセージを受信して処理し、レスポンスを生成します。
必要に応じて、Dialogflow Webhook を使用して、Dialogflow エージェントはプロジェクト管理システムやチケット発行ツールなどの外部のサードパーティサービスとやり取りできます。
Dialogflow エージェントは、Chat の Chat 用アプリサービスにレスポンスを返します。
回答が Chat スペースに配信されます。

環境を設定する

Google API を使用する前に、Google Cloud プロジェクトで API を有効にする必要があります。1 つの Google Cloud プロジェクトで 1 つ以上の API を有効にできます。

Google Cloud コンソールで、Google Chat API と Dialogflow API を有効にします。

API を有効にする
正しい Cloud プロジェクトで API を有効にしていることを確認し、[次へ] をクリックします。
正しい API を有効にしていることを確認し、[有効にする] をクリックします。

Dialogflow CX エージェントを作成する

Dialogflow CX エージェントは、エンドユーザーとの同時会話を処理する仮想エージェントです。人間の言語のニュアンスを理解する自然言語理解モジュールです。Dialogflow は、会話中のエンドユーザーのテキストをアプリやサービスが理解できる構造化データに変換します。Dialogflow エージェントは、システムに必要な種類の会話が処理されるように設計および構築されます。

Dialogflow エージェントは、コールセンターの担当者と似ています。予想される会話のシナリオに対処するためにトレーニングを行ってください。ただし、トレーニングを過度に行う必要はありません。

Dialogflow CX エージェントを作成する手順は次のとおりです。

Dialogflow CX コンソールで、Dialogflow CX コンソールを開きます。メニュー アイコン > [Dialogflow CX] をクリックします。

Dialogflow CX コンソールに移動
Google Cloud プロジェクトを選択します。プロジェクトを見つけるには、[すべて] をクリックして検索する必要がある場合があります。
事前構築済みエージェントを選択するか、独自のエージェントを作成できるようになりました。エージェントのカスタマイズの詳細を後で確認する場合は、事前構築済みエージェントのいずれかを選択します。これは、エージェントでできることを学習するうえでも役立ちます。

事前構築済みエージェントを選択する手順は次のとおりです。
1. [Use prebuilt agents] をクリックします。
2. 構築済みのエージェントを選択します。このガイドでは、[旅行: レンタカー] を選択します。
  
  エージェントは、使用する機能の数と会話ロジックの洗練度に基づいて、初心者、中級、上級のいずれかに分類されます。中級または上級のエージェントを選択する場合は、Google Cloud コンソールで機能と API を有効にするなど、エージェント固有のカスタマイズと設定が必要になることがあります。
3. [エージェントとしてインポート] をクリックします。
独自のエージェントを作成する手順は次のとおりです。
1. [Create Agent（エージェントを作成）] をクリックします。
2. [自動生成] を選択してデータストアエージェントを作成するか、[独自に構築] を選択して他の種類のエージェントを作成します。
エージェントの構築プロセスの詳細なチュートリアルについては、Dialogflow CX エージェントを作成するをご覧ください。
エージェントの基本設定を構成します。
1. [表示名] に表示名を入力します。
2. お好みのロケーションをお選びください詳細な位置情報の設定を変更する場合は、[編集] をクリックします。
3. 使用するタイムゾーンを選択します。
4. エージェントのデフォルト言語を選択します。エージェントの作成後にデフォルトの言語を変更することはできません。
[作成] をクリックします。Dialogflow CX がエージェントの作成を開始し、エージェントのデフォルトの開始フローが表示されます。
必要に応じて、エージェントをカスタマイズします。エージェントのカスタマイズプロセスの詳細な手順については、Dialogflow CX エージェントを作成するをご覧ください。
ベストプラクティスとして、エージェントをテストします。
1. [Test agent] をクリックします。
2. [環境でエージェントをテストする] を選択します。
3. [環境] で、[下書き] を選択します。
4. Flow で [Default Start Flow] を選択します。
5. Page で [Start Page] を選択します。
6. [Talk to agent] の作成バーに「Hello」と入力して、Enter キーを押します。エージェントが自己紹介で応答します。
7. サンプルテスト会話を行ってテストを完了します。
Dialogflow CX エージェントが作成されます。Dialogflow CX コンソールに戻ります。メニュー アイコン > [Dialogflow CX] をクリックします。

Dialogflow CX コンソールに移動
[Agents] で、 > [Copy name] をクリックします。この名前は、Chat 用アプリを構成するときに使用するため、保存しておきます。

Chat 用アプリを作成して Dialogflow エージェントに接続する

Dialogflow CX エージェントを作成したら、次の手順に沿って Chat 用アプリに変換します。

Google Cloud コンソールで、Google Chat API に移動します。「Google Chat API」を検索し、[Google Chat API]、[管理] の順にクリックします。

Chat API に移動
[構成] をクリックして、Chat 用アプリを設定します。
1. [アプリ名] に「Dialogflow App」と入力します。
2. [アバターの URL] に「https://developers.google.com/workspace/chat/images/quickstart-app-avatar.png」と入力します。
3. [説明] に「Responds to real human conversation」と入力します。
4. [機能] で、[スペースとグループの会話に参加する] を選択します。
5. [接続設定] で [Dialogflow] を選択します。
6. [Dialogflow の設定] で [Dialogflow CX] を選択します。
7. [エージェントまたは環境リソース名] に、Dialogflow CX エージェントを作成するでコピーした Dialogflow CX エージェント名を貼り付けます。
8. [ドメイン内の特定のユーザーおよびグループにこの Chat 用アプリの利用を許可する] を選択し、メールアドレスを入力します。
9. [ログ] で、[エラーを Logging にロギング] を選択します。
[保存] をクリックします。

Chat アプリは、Chat でメッセージを受信して応答する準備ができています。

Chat アプリをテストする

Google Chat でメッセージを送信して、Dialogflow CX Chat アプリをテストします。

信頼できるテスターとして登録した際に指定した Google Workspace アカウントを使用して、Google Chat を開きます。

Google Chat にアクセスする
[ 新しいチャット] をクリックします。
[ユーザーを 1 人以上追加] フィールドに、Chat 用アプリの名前を入力します。
結果から Chat 用アプリを選択します。ダイレクトメッセージが開きます。

注: 結果のリストに Chat 用アプリが表示されない場合は、Google Cloud コンソールの Chat API 構成ページの [公開設定] に Google Workspace アカウントが含まれていることを確認してください。
そのアプリの新しいダイレクトメッセージに、「Hello」と入力して enter を押します。

Dialogflow Chat アプリは、自己紹介で応答します。
サンプルテスト会話を行ってテストを完了します。

テスト会話の例

Dialogflow CX コンソールまたは Google Chat で Dialogflow CX Chat アプリをテストするには、次の会話を行います。この説明により、Dialogflow CX エージェントが会話の各ステップでユーザーの自然言語を解釈し、独自の自然言語レスポンスを生成する方法を理解できます。この会話例は、旅行: レンタカーという事前構築済みエージェントに基づいています。

ダイアログ	説明
エンドユーザー: こんにちはエージェント: こんにちは。私は仮想レンタカーエージェントです。新しいレンタカー予約を開始するお手伝いをいたします。本日はどのようなご用件でしょうか？	Default Start Flow の Default Welcome Intent ルートが呼び出されます。この状態ハンドラのフルフィルメント（「Hi! I'm...") レスポンスキューに追加されます。エージェントがレスポンスキューをエンドユーザーに送信します。
エンドユーザー: レンタカーを借りたいのですが。エージェント: 車両の受け取り場所はどちらをご希望ですか？	スタートページの car_rental.reservation_create インテントルートが一致します。セッションが [受け取り場所] ページに移行します。 [Pickup Location] ページフォームが完了していないため、エージェントは pickup_location パラメータを使用してユーザーにプロンプトを表示します（「Where would you like to pick up...」）。レスポンスキューに追加されます。エージェントがレスポンスキューをエンドユーザーに送信します。
エンドユーザー: ラスベガスエージェント: わかりました。お受け取り場所はラスベガスになります。エージェント: 降車地は乗車地と異なりますか？	エンドユーザー入力は、前の会話ターンでエージェントによって要求された pickup_location パラメータを満たします。 Default Start Flow の car_rental.return_different_location インテントルートが一致します。 [Pickup Location] ページのフォーム補完ルートが評価され、呼び出されます。フルフィルメント（「承知いたしました。お荷物の集荷は...」）があり、レスポンスキューに追加されます。このレスポンスのパラメータ参照は、エンドユーザーによって指定された実際の値に解決されます。セッションが [Confirm Location]（場所の確認）ページに移行します。 [場所の確認] ページには、エントリフルフィルメント（「お届け先は...」）が表示され、レスポンスキューに追加されます。エージェントがレスポンスキューをエンドユーザーに送信します。
エンドユーザー: はい。ロサンゼルスで車を返却します。エージェント: 承知いたしました。お預かり場所はロサンゼルスになります。エージェント: 車両の受け取り希望日時をお知らせください。	Default Start Flow の car_rental.return_different_location インテントルートが一致します。セッションが [Drop Off Location] ページに移行します。エンドユーザー入力は、前の会話ターンでエージェントによって要求された drop_off_location パラメータを満たします。 [Drop Off Location] ページのフォーム補完ルートが評価され、呼び出されます。フルフィルメント（「承知いたしました。お荷物の集荷は...」）があり、レスポンスキューに追加されます。セッションが [レンタル期間] ページに移行します。 [Rental Duration] ページのフォーム値が不完全であるため、ユーザーに pickup_date_time パラメータ（「What date and time would you like to pick up...」）の入力を求めるプロンプトが表示されます。レスポンスキューに追加されます。エージェントがレスポンスキューをエンドユーザーに送信します。
エンドユーザー: 3 月 5 日の正午に車を受け取りたいのですが。エージェント: 車両の返却日時をお知らせください。	エンドユーザー入力は、前の会話ターンでエージェントによって要求された pickup_date_time パラメータを満たします。 [レンタル期間] ページには別のフォーム値が欠落しているため、drop_off_date_time パラメータ（「いつ、どこで返却されますか？」）の入力を求めるメッセージが表示されます。レスポンスキューに追加されます。エージェントがレスポンスキューをエンドユーザーに送信します。
エンドユーザー: 3 月 15 日正午。エージェント: 確認します。車両の受け取り場所はラスベガス、受け取り日時は 2024 年 3 月 5 日 12 時 0 分、返却場所はロサンゼルス、返却日時は 2024 年 3 月 15 日 12 時 0 分です。よろしいでしょうか？	エンドユーザー入力は、前の会話ターンでエージェントによって要求された drop_off_date_time パラメータを満たします。セッションが [Confirm Rental Duration] ページに移行します。 [Confirm Rental Duration] ページには、エントリのフルフィルメント（「確認します...」）が表示されます。レスポンスキューに追加されます。エージェントがレスポンスキューをエンドユーザーに送信します。
エンドユーザー: はい、ありがとうございます。エージェント: ありがとうございます。次に、車両を選択します。エージェント: エコノミー車と高級車のどちらをご希望ですか？	[Confirm Rental Duration] ページの small_talk.confirmation.yes インテントルートが一致します。エージェントは、メッセージ（「承知いたしました。Now let's choose..."）、レスポンスキューに追加されます。セッションが [車両の曖昧さ回避] ページに移行します。 [Vehicle Disambiguation]（車両の曖昧さ回避）ページのフォームが完了していないため、エージェントは vehicle_type パラメータを使用してユーザーにプロンプトを表示します（「Would you like an economy or luxury...」）。レスポンスキューに追加されます。エージェントがレスポンスキューをエンドユーザーに送信します。
エンドユーザー: エコノミーでお願いします。エージェント: Cymbal Car と Cymbal Truck のどちらがよろしいですか？	$session.params.vehicle_type="economy_vehicle" インテントルートが一致します。セッションが [Economy Options] ページに移行します。 [エコノミーオプション] ページには、エントリフルフィルメント（「エコノミーオプションを...」）が表示され、レスポンスキューに追加されます。エージェントがレスポンスキューをエンドユーザーに送信します。
エンドユーザー: Cymbal Truck。エージェント: Cymbal トラックは 1 日あたり $50.33 です。定員は 4 人で、AM/FM ラジオが付属しています。お支払いに進みますか？エンドユーザー: はい。	$session.params.vehicle_type="Cymbal Truck" インテントルートが照合され、vehicle_model パラメータが入力されます。セッションが [Confirm Cymbal Truck] ページに移行します。 [Confirm Cymbal Truck] ページには、エントリのフルフィルメント（「Cymbal Truck は 1 日あたり $50.33 です...」）が表示され、レスポンスキューに追加されます。エージェントがレスポンスキューをエンドユーザーに送信します。ユーザーのレスポンスが small_talk.confirmation.yes ルートに一致します。
エージェント: どのカードの種類をご利用になりますか？エンドユーザー: Altostrat エージェント: カード番号を入力してください。エンドユーザー: 1234 1234 1234 1234 エージェント: カードに記載されているお名前をお知らせください。エンドユーザー: Charlie エージェント: 請求先の住所を教えてください。エンドユーザー: 1800 Amphibious Blvd. Mountain View, CA エージェント: 請求先の郵便番号は何ですか？エンドユーザー: 94045 エージェント: Cymbal Car のお受け取りは 2024 年 3 月 5 日 12 時 0 分、ご返却は 2024 年 3 月 15 日 12 時 0 分にラスベガスで行われます。このルートの合計料金は $175.38 になります。エージェント: ご利用いただきありがとうございました。どうぞ良い一日をお過ごしください。	セッションが [お支払い] ページに移行します。 [Payment] フォームが完了していないため、エージェントは card_type、card_number、billing_name、billing_street_address、billing_zip_code パラメータ（「What card type will...」）についてユーザーに尋ねます。これらはレスポンスキューに順次追加され、ユーザーが応答すると送信されます。ユーザーの回答によって各パラメータ値が設定されます。セッションが [レンタル確認] ページに移行します。 [レンタル確認] ページには、エントリフルフィルメント（「お受け取りは...」）が表示され、レスポンスキューに追加されます。エージェントがレスポンスキューをエンドユーザーに送信します。セッションが [End Session] ページに移行します。

Dialogflow からカードメッセージを送信する

Dialogflow は、テキストメッセージまたはカードメッセージで応答できます。カードメッセージで応答するには、フルフィルメントでカスタムペイロードとして指定します。

次の JSON は、フルフィルメントでカードメッセージをカスタムペイロードとして送信する方法を示しています。

json

{
  'cardsV2': [{
    'cardId': 'createCardMessage',
    'card': {
      'header': {
        'title': 'A card message!',
        'subtitle': 'Sent from Dialogflow',
        'imageUrl': 'https://developers.google.com/chat/images/chat-product-icon.png',
        'imageType': 'CIRCLE'
      },
      'sections': [
        {
          'widgets': [
            {
              'buttonList': {
                'buttons': [
                  {
                    'text': 'Read the docs!',
                    'onClick': {
                      'openLink': {
                        'url': 'https://developers.google.com/workspace/chat'
                      }
                    }
                  }
                ]
              }
            }
          ]
        }
      ]
    }
  }]
}

制限事項と考慮事項

Chat インタラクションイベントは、サポートが限定的であり、いくつかの考慮事項があります。
- 次のインタラクションイベントタイプがサポートされています。
  - MESSAGE
  - ADDED_TO_SPACE
  - CARD_CLICKED
- MESSAGE イベントまたは ADDED_TO_SPACE イベントの場合、Dialogflow エージェントに送信されるクエリ入力は、チャットメッセージの argumentText フィールドの値に対応します。メッセージにスラッシュコマンドが含まれている場合は、代わりに text フィールドの値が使用されます。
- CARD_CLICKED イベントの場合、Dialogflow エージェントに送信されるクエリ入力は CARD_CLICKED.functionName としてフォーマットされます。ここで、functionName は、インタラクティブカード要素（ボタンなど）に添付された Action オブジェクトの function フィールドの値に対応します。
- 各 Chat インタラクションイベントの完全な JSON ペイロードは、クエリパラメータのカスタムペイロードとして Dialogflow に送信されます。WebhookRequest.payload フィールドの値をクエリすることで、Dialogflow Webhook を使用してアクセスできます。
スラッシュコマンドへの応答とカードまたはダイアログからのデータの受信に関する考慮事項:
- Dialogflow Chat 用アプリがスラッシュコマンドを含むメッセージを受信すると、クエリ入力には text フィールドの値のみが含まれます。text フィールドはスラッシュコマンドの名前（/command など）で始まり、これを使用して Dialogflow エージェントのインテントを構成し、スラッシュコマンドを検出できます。
- Dialogflow エージェントがチャットインタラクションイベントの JSON ペイロードを処理する必要がある場合は、Dialogflow Webhook を使用して、クエリパラメータのカスタムペイロードを検査できます。
- Dialogflow エージェントからダイアログを表示するには、DIALOG アクションレスポンスを含むメッセージを含む単一のカスタム JSON ペイロードで応答します。
- カードから入力されたデータを処理するために、Dialogflow エージェントはテキスト CARD_CLICKED で始まるインテントを検出し、適切なアクションを含む単一のカスタム JSON ペイロードで応答できます。
リンクのプレビューはサポートされていません。
Dialogflow エージェントが 1 つのメッセージのみで応答する場合、そのメッセージは Google Chat に同期的に送信されます。Dialogflow エージェントが複数のメッセージで応答する場合、各メッセージに対して Chat API の spaces.messages リソースで create メソッドを 1 回呼び出すことで、すべてのメッセージが Chat に非同期で送信されます。
Dialogflow CX と Chat のインテグレーションを使用する場合は、Dialogflow エージェントと Chat 用アプリを同じ Google Cloud プロジェクトに設定する必要があります。Dialogflow と Chat を異なる Cloud プロジェクトで設定する必要がある場合は、接続を容易にするための中間サーバーを設定できます。方法については、GitHub の Dialogflow CX のチャット統合の例をご覧ください。

トラブルシューティング

Google Chat 用アプリまたはカードがエラーを返すと、Chat インターフェースに「エラーが発生しました」というメッセージが表示されます。または「リクエストを処理できません。」と表示されることがあります。Chat UI にエラーメッセージが表示されない場合でも、Chat 用アプリやカードで予期しない結果が生じることがあります。たとえば、カードメッセージが表示されないことがあります。

Chat UI にエラーメッセージが表示されない場合でも、Chat 用アプリのエラーロギングが有効になっている場合は、エラーの修正に役立つ説明的なエラーメッセージとログデータを利用できます。エラーの表示、デバッグ、修正については、Google Chat のエラーのトラブルシューティングと修正をご覧ください。

クリーンアップ

このチュートリアルで使用したリソースについて、Google Cloud アカウントに課金されないようにするには、Cloud プロジェクトを削除することをおすすめします。

注意: プロジェクトを削除すると、次のような影響があります。

プロジェクト内のすべてのものが削除されます。このチュートリアルで既存のプロジェクトを使用した場合、それを削除すると、そのプロジェクトで行った他の作業もすべて削除されます。
カスタムプロジェクト ID が失われます。このプロジェクトを作成したときに、将来使用するカスタムプロジェクト ID を作成した可能性があります。appspot.com の URL など、プロジェクト ID を使用する URL を保持するには、プロジェクト全体ではなく、プロジェクト内の選択したリソースを削除します。

複数のチュートリアルとクイックスタートを実施する予定がある場合は、プロジェクトを再利用すると、プロジェクトの割り当て上限を超えないようにできます。

Google Cloud コンソールで、[リソースの管理] ページに移動します。メニュー アイコン > [IAM と管理] > [リソースの管理] をクリックします。
Resource Manager に移動
プロジェクトリストで、削除するプロジェクトを選択し、[削除] をクリックします。
ダイアログでプロジェクト ID を入力し、[シャットダウン] をクリックしてプロジェクトを削除します。

Dialogflow CX は、Dialogflow エージェントの設計にステートマシンアプローチを採用しています。これにより、会話を明確かつ明示的に制御して、エンドユーザーのエクスペリエンスと開発ワークフローを改善できます。Dialogflow Chat 用アプリを構築する場合は、Dialogflow CX を使用することをおすすめします。
- エージェントの構築と構成の詳細については、Dialogflow CX エージェントをご覧ください。
- エージェントの構築と構成の手順については、Dialogflow CX エージェントを作成するをご覧ください。
- Codelab: Dialogflow CX データストアエージェントを構築する方法の例については、Codelab のGemini を使用して Google Chat 用アプリを構築するのナレッジチャットアプリをご覧ください。
- Codelab: Dialogflow CX 会話エージェントの構築方法の例については、Codelab のGemini を使用して Google Chat 用アプリを構築するのフィードバック Chat 用アプリをご覧ください。
Dialogflow ES は、チャットアプリで Dialogflow を使用するもう 1 つの方法です。