自然言語を理解して自然言語で応答する 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 の機能をすぐに試すことができます。たとえば、次のようなことができます。

• フライトを予約する
• 医師の診察のスケジュールを設定する
• 料理のデリバリーを注文する
• 小売商品のカタログに関する質問（商品の他の色の在庫があるかどうかなど）に回答する

目標

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

前提条件

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

アーキテクチャ

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

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

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

環境を設定する

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

   API を有効にする

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

3. 正しい API を有効にしていることを確認し、[有効にする] をクリックします。

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

Dialogflow CX エージェントは、エンドユーザーとの同時会話を処理する仮想エージェントです。人間が使う言語のニュアンスを理解する自然言語理解モジュールです。Dialogflow は、会話中のエンドユーザーのテキストを、アプリやサービスが理解できる構造化データに変換します。このラボでは、システムに求められている会話を処理するように Dialogflow エージェントを設計して作成します。

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

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

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

   Dialogflow CX コンソールに移動

2. Google Cloud プロジェクトを選択します。プロジェクトを見つけるには、[すべて] をクリックして検索する必要がある場合があります。

3. 事前構築済みエージェントを選択するか、独自のエージェントを作成できるようになりました。エージェントのカスタマイズについて後で詳しく調べる場合は、事前構築済みエージェントのいずれかを選択します。これは、エージェントで何ができるかを学ぶうえでも役立ちます。

   事前構築済みエージェントを選択する手順は次のとおりです。

   1. [Use prebuilt agents] をクリックします。

   2. 構築済みのエージェントを選択します。このガイドでは、[旅行: レンタカー] を選択します。

      エージェントが使用する機能の数と、会話ロジックの洗練度に基づいて、エージェントは初心者、中級者、上級者として評価されます。中級または上級のエージェントを選択する場合は、Google Cloud コンソールで機能と API を有効にするなど、エージェント固有のカスタマイズと設定が必要になることがあります。

   3. [エージェントとしてインポート] をクリックします。

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

   1. [Create agent] をクリックします。
   2. [自動生成] を選択してデータストア エージェントを作成するか、[独自に構築] を選択して他の種類のエージェントを作成します。

   エージェントの構築プロセスの詳細なチュートリアルについては、Dialogflow CX エージェントを作成するをご覧ください。

4. エージェントの基本設定を構成します。

   1. [表示名] に表示名を入力します。
   2. お好みのロケーションをお選びください位置情報の設定に関する詳細設定を変更する場合は、[編集] をクリックします。
   3. 使用するタイムゾーンを選択します。
   4. エージェントのデフォルト言語を選択します。 エージェントのデフォルトの言語は、作成後に変更できません。

5. [作成] をクリックします。Dialogflow CX がエージェントの作成を開始し、エージェントのデフォルトの開始フローを表示します。

6. 必要に応じて、エージェントをカスタマイズします。エージェントのカスタマイズ プロセスの詳細な手順については、Dialogflow CX エージェントを作成するをご覧ください。

7. ベスト プラクティスとして、エージェントをテストします。

   1. [Test agent] をクリックします。
   2. [環境内でエージェントをテストする] を選択します。
   3. [Environment] で [Draft] を選択します。
   4. [フロー] で、[デフォルトの開始フロー] を選択します。
   5. Page で [Start Page] を選択します。
   6. [Talk to agent] の入力バーに「Hello」と入力し、Enter キーを押します。エージェントが自己紹介して応答します。
   7. サンプル テストの会話を行って、テストを完了します。

8. Dialogflow CX エージェントが作成されます。Dialogflow CX コンソールに戻ります。[メニュー] menu > [Dialogflow CX] をクリックします。

   Dialogflow CX コンソールに移動

9. [エージェント] で、more_vert > [名前をコピー] をクリックします。この名前は、Chat 用アプリを構成するときに使用するため、保存しておきます。

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

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

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

   Chat API に移動

2. [構成] をクリックして、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 にロギング] を選択します。

3. [保存] をクリックします。

Chat アプリは、Chat でメッセージを受信して返信できる状態です。

Chat アプリをテストする

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

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

   Google Chat に移動

2. add [チャットを新規作成] をクリックします。
3. [ユーザーを 1 人以上追加] フィールドに、Chat 用アプリの名前を入力します。

4. 検索結果から Chat 用アプリを選択します。ダイレクト メッセージが開きます。

5. そのアプリの新しいダイレクト メッセージに、「Hello」と入力して enter を押します。

   Dialogflow Chat アプリは、自己紹介で応答します。

6. サンプル テストの会話を行って、テストを完了します。

テスト会話の例

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

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

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

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

{ "hostAppDataAction": { "chatDataAction": { "createMessageAction": {
  "message": { "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"
        }}
      }]}}]}]
    }
  }]}
}}}}

制限事項と考慮事項

• Dialogflow で Google Chat アプリを使用する場合、Chat イベント オブジェクトには次の制限事項と考慮事項があります。
  • アプリのホーム イベント: APP_HOME イベントのサポートはまだ利用できません。
  • Dialogflow クエリ入力: Dialogflow エージェントにクエリ入力として送信されるテキストは、イベントタイプによって異なります。
    • MESSAGE: チャット メッセージの argumentText フィールドの値。
    • APP_COMMAND: 文字列 "APP_COMMAND_PAYLOAD"。
    • ADDED_TO_SPACE: 文字列 "ADDED_TO_SPACE_PAYLOAD"。
    • REMOVED_FROM_SPACE: 文字列 "REMOVED_FROM_SPACE_PAYLOAD"。
    • CARD_CLICKED: 文字列 "BUTTON_CLICKED_PAYLOAD"。
    • WIDGET_UPDATED: 文字列 "WIDGET_UPDATED_PAYLOAD"（オートコンプリートに使用）。
  • 完全なイベント ペイロード: チャット インタラクション イベントの完全な JSON ペイロードが WebhookRequest.payload フィールド内の Dialogflow に送信されます。これは Dialogflow ウェブフックでアクセスできます。詳細については、Dialogflow CX Webhook リクエストのドキュメントをご覧ください。
• コマンドへの応答とカードまたはダイアログからのデータの受信に関する考慮事項:
  • Dialogflow エージェントがチャット インタラクション イベントの JSON ペイロードを処理する必要がある場合は、Dialogflow Webhook を使用してクエリ パラメータのカスタム ペイロードを検査できます。
  • Dialogflow エージェントからダイアログを表示するには、ナビゲーション pushCard を含む RenderActions オブジェクトを含む単一のカスタム JSON ペイロードで応答します。
  • カードから入力されたデータを処理するには、Dialogflow ウェブフックを使用し、適切なアクションを含む単一のカスタム JSON ペイロードで応答します。
• リンクのプレビューはサポートされていません。
• Dialogflow エージェントが 1 つのメッセージのみで応答する場合、そのメッセージは Google Chat に同期的に送信されます。Dialogflow エージェントが複数のメッセージで応答する場合、各メッセージに対して 1 回ずつ Chat API の spaces.messages リソースで create メソッドを呼び出すことで、すべてのメッセージが Chat に非同期で送信されます。
• Dialogflow CX と Chat のインテグレーションを使用する場合は、Dialogflow エージェントと Chat 用アプリを同じ Google Cloud プロジェクトに設定する必要があります。Dialogflow と Chat を異なるクラウド プロジェクトで設定する必要がある場合は、接続を容易にするための中間サーバーを設定できます。方法については、GitHub の Dialogflow CX のチャット統合の例をご覧ください。

トラブルシューティング

Chat 用アプリをデバッグするには、まずエラーログを確認します。このアプリは Dialogflow を使用しているため、次のロギングとトラブルシューティングのリソースを利用できます。

• Google Workspace アドオンのログ: Chat とのやり取りなど、Chat 用アプリの動作に関する詳細情報をログでクエリします。Google Workspace アドオンのログをクエリするをご覧ください。

• Google Google Chat アプリのエラー: Chat アプリの一般的なエラー メッセージと解決策については、Chat 用アプリのエラーのトラブルシューティングと解決を参照してください。

• Dialogflow CX Cloud Logging: Dialogflow エージェントの設定で Cloud Logging が有効になっていることを確認し、エージェントと Webhook のインタラクションのエラーなど、詳細な実行ログをキャプチャします。この機能を有効にして構成する方法については、Dialogflow CX エージェントの設定に関するドキュメントをご覧ください。これらのログは、Google Cloud コンソールのログ エクスプローラで確認できます。

• Dialogflow CX の会話履歴: 過去のやり取りを確認して、会話の流れを把握し、問題が発生した場所を特定します。会話の履歴をご覧ください。

• Dialogflow の一般的なトラブルシューティング: Dialogflow の広範な問題については、Dialogflow CX のトラブルシューティング ガイドをご覧ください。

クリーンアップ

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

1. Google Cloud コンソールで、[リソースの管理] ページに移動します。メニュー アイコン menu > [IAM と管理] > [リソースの管理] をクリックします。

   Resource Manager に移動します。

2. プロジェクト リストで、削除するプロジェクトを選択し、[削除] delete をクリックします。
3. ダイアログでプロジェクト ID を入力し、[シャットダウン] をクリックしてプロジェクトを削除します。

関連トピック

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

{
  "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"
                      }
                    }
                  }
                ]
              }
            }
          ]
        }
      ]
    }
  }]
}