Dialogflow Messengerとは、あなたが運営しているWebサイトに対して、簡単にQ&Aのようなチャット機能を組み込むことができます。
ドキュメントは下記URLをご確認ください。
ハンズオン資料URL
Katacodaを使って簡単に試せる環境を用意しました。こちらの資料に沿って行えばあっという間に確認できます。
リッチレスポンス
普通にテキストを返すことはもちろんですが、リッチなレスポンスを返すことができます。
DenoでAPI作成
今回はそのレスポンスを今流行のDenoで返してみたいと思います。サーバー部分は abc を使いました。
start メソッドでポートを指定してサーバーを起動しています。あとは指定されたJsonをレスポンスとして返しています。
import { Application, Context } from "https://deno.land/x/abc@v1.0.0-rc10/mod.ts"
const app = new Application()
app.static('/', './public')
app.get('/', async (ctx: Context) => {
await ctx.file('./public/index.html')
})
app.post('/', async (ctx: Context) => {
let js = {}
js = {
"fulfillmentMessages": [
{
"payload": {
"richContent": [
[
{
"type": "info",
"title": "情報レスポンス",
"subtitle": "サブタイトル\nクリックすると別のページに飛ぶよ",
"image": {
"src": {
"rawUrl": "https://www.i-enter.co.jp/images/favicon.ico"
}
},
"actionLink": "https://www.i-enter.co.jp"
}
]
]
}
}
]
}
await ctx.json(js)
})
app.start({port: 3000})
これを実行すると、Dialogflow Messengerのレスポンスは下記のようになります。
ちょっとオシャレでリッチなデザインが返ってきます。
各レスポンス種類
説明レスポンス
一般的なタイトルと内容を明記するものです。
js = {
"fulfillmentMessages": [
{
"payload": {
"richContent": [
[
{
"type": "description",
"title": "説明レスポンス",
"text": [
"説明1行目",
"説明2行目"
]
}
]
]
}
}
]
}
画像レスポンス
画像を返してくれます。svgファイル以外にもjpeg、png画像なども可能です。
js = {
"fulfillmentMessages": [
{
"payload": {
"richContent": [
[
{
"type": "image",
"rawUrl": "https://deno.land/logo.svg",
"accessibilityText": "Deno logo"
}
]
]
}
}
]
}
ボタンレスポンス
クリックすると、別のWebページに遷移させることができます。また event を使うことで、別途パラメータを渡すこともできます。
アイコンはマテリアルアイコンライブラリのIDを指定することができます。
js = {
"fulfillmentMessages": [
{
"payload": {
"richContent": [
[
{
"type": "button",
"icon": {
"type": "sentiment_satisfied_alt", // 何も指定しなければ矢印アイコン
"color": "#FF9800"
},
"text": "クリックすると別のページに飛ぶよ",
"link": "https://www.i-enter.co.jp",
"event": {
"name": "RESULT",
"languageCode": "ja-JP",
"parameters": {
"hoge": "ボタンクリック"
}
}
}
]
]
}
}
]
}
リストレスポンス
検索結果などを表示するのに適しているものです。 divider を使うことで区切り線をつけることができます。クリックで反応することができます。 event にも対応しています。
js = {
"fulfillmentMessages": [
{
"payload": {
"richContent": [
[
{
"type": "list",
"title": "リスト1タイトル",
"subtitle": "リスト1 - クリックしてみてね",
"event": {
"name": "RESULT",
"languageCode": "ja-JP",
"parameters": {
"hoge": "リスト1をクリック"
}
}
},
{
"type": "divider"
},
{
"type": "list",
"title": "リスト2タイトル",
"subtitle": "リスト2 - クリックしてみてね",
"event": {
"name": "RESULT",
"languageCode": "ja-JP",
"parameters": {
"hoge": "リスト2をクリック"
}
}
}
]
]
}
}
]
}
アコーディオン
クリックすると、メニューが展開されます。
js = {
"fulfillmentMessages": [
{
"payload": {
"richContent": [
[
{
"type": "accordion",
"title": "アコーディオンレスポンス",
"subtitle": "サブタイトル",
"text": "アコーディオンテキスト"
}
]
]
}
}
]
}
候補ワードレスポンス
押してほしい候補をボタンで返してくれます。 image を指定するとボタンアイコンを設定することができます。
js = {
"fulfillmentMessages": [
{
"payload": {
"richContent": [
[
{
"type": "chips",
"options": [
{
"text": "はい",
"image": {
"src": {
"rawUrl": "https://www.i-enter.co.jp/images/favicon.ico"
}
}
},
{
"text": "いいえ"
}
],
}
]
]
}
}
]
}
組み合わせレスポンス
これまでに紹介したものを組み合わせることができます。
js = {
"fulfillmentMessages": [
{
"payload": {
"richContent": [
[
{
"type": "image",
"rawUrl": "https://deno.land/logo.svg",
"accessibilityText": "Denoイメージ"
},
{
"type": "info",
"title": "組み合わせレスポンス",
"subtitle": "今まで紹介したのを組み合わせられるよ",
"actionLink": "https://cloud.google.com/dialogflow/docs/integrations/dialogflow-messenger#info_response_type"
}
]
]
}
}
]
}
まとめ
いかがでしたでしょうか？リッチなレスポンスを返すことができたでしょうか？
ドキュメントには外部APIを使ったレスポンスに関する情報が一切無かったので、誰かの為になれば幸いです。
システム化のご検討やご相談は弊社までお問い合わせください。
https://i-enter.co.jp/contact/