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

Dialogflow と Google Chat の統合

1. 始める前に

この Codelab では、Dialogflow と Google Workspace API を接続して、Google Chat で動的な応答を返す、Google カレンダーで完全に機能する予約スケジューラを作成する方法について学習します。

前の Codelab でまだ設定していない場合や、Dialogflow とフルフィルメントに自信がある場合は、ここからスターターコードとエージェント構成をダウンロードできます。

https://github.com/googleworkspace/appointment-scheduler-codelab

前提条件

先に進む前に、次の Codelab を完了する必要があります。

また、Dialogflow の基本コンセプトと構造も理解する必要があります。これらは、「Dialogflow で chatbot を作成する」のコースにある以下の動画から学ぶことができます。

学習内容

Google Chat アプリをデプロイして構成する方法
Google Chat でディスプレイカードを作成する方法
Dialogflow フルフィルメントでカスタムペイロードを作成する方法

作成するアプリの概要

Dialogflow、Google Chat、カレンダーの統合
（省略可）Google マップを統合してリッチカードを作成する

必要なもの

Dialogflow コンソールにログインするためのウェブブラウザとメールアドレス
Google Workspace ドメインでカレンダーと Google Chat が有効になっている

2. Google Chat を有効にして構成する

前の Codelab で作成した Dialogflow エージェントから始めます。

Dialogflow コンソールで、をクリックします。
[全般] タブで [プロジェクト ID] までスクロールし、[Google Cloud] をクリックします。

Google Cloud コンソールのナビゲーションメニュー Я > をクリックします。API とサービス >Library。
「Google Chat API」を検索します。次に、[有効にする] をクリックして、Google Cloud プロジェクトで API を使用します。
Chat 用アプリを構成するため、API の [構成] ページに移動します。各 GCP プロジェクトに設定できる Chat アプリは 1 つまでです。

Dialogflow の各フィールドに構成オプションが入力されていることを確認します。
アバターの URL フィールドをこの車の画像に変更: **https://fonts.gstatic.com/s/i/googlematerialicons/directions_car/v5/black-48dp/1x/gm_directions_car_black_48dp.png**
Chat 用アプリでダイレクトメッセージとスペースの両方を有効にするには、[App にメッセージを直接送信できます] と [Appworks with multiple users with spaces] を選択します。

[保存] をクリックして、Cloud コンソールを終了します。

3. その他の Dialogflow インテグレーション

Google Chat はデフォルトで有効になっていますが、bot で複数のプラットフォームに対応する場合は、Dialogflow コンソールの [Integrations] ページに移動して有効にできます。

4. Google Chat でテストする

Chat アプリの構成が完了したので、Chat スペースに追加してテストしましょう。Google Chat を開き、テストスペースを作成します。

スペースの右上にあるプルダウンをクリックし、[ユーザーを追加&アプリ。
AppointmentScheduler を検索して、スペースにアプリを追加します。
スペースに「@AppointmentScheduler」と入力するだけで、すでに Google に組み込まれているアプリを操作できます。

前の Codelab と同じ入力を使用して、このプラットフォームでテストしてみましょう。

ユーザー: 「@AppointmentScheduler 明日の午後 2 時に車両登録の予定を設定して」
Chat アプリ: 「では、ご都合のよろしいでしょうか。4 月 24 日午後 2 時で大丈夫です！」

次に、Google Chat のカスタマイズを使用して、より充実したレスポンスを追加します。

5. カスタムの Google Chat カード

Google Chat を使用すると、アプリからユーザーに基本的なテキストレスポンスまたはカードレスポンスを返すことができます。これにより、画像やボタンなどのさまざまなウィジェットによって構築されたインターフェースが充実します。Dialogflow エージェントを Google Chat アプリに接続したら、フルフィルメントコードで Google に表示する正しい形式の JSON を返すだけで済みます。JSON の例を見てみましょう。

基本的なテキストレスポンスは次のようになります。

 {
  "text": "Your pizza delivery is here!"
}

ウィジェットを使ったカードレスポンスの例は、以下のとおりです。

{
  "cards": [
    {
      "sections": [
        {
          "widgets": [
            {
              "image": { "imageUrl": "https://..." }
            },
            {
              "buttons": [
                {
                  "textButton": {
                    "text": "OPEN IN GOOGLE MAPS",
                    "onClick": {
                      "openLink": {
                        "url": "https://..."
                      }
                    }
                  }
                }
              ]
            }
          ]
        }
      ]
    }
  ]
}

カードの詳細については、Message Format に関するドキュメントをご覧ください。次のセクションでは、Chat アプリにカードを追加します。

6. カスタムペイロードとチャットカード

Dialogflow のカスタムペイロードを使用すると、プラットフォーム固有のリッチレスポンスメッセージを使用できます。ここで、ハングアウトチャットの JSON カードを追加します。このカードは、エージェントからユーザーに提供されます。

まず、ウェルカムインテント用の基本的なカードを追加しましょう。Dialogflow コンソールで Default Welcome Intent に移動し、responses セクションまで下にスクロールします。

[Google Chat] をクリックし、[Use answers from the DEFAULT tab as the first response] の選択を解除して、[ADD RESPONSES] >カスタムペイロード。

JSON スケルトンが表示されます。

以下のコードをコピーして貼り付けます。TextParagraph ウィジェットを含むカードをセットアップしました。

{
 "hangouts": {
   "header": {
     "title": "Appointment Scheduler"
   },
   "sections": [
     {
       "widgets": [
         {
           "textParagraph": {
             "text": "Welcome, I am the scheduler agent. Please request an appointment type and time."
           }
         }
       ]
     }
   ]
 }
}

[Save] をクリックし、テスト用の Chat スペースに移動して、このカードがレンダリングされることを確認します。Chat スペースで、「@AppointmentScheduler hello」と入力します。

次に、フルフィルメントコードにカスタムペイロードを追加して、コードでコンテンツを動的に生成できるようにします。

7. フルフィルメントへのカードの追加

次に、スケジュール設定された予約を表示する複数のウィジェットを含むカードを作成します。getGoogleChatCard という関数を追加しましょう。入力の appointmentType、date、time をレンダリングします。

下の関数を、下の index.js のコードに追加します。

function getGoogleChatCard(appointmentType, date, time) {
   const cardHeader = {
     title: 'Appointment Confirmation',
     subtitle: appointmentType,
     imageUrl: ICON_IMAGE_URL,
     imageStyle: 'IMAGE',
   };
    const dateWidget = {
     keyValue: {
       content: 'Date',
       bottomLabel: date,
     },
   };
    const timeWidget = {
     keyValue: {
       content: 'Time',
       bottomLabel: time,
     },
   };

    const buttonWidget = {
     buttons: [
       {
         textButton: {
           text: 'View Appointment',
           onClick: {
             openLink: {
               url: CALENDAR_URL,
             },
           },
         },
       },
     ],
   };
    const infoSection = {widgets: [dateWidget, timeWidget,
     buttonWidget]};
    return {
     'hangouts': {
       'name': 'Confirmation Card',
       'header': cardHeader,
       'sections': [infoSection],
     },
   };
 }

このカードには、Key-Value ペアとボタンウィジェットが含まれています。ウィジェットは section 内で順序付けされ、card にはレンダリングするセクションのリストが含まれます。

次に、カレンダーの予定の作成時にこの関数を呼び出します。createCalendarEvent 関数内で、内容を以下のコードに置き換えて関数をデプロイします。

return createCalendarEvent(dateTimeStart, dateTimeEnd, appointmentType).then(() => {
   agent.add(`Ok, let me see if we can fit you in. ${appointmentTimeString} is fine!.`);

   const dateString = dateTimeStart.toLocaleString(
     'en-US',
       {month: 'long', day: 'numeric'},
   );
   const dateParts = appointmentTimeString.split(',');
   const json = getGoogleChatCard(appointmentType, dateParts[0], dateParts[1]);
   const payload = new Payload(
       'hangouts',
       json,
       {rawPayload: true, sendAsMessage: true},
   );
   agent.add(payload);

 }).catch(() => {
   agent.add(`I'm sorry, there are no slots available for ${appointmentTimeString}.`);
 });
}

エージェントは、Google Chat で応答する際、上で作成したカードを返却することを知っています。スケジューリングリクエストでそれをテストします。

8. （省略可）Google マップ画像ウィジェットを追加する

レスポンスカードをより視覚的にするには、Maps Static API によって生成された予約場所の静的地図を追加します。この API では、URL パラメータを使ってマップ画像を作成できます。その画像をカード内の画像ウィジェットで使用できます。

Calendar API や Google Chat API を有効にする場合と同じ方法で、Google Cloud コンソールで Maps Static API を有効にします。
[API とサービス] ページに移動します。マップを使用して API キーを取得する方法とベストプラクティスについて詳しくは、こちらをご覧ください。
API キーと次の定数を、index.js のファイルの先頭にコピーします。

const API_KEY = 'YOUR_API_KEY';
const MAP_IMAGE_URL = 'https://maps.googleapis.com/maps/api/staticmap?center=Googleplex&zoom=14&size=200x200&key=' + API_KEY;
const ICON_IMAGE_URL = 'https://fonts.gstatic.com/s/i/googlematerialicons/calendar_today/v5/black-48dp/1x/gm_calendar_today_black_48dp.png';
const CALENDAR_URL = 'YOUR_CALENDAR_URL';

次に、getGoogleChatCard 関数に画像ウィジェットを追加します

  const mapImageWidget = {
    'image': {
      'imageUrl': MAP_IMAGE_URL,
      'onClick': {
        'openLink': {
          'url': MAP_IMAGE_URL,
        },
      },
    },
  };

infoSection 変数のウィジェットのリストに mapImageWidget を追加し、保存してデプロイします。
Chat スペースで Chat 用アプリをテストすると、追加したコードに基づいたリッチレスポンスが表示されるはずです。

9. クリーンアップ

他の Dialogflow Codelab を完了する予定がある場合は、今はこのセクションをスキップして、後で再開してください。

Dialogflow エージェントを削除する

既存のエージェントの横にあるをクリックします。

[General] タブで、下にスクロールして [Delete This Agent] をクリックします。
ダイアログに「Delete」と入力して、[削除] をクリックします。

10.完了

Dialogflow で chatbot を作成し、カレンダーと Google Chat と統合しました。これで、Google Workspace Pro になりました。

その他の情報

詳細については、Dialogflow の GitHub ページでコードサンプルをご確認ください。