1. はじめに
前の Codelab でテレビ番組表用の Dialogflow chatbot を作成したので、今回はそれを Google Chat に拡張する方法について説明します。このプラットフォーム用の動的でインタラクティブなカードを構築し、複数の統合を行う方法を学びます。
作業内容
Google Workspace ドメインでカスタマイズ可能なレスポンスで応答できる Dialogflow チャットボットを構築します。
学習内容
- Google Chat 用アプリをデプロイして構成する方法
- Google Chat でディスプレイ カードを作成する方法
- Dialogflow フルフィルメントでカスタム ペイロードを構築する方法
必要なもの
- この 2 部構成のシリーズの最初のコードラボを完了します。
- Dialogflow コンソールにログインするためのウェブブラウザとメールアドレス
- Google Workspace ドメインで Chat が有効になっている
2. Google Chat を有効にして構成する
前の Codelab で作成した Dialogflow エージェントから始めます。
- Dialogflow コンソールで、
をクリックします。 - [全般] タブで [プロジェクト ID] までスクロールし、[Google Cloud]
をクリックします。
- Google Cloud コンソールで、ナビゲーション メニュー ☰ > [API とサービス] > [ライブラリ] をクリックします。
- 「Google Chat API」を検索し、[有効にする] をクリックして、Google Cloud プロジェクトで API を使用します。
- 次に、Google Chat 用アプリを構成します。API の [構成] ページに移動します。各 GCP プロジェクトに設定できる Google Chat 用アプリは 1 つだけです。
- Dialogflow フィールドに構成オプションが入力されていることを確認します。
- [アバターの URL] フィールドをこのテレビの画像に変更します。
[https://fonts.gstatic.com/s/i/googlematerialicons/tv/v5/black-48dp/1x/gm_tv_black_48dp.png](https://fonts.gstatic.com/s/i/googlematerialicons/tv/v5/black-48dp/1x/gm_tv_black_48dp.png) - ダイレクト メッセージとスペースの両方で Google Chat 用アプリを有効にする
[保存] をクリックして、Cloud コンソールを終了します。
また、Dialogflow との統合も可能です。Google Chat はデフォルトで有効になっていますが、複数のプラットフォームでサービスを提供する場合は、Dialogflow コンソールの [統合] ページに移動して有効にしてください。
3. Google Chat でテストする
Google Chat 用アプリが構成されたので、チャット スペースに追加してテストしてみましょう。Google Chat を開き、テスト用のチャット スペースを作成します。スペースの右上にあるプルダウンをクリックし、[ユーザーとアプリを追加] を選択します。
tvguide を検索し、Google Chat アプリをスペースに追加します。
スペースで「@tvguide」と入力するだけで、Google Chat で構築済みの Google Chat 用アプリとやり取りできるようになりました。@tvguide hello と入力して試してみましょう。
次に、Google Chat のカスタマイズを使用して、よりリッチなレスポンスを追加します。
4. カスタム Google Chat カード
Google Chat では、アプリからユーザーに基本的なテキスト レスポンスまたはカード レスポンスを返すことができます。カード レスポンスでは、画像やボタンなどのさまざまなウィジェットで構築されたリッチなインターフェースを使用できます。Dialogflow エージェントを Google Chat アプリに接続したので、フルフィルメント コードで正しい形式の JSON を返すだけで、Google Chat に表示できます。JSON の例をいくつか見てみましょう。
基本的なテキスト レスポンスは次のようになります。
{
"text": "Welcome, I am the TV Guide agent. I can tell you what is currently playing on a TV channel. For example, you can ask me: What is on MTV?"
}
ウィジェットを含むカード形式のレスポンスの例は次のようになります。
{
"cards": [
{
"sections": [
{
"widgets": [
{
"image": { "imageUrl": "https://freesvg.org/img/fttv.png" }
},
{
"buttons": [
{
"textButton": {
"text": "Check Listings",
"onClick": {
"openLink": {
"url": "https://tvlistings.com/..."
}
}
}
}
]
}
]
}
]
}
]
}
5. カスタム ペイロードと 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": "TV Guide App"
},
"sections": [
{
"widgets": [
{
"textParagraph": {
"text": "Welcome, I am the TV Guide agent. I can tell you what is currently playing on a TV channel. For example, you can ask me: What is on MTV?"
}
}
]
}
]
}
}
[保存] をクリックし、テスト チャット スペースに移動して、このカードがレンダリングされていることを確認します。チャット スペースで「@tvguide hello」と入力します。
次に、フルフィルメント コードにカスタム ペイロードを追加して、コードでコンテンツを動的に生成できるようにします。
カードの詳細については、メッセージ形式のドキュメントをご覧ください。次のセクションでは、カードを追加します。
6. フルフィルメントでカードを追加する
次に、テレビ番組表を表示するウィジェットを含むカードを作成します。結果のリスティング情報をレンダリングする getGoogleCard という関数を追加しましょう。keyValue ウィジェットと button ウィジェットを使用して、カード レスポンスを構築します。
index.js のコードの末尾に次の関数を追加します。
/**
* Return a Google Chat Card in JSON
* @param {Object} JSON tv results
*/
var getGoogleCard = function(tvresults) {
console.log('In Google Chat card, tv results: ' + JSON.stringify(tvresults));
if(tvresults['Listings'][0]) {
let channelName = tvresults['Name'];
let currentlyPlayingTime = getShowTime(tvresults['Listings'][0]['Time']);
let laterPlayingTime = getShowTime(tvresults['Listings'][1]['Time']);
const cardHeader = {
title: channelName + ' Shows',
};
const currentWidget = {
keyValue: {
content: `${tvresults['Listings'][0]['Title']}`,
bottomLabel: `${currentlyPlayingTime}`,
}
};
const laterWidget = {
keyValue: {
content: `${tvresults['Listings'][1]['Title']}`,
bottomLabel: `${laterPlayingTime}`
}
};
const buttonWidget = {
buttons: [
{
textButton: {
text: 'View Full Listing',
onClick: {
openLink: {
url: TVGUIDE_WEBSERVICE + '/' + tvresults['ID'],
},
},
},
},
],
};
return {
'hangouts': {
header: cardHeader,
sections: [{widgets: [currentWidget, laterWidget, buttonWidget]}],
}
};
} else {
const errorWidget = {
keyValue: {
content: 'No listings found',
bottomLabel: 'Please try again.'
}
};
return {
'hangouts': {
'sections': {widgets: [errorWidget]},
}
};
}
}
次に、このメソッドを呼び出して、エージェントがユーザーに返すレスポンスを取得できるようにする必要があります。関数 channelHandler で、関数の内容を次のコードに置き換えます。
function channelHandler(agent) {
console.log('in channel handler');
var jsonResponse = `{"ID":10,"Listings":[{"Title":"Catfish Marathon","Date":"2018-07-13","Time":"11:00:00"},{"Title":"Videoclips","Date":"2018-07-13","Time":"12:00:00"},{"Title":"Pimp my ride","Date":"2018-07-13","Time":"12:30:00"},{"Title":"Jersey Shore","Date":"2018-07-13","Time":"13:00:00"},{"Title":"Jersey Shore","Date":"2018-07-13","Time":"13:30:00"},{"Title":"Daria","Date":"2018-07-13","Time":"13:45:00"},{"Title":"The Real World","Date":"2018-07-13","Time":"14:00:00"},{"Title":"The Osbournes","Date":"2018-07-13","Time":"15:00:00"},{"Title":"Teenwolf","Date":"2018-07-13","Time":"16:00:00"},{"Title":"MTV Unplugged","Date":"2018-07-13","Time":"16:30:00"},{"Title":"Rupauls Drag Race","Date":"2018-07-13","Time":"17:30:00"},{"Title":"Ridiculousness","Date":"2018-07-13","Time":"18:00:00"},{"Title":"Punk'd","Date":"2018-07-13","Time":"19:00:00"},{"Title":"Jersey Shore","Date":"2018-07-13","Time":"20:00:00"},{"Title":"MTV Awards","Date":"2018-07-13","Time":"20:30:00"},{"Title":"Beavis & Butthead","Date":"2018-07-13","Time":"22:00:00"}],"Name":"MTV"}`;
var results = JSON.parse(jsonResponse);
var listItems = {};
textResults = getListings(results);
for (var i = 0; i < results['Listings'].length; i++) {
listItems[`SELECT_${i}`] = {
title: `${getShowTime(results['Listings'][i]['Time'])} - ${results['Listings'][i]['Title']}`,
description: `Channel: ${results['Name']}`
}
}
if (agent.requestSource === 'hangouts') {
const cardJSON = getGoogleCard(results);
const payload = new Payload(
'hangouts',
cardJSON,
{rawPayload: true, sendAsMessage: true},
);
agent.add(payload);
} else {
agent.add(textResults);
}
}
レスポンスが追加される一番下のコードに注目してください。エージェントのリクエスト元がこのプラットフォームであると特定された場合、タグ「hangouts」を含む JSON ペイロードが作成されます。これは、フルフィルメントでペイロードを正しく渡すために重要です。
チャット スペースに戻って、テストしてみましょう。タイプ @tvguide What is on MTV?。次のようなレスポンスが表示されます。
7. 完了
これで、Dialogflow を使用して最初の Google Chat 用ボットを作成できました。
次のステップ
この Codelab はお役に立ちましたか？これらの優れたラボをご覧ください。