1. 始める前に
この Codelab では、Dialogflow を Google Workspace API と接続して、Google Chat で動的な応答を行う Google カレンダーの予約スケジューラを完全に機能させる方法を学びます。
以前の Codelab の設定がまだ残っている場合や、Dialogflow とフルフィルメントに自信がある場合は、ここからスターター コードとエージェント構成をダウンロードしてください。
https://github.com/googleworkspace/appointment-scheduler-codelab
前提条件
続行する前に、次の Codelab を完了する必要があります。
- Dialogflow で予約スケジューラを構築する
- Dialogflow を Actions on Google と統合する
- Dialogflow のエンティティについて
- Dialogflow とカレンダーを統合してフルフィルメントを理解する
また、Dialogflow の基本コンセプトと構成についても理解する必要があります。これについては、Dialogflow でチャットボットを構築するのパスにある次の動画で確認できます。
学習内容
- 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 とサービス] > [ライブラリ] をクリックします。
- 「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 用アプリを有効にするには、[アプリに直接メッセージを送信できる] と [アプリは複数のユーザーが存在するスペースで動作します] を選択します。
[保存] をクリックして、Cloud コンソールを終了します。
3. その他の Dialogflow との統合
Google Chat はデフォルトで有効になっていますが、ボットが複数のプラットフォームに対応するようにするには、Dialogflow コンソールの [統合] ページに移動して有効にします。
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 アプリに接続したので、フルフィルメント コードで正しい形式の JSON を返すだけで、Google に表示できます。JSON の例をいくつか見てみましょう。
基本的なテキスト レスポンスは次のようになります。
{
"text": "Your pizza delivery is here!"
}
ウィジェットを含むカード形式のレスポンスの例は次のようになります。
{
"cards": [
{
"sections": [
{
"widgets": [
{
"image": { "imageUrl": "https://..." }
},
{
"buttons": [
{
"textButton": {
"text": "OPEN IN GOOGLE MAPS",
"onClick": {
"openLink": {
"url": "https://..."
}
}
}
}
]
}
]
}
]
}
]
}
カードの詳細については、メッセージ形式のドキュメントをご覧ください。次のセクションでは、Chat 用アプリにカードを追加します。
6. カスタム ペイロードと Chat カード
Dialogflow のカスタム ペイロード を使用すると、プラットフォーム固有のリッチ レスポンス メッセージを使用できます。ここに、エージェントからユーザーに返される Hangout Chat JSON カードを追加します。
まず、ウェルカム インテントの基本的なカードを追加しましょう。Dialogflow コンソールで、Default Welcome Intent に移動し、レスポンス セクションまでスクロールします。
[Google Chat] をクリックして、[Use responses from the DEFAULT tab as the first responses] の選択を解除し、[ADD RESPONSES > Custom Payload] をクリックします。
JSON のスケルトンが表示されます。
次のコードをコピーして貼り付けます。TextParagraph ウィジェットを含むカードを設定しました。
{
"hangouts": {
"header": {
"title": "Appointment Scheduler"
},
"sections": [
{
"widgets": [
{
"textParagraph": {
"text": "Welcome, I am the scheduler agent. Please request an appointment type and time."
}
}
]
}
]
}
}
[保存] をクリックし、テスト用の Chat スペースに移動して、このカードがレンダリングされていることを確認します。Chat スペースで「@AppointmentScheduler hello」と入力します。
次に、フルフィルメント コードにカスタム ペイロードを追加して、コードでコンテンツを動的に生成できるようにします。
7. フルフィルメントでカードを追加する
次に、予定されている予定を表示するいくつかのウィジェットを含むカードを作成します。appointmentType、date、time の入力をレンダリングする getGoogleChatCard という関数を追加しましょう。
次の関数を 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 パラメータで地図画像を作成できます。この画像は、カードの画像ウィジェットで使用できます。
- Google Cloud コンソールで、カレンダー API と Google Chat API を有効にしたのと同じ方法で Maps Static API を有効にします。
- コンソールの [API とサービス] ページで、プロジェクトの API キーを作成して保存します。Maps での 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 エージェントを削除する
- 既存のエージェントの横にある
をクリックします。
- [全般] タブで一番下までスクロールし、[Delete This Agent] をクリックします。
- ダイアログに「削除」と入力し、[削除] をクリックします。
10. 完了
Dialogflow でチャットボットを作成し、カレンダーと Google Chat に統合しました。これで、Google Workspace Pro の仲間入りです。
その他の情報
詳細については、Dialogflow の GitHub ページのコードサンプルをご覧ください。