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. 正しい Cloud プロジェクトで 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"（オートコンプリートに使用）。
    • 完全なイベント ペイロード: チャットのインタラクション イベントの完全な JSON ペイロードが、WebhookRequest.payload フィールド内の Dialogflow に送信されます。これは Dialogflow ウェブフックでアクセスできます。詳細については、Dialogflow ES Webhook リクエストのドキュメントをご覧ください。
  • コマンドへの応答とカードまたはダイアログからのデータの受信に関する考慮事項:
  • リンクのプレビューはサポートされていません。
  • Dialogflow エージェントが 1 つのメッセージのみで応答する場合、そのメッセージは Google Chat に同期的に送信されます。Dialogflow エージェントが複数のメッセージで応答する場合、各メッセージに対して Chat API の spaces.messages リソースで create メソッドを 1 回呼び出すことで、すべてのメッセージが Chat に非同期で送信されます。
  • Dialogflow ES と Chat の統合を使用する場合、Dialogflow エージェントと Chat 用アプリは同じ Google Cloud プロジェクトで設定する必要があります。

トラブルシューティング

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

クリーンアップ

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

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

    Resource Manager に移動

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