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

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

このページでは、Dialogflow を使用して、自然言語を理解して自然言語で応答できる Google Chat アプリを作成する方法について説明します。このガイドでは、Google Chat と直接統合された Dialogflow CX を使用します。また、Dialogflow ES Google Chat ガイドに沿って、Dialogflow ES を使用して 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 エージェントは Dialogflow Webhook を使用して、プロジェクト管理システムやチケット発行ツールなどの外部のサードパーティサービスを操作できます。
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. [Test agent in environment] を選択します。
3. [環境] で [ドラフト] を選択します。
4. フローで、[Default Start Flow] を選択します。
5. [ページ] で [Start Page] を選択します。
6. [エージェントに問い合わせる] 作成バーに「Hello」と入力し、Enter キーを押します。エージェントは自己紹介して応答します。
7. テスト用の会話のサンプルを使用してテストを完了します。
Dialogflow CX エージェントが作成されます。Dialogflow CX コンソールに戻ります。メニュー > [Dialogflow CX] をクリックします。

Dialogflow CX コンソールに移動
[エージェント] で、 > [名前をコピー] をクリックします。この名前を保存します。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. [機能] で、[1:1 のメッセージを受信する] と [スペースとグループの会話に参加する] を選択します。
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!私は...」）レスポンスキューに追加されます。エージェントがレスポンスキューをエンドユーザーに送信します。
エンドユーザー: レンタカーを借りたいのですが。エージェント: 車両の受け取り場所はどちらですか？	開始ページの car_rental.reservation_create インテントルートが一致します。セッションが [Pickup Location]（集荷場所）ページに移行します。 [Pickup Location] ページのフォームが完了していないため、エージェントは pickup_location パラメータを使用してユーザーにプロンプトを表示します（「Where would you like to pick up...」）。レスポンスキューに追加されます。エージェントがレスポンスキューをエンドユーザーに送信します。
エンドユーザー: ラスベガスエージェント: 承知しました。集荷場所はラスベガスとなります。エージェント: 降車場所と乗車場所は異なりますか？	エンドユーザー入力により、前の会話ターンでエージェントからリクエストされた pickup_location パラメータに値が入力されます。デフォルトの開始フローの car_rental.return_different_location インテントルートが一致している。 [Pickup Location] ページのフォーム補完ルートが評価され、呼び出されます。フルフィルメント（「集荷の...」）があり、レスポンスキューに追加されます。このレスポンスのパラメータ参照は、エンドユーザーによって指定された実際の値に解決されます。セッションが [Confirm Location] ページに移行します。 [場所の確認] ページには、エントリのフルフィルメント（「配送先住所が異なる場合は...」）が表示され、レスポンスキューに追加されます。エージェントがレスポンスキューをエンドユーザーに送信します。
エンドユーザー: はい。ロサンゼルスで車を返却します。エージェント: ロサンゼルスで降車となります。エージェント: 車の受け取り日時をお知らせください。	デフォルトの開始フローの car_rental.return_different_location インテントルートが一致します。セッションが [集荷場所] ページに移行します。エンドユーザー入力は、前の会話ターンでエージェントによって要求された drop_off_location パラメータを満たします。 [Drop Off Location] ページのフォーム補完ルートが評価され、呼び出されます。これには、レスポンスキューに追加されるフルフィルメント（「OK, yourdrop off...」）が含まれています。セッションが [レンタル期間] ページに移行します。 [Rental Duration]（レンタル期間）ページのフォーム値が不完全であるため、pickup_date_time パラメータ（「What date and time would you like topickup...」など）の入力を求められます。レスポンスキューに追加されます。エージェントがレスポンスキューをエンドユーザーに送信します。
エンドユーザー: 3 月 5 日正午に車を引き取りたいです。エージェント: 車の返却日時をお知らせください。	エンドユーザー入力により、前の会話ターンでエージェントによってリクエストされた pickup_date_time パラメータが設定されます。 [レンタル期間] ページにフォームの値がもう 1 つ不足しているため、drop_off_date_time パラメータ（「返却日時」）を入力するようユーザーに求めるメッセージが表示されます。レスポンスキューに追加されます。エージェントがレスポンスキューをエンドユーザーに送信します。
エンドユーザー: 3 月 15 日正午エージェント: 確認させていただきます。お客様は 2024 年 3 月 5 日午前 00 時 00 分（太平洋標準時）にラスベガスで車両を受け取り、2024 年 3 月 15 日午前 00 時 00 分（太平洋標準時）にロサンゼルスで返却される予定でよろしいでしょうか？	エンドユーザー入力は、前の会話ターンでエージェントによって要求された drop_off_date_time パラメータを満たします。 [レンタル期間を確認] ページに移行します。 [レンタル期間の確認] ページには、エントリのフルフィルメント（「確認のため...」）が表示され、レスポンスキューに追加されます。エージェントがレスポンスキューをエンドユーザーに送信します。
エンドユーザー: はい、ありがとうございます。エージェント: ありがとうございます。次に、車両を選択します。エージェント: エコノミー車と高級車、どちらをご希望ですか？	[レンタル期間の確認] ページの small_talk.confirmation.yes インテントルートが一致します。エージェントは、メッセージ（「次に選択しましょう...」）、レスポンスキューに追加されます。セッションが [Vehicle Disambiguation] ページに移動します。 [Vehicle Disambiguation] ページのフォームは不完全であるため、エージェントは vehicle_type パラメータを使用してユーザーにプロンプト（「エコノミーとラグジュアリーはいかがですか...」）、レスポンスキューに追加されます。エージェントがレスポンスキューをエンドユーザーに送信します。
エンドユーザー: エコノミーでお願いします。エージェント: Cymbal Car と Cymbal Truck のどちらをご希望ですか？	$session.params.vehicle_type="economy_vehicle" インテントルートが一致します。セッションが [エコノミーオプション] ページに移行します。 [エコノミーオプション] ページには、エントリフルフィルメント（「...をご希望ですか？」）が表示され、レスポンスキューに追加されます。エージェントがレスポンスキューをエンドユーザーに送信します。
エンドユーザー: Cymbal Truck エージェント: Cymbal トラックは 1 日あたり $50.33 です。 AM/FM ラジオが付属しており、4 名まで収容可能。支払いに進みますか？エンドユーザー: はい。	$session.params.vehicle_type="Cymbal Truck" インテントルートが一致し、vehicle_model パラメータが入力されます。セッションが [Cymbal Truck の確認] ページに移行します。 [Cymbal Truck の確認] ページには、エントリのフルフィルメント（「Cymbal Truck は 1 日あたり 50.33 ドルです...」）が表示され、レスポンスキューに追加されます。エージェントがレスポンスキューをエンドユーザーに送信します。ユーザーの回答が small_talk.confirmation.yes ルートに一致する。
エージェント: どの種類のカードをご利用になりますか？エンドユーザー: Altostrat エージェント: カード番号を入力してください。エンドユーザー: 1234 1234 1234 1234 エージェント: カードに記載されているお名前を教えてください。エンドユーザー: チャーリーエージェント: 請求先住所を教えていただけますか？エンドユーザー: 1800 Amphibious Blvd. Mountain View, CA エージェント: お支払い先の郵便番号を教えていただけますか？エンドユーザー: 94045 エージェント: 2024 年 3 月 5 日 12:00:00 にラスベガスで Cymbal を受け取ります。返却は 2024 年 3 月 15 日 12:00:00 です。このルートの合計料金は $175.38 です。エージェント: ご利用いただきありがとうございました。今後ともよろしくお願いいたします。	セッションが [お支払い] ページに移行します。 Payment フォームが不完全であるため、エージェントはユーザーに card_type、card_number、billing_name、billing_street_address、billing_zip_code の各パラメータ（「What card type will...」など）の入力を求めます。これらのメッセージは、レスポンスキューに順番に追加され、ユーザーが応答すると送信されます。ユーザーの回答によって各パラメータ値が設定されます。セッションが [レンタルの確認] ページに移行します。 [レンタルの確認] ページには、エントリフルフィルメント（「お受け取りは...」）が表示され、レスポンスキューに追加されます。エージェントがレスポンスキューをエンドユーザーに送信します。セッションは [セッションを終了] ページに移行します。

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 エージェントに送信されるクエリ入力は、Chat メッセージの argumentText フィールドの値に対応しています。メッセージにスラッシュコマンドが含まれている場合は、代わりに text フィールドの値が使用されます。
- CARD_CLICKED イベントの場合、Dialogflow エージェントに送信されるクエリ入力は CARD_CLICKED.functionName 形式になります。ここで、functionName は、インタラクティブカード要素（ボタンなど）に関連付けられた Action オブジェクトの function フィールドの値に対応します。
- 各チャットインタラクションイベントの完全な JSON ペイロードは、クエリパラメータのカスタムペイロードとして Dialogflow に送信されます。Dialogflow Webhook で WebhookRequest.payload フィールドの値をクエリしてアクセスできます。
スラッシュコマンドへの応答と、カードまたはダイアログからのデータの受信に関する考慮事項:
- Dialogflow Chat アプリがスラッシュコマンドを含むメッセージを受信すると、クエリ入力には text フィールドの値のみが含まれます。text フィールドはスラッシュコマンドの名前（/command など）で始まります。このフィールドを使用して、スラッシュコマンドを検出するように Dialogflow エージェントのインテントを構成できます。
- Dialogflow エージェントが Chat インタラクションイベントの 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 プロジェクトに設定する必要があります。異なる Cloud プロジェクトで Dialogflow と Chat を設定する必要がある場合は、中間サーバーを設定して接続を容易にできます。方法については、GitHub の Dialogflow CX との Chat インテグレーションの例をご覧ください。

トラブルシューティング

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

チャット UI にエラーメッセージが表示されない場合でも、チャットアプリのエラーロギングがオンになっている場合は、エラーの修正に役立つ説明的なエラーメッセージとログデータが利用できます。エラーの表示、デバッグ、修正については、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 用アプリを作成するのフィードバックチャットアプリをご覧ください。
Dialogflow ES は、Chat アプリで Dialogflow を使用するもう 1 つの方法です。