Dialogflow ES を使用して Google Chat アドオンを構築する

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

目標

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

前提条件

アーキテクチャ

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

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

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

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

環境を設定する

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

  1. Google API Console で、Google Chat API と Dialogflow API を有効にします。

    API を有効にする

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

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

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

既存の Dialogflow ES エージェントがない場合:

  1. Dialogflow ES コンソールに移動します。
  2. [CREATE AGENT] をクリックします。
  3. 名前を付けて、デフォルトの言語とタイムゾーンを選択します。
  4. Cloud プロジェクトに関連付けます。
  5. [作成] をクリックします。
  6. Chat アプリの会話フローに必要なインテントとエンティティを構築します。挨拶インテントから始めることができます。
  7. プロジェクト ID をメモしておきます。

詳細なガイドについては、エージェントを構築するをご覧ください。

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

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

  1. Google API Console で、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 ES] を選択します。
    7. ドメイン内の特定のユーザーとグループにこの Chat 用アプリの利用を許可する を選択し、メールアドレスを入力します。
    8. [ログ] で [エラーを Logging にロギング] を選択します。

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

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

Chat アプリをテストする

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

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

    Google Chat に移動

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

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

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

    Dialogflow Chat アプリが挨拶メッセージで応答します。

テキストのレスポンス

テキスト レスポンス は テキスト メッセージとして Google Chat に送信されます。 このフォーマットでは、テキストを特定の（マークダウン ライト）記号で囲むことにより、太字や斜体にできます。

テキスト メッセージのレスポンスは、Dialogflow コンソールのデフォルトのテキスト レスポンスと同用の外観で表示されます。ただし、未加工の API レスポンスは少し異なります。 また、プラットフォーム構成を GOOGLE_HANGOUTS に設定して、複数の統合用のエージェントをビルドする際に活用できる情報を提供します。

"fulfillmentMessages": [
{
   "text": {
   "text": [
        "This is a test."
   ]
},
  "platform": "GOOGLE_HANGOUTS"
},

カード

カード形式のレスポンス は、 カード メッセージとして Google Chat に送信されます。

画像

画像レスポンスは、Google Chat 画像ウィジェットとして Google Chat に送信されます。

カスタム ペイロード

他の種類の Google Chat メッセージを送信するには、カスタム ペイロードを使用します。

Google Chat のカスタム ペイロードを使用すると、より高度なカードを作成できます。1 つのカードは 1 つ以上のセクションを持つことができます。各セクションにはヘッダーを含めることができます。 Google Workspace アドオンの Chat カードを拡張するのリファレンス ガイドを参照して、これで作成できる組み合わせのいくつかを確認できます。ただし、カスタム ペイロードを使用する場合は、JSON 形式を指定する必要があります。

カードを含むメッセージを作成するためのカスタム ペイロードの例を次に示します。

{ "hangouts": { "hostAppDataAction": { "chatDataAction": {
  "createMessageAction": { "message": { "cardsV2": [{
    "cardId": "pizza",
    "card": {
      "header": {
        "title": "Pizza Delivery Customer Support",
        "subtitle": "pizzadelivery@example.com",
        "imageUrl": "https://goo.gl/aeDtrS"
      },
      "sections": [{ "widgets": [{ "textParagraph": {
        "text": " Your pizza is here!"
      }}]}]
    }
  }]}}
}}}}

制限事項と考慮事項

  • Dialogflow で Google Workspace アドオンを使用する場合、Chat イベント オブジェクト には次の制限事項と考慮事項があります。
    • アプリのホーム イベント: APP_HOME イベントはまだサポートされていません。
    • Dialogflow クエリ入力: Dialogflow エージェントにクエリ入力として送信されるテキストは、イベントの種類によって異なります。
      • MESSAGE: チャット メッセージの argumentText フィールドの値。
      • APP_COMMAND: 文字列 "APP_COMMAND_PAYLOAD"。
      • ADDED_TO_SPACE: デフォルトのウェルカム イベントが送信されます。
      • REMOVED_FROM_SPACE: 文字列 "REMOVED_FROM_SPACE_PAYLOAD"。
      • CARD_CLICKED: 文字列 "BUTTON_CLICKED_PAYLOAD"。
      • WIDGET_UPDATED: 文字列 "WIDGET_UPDATED_PAYLOAD"（ 自動補完に使用）。
    • 完全なイベント ペイロード: Chat インタラクション イベントの完全な JSON ペイロードは、WebhookRequest.payload フィールド内の Dialogflow に送信されます。これは Dialogflow Webhook でアクセスできます。詳細については、 Dialogflow ES Webhook リクエストのドキュメントをご覧ください。
  • コマンドに応答して コマンドと カードまたはダイアログからデータを受信する場合の考慮事項:
  • リンクのプレビューはサポートされていません。
  • Dialogflow エージェントが 1 つのメッセージのみで応答する場合、メッセージは Google Chat に同期的に送信されます。Dialogflow エージェントが複数のメッセージで応答する場合、すべてのメッセージは、メッセージごとに 1 回、Chat API の spaces.messages リソースで create メソッドを呼び出すことで、Chat に非同期的に送信されます。
  • Dialogflow ES と Chat の統合を使用する場合、Dialogflow エージェントと Chat アプリは同じ Google Cloud プロジェクトに設定する必要があります。

トラブルシューティング

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

クリーンアップ

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

  1. Google API Console で、[リソースの管理] ページに移動します。 [Menu] >[IAM & Admin] >[Manage Resources] をクリックします。

    [Resource Manager] に移動

  2. プロジェクト リストで、削除するプロジェクトを選択し、 [Delete] . をクリックします。
  3. ダイアログでプロジェクト ID を入力し、[シャットダウン] をクリックしてプロジェクトを削除します。
  • Dialogflow CX は、Chat アプリで Dialogflow を使用する別の方法です。