AI研究所 - AI(人工知能)に脅かされないために、AI(人工知能)を作る側の人間になる -

HOME  >  「LINE」にチャットボットを実装し、画像や動画などの多彩な返答を設定する方法 ~DialogflowのIntegration機能「Custom Payload」サンプルコード集

公開日:2018.08.28 

「LINE」にチャットボットを実装し、画像や動画などの多彩な返答を設定する方法 ~DialogflowのIntegration機能「Custom Payload」サンプルコード集

カテゴリー: AI(人工知能)の作り方

こんにちは、AI研究所、駆け出し研究員のリョウタです。

今回は、DialogflowにあるIntegrationの中の一つ、「LINE」のCustom Payloadについてご紹介したいと思います。

Dialogflowには数多くのアプリケーションにコネクトし、接続した媒体のインターフェース上でDialogflowで作成したインテンツのテキスト内容をアウトプットすることが出来ます。

Dialogflowの使い方についてはこちらの記事「【プログラミング不要】Siriのように会話ができるAI(人工知能)の作り方」を参考にしてみてください。

2018年8月現在、対応しているアプリケーションは以下のものがあります。

01

また、Integrationによって接続されたアプリケーション上で、アウトプットする形式を変更することが出来ます。下の画面は「Skype」「Facebook Messenger」「Slack」を選択しています。各アプリケーションで表示を変更する場合、ADD RESPONSESを選択します。

11

表示形式は指定したアプリケーションによって多少異なりますが、具体的には以下の形式を選ぶことが可能です。

・Text Response(テキストメッセージを表示)
・Image(画像イメージを表示)
・Card(画像+ボタンメッセージ(テキスト付のボタンを押すと指定したメッセージが出力される))
・Quick Replies(ボタンメッセージを複数表示する)

※下記のイメージはSlackの場合

02

上記の形式を、インテンツのResponcesから、コードを書くことなくテンプレートから簡単に選択することが出来ます。
勿論コードによって記載することも可能です。
コードによって上記のような表示形式を記載する場合は「Custom Payload」を選択することで、JavaScriptで記載することが可能です。
選択したアプリケーションによってコードが多少異なります。
各アプリケーションのドキュメントにサンプルコードが載っています。


さて、上記のように数多くあるIntegration連携アプリケーションですが、この中でLINEのみ、専用のテンプレートがなく、全てCustom Payloadで記載しなければなりません。そのため都度LINEにあるドキュメントを確認しなければなりません。
他のアプリケーションに比べて作成が非常に面倒くさいです。

またADD RESPONSESに備わっているテンプレートは「Image」、「Card」、「Quick Replies」のみであり、その他の出力形式を設定したい場合は各ドキュメントを確認しCustom Payloadの中でコードとして記載する必要があります。

今回は、この中のLINEのCustom Payloadのサンプルコードについてご紹介します。私の経験上、よく使うコードを中心にご紹介したいと思います。今回のサンプルコードからCustom Payloadを利用することに慣れていけば様々な表示形式を使いこなすことが可能です。ぜひ実践してみましょう!

※以下ご紹介するテンプレートはLINE Developer内の『Messaging APIリファレンス』に掲載されているテンプレートの一部を掲載しております。正確な情報に関しては下記リファレンスを必ず確認してください。

https://developers.line.me/ja/reference/messaging-api/#anchor-cdf5b84df1ee5185ce5bbd4acaebccab846a8533


■カルーセル

{
"line": {
"type": "template",
"altText": "this is a carousel template",
"template": {
"type": "carousel",
"columns": [
{
"thumbnailImageUrl": "https://〇〇〇〇.jpg",
"imageBackgroundColor": "#FFFFFF",
"title": "xxxx",
"text": "xxxxxxx",
"defaultAction": {
"type": "uri",
"label": "View detail",
"uri": "http://〇〇〇〇"
},
"actions": [
{
"type": "uri",
"label": "View detail",
"uri": "http://xxxxxx"
}
]
},
{
"thumbnailImageUrl": "https://〇〇〇〇.jpg",
"imageBackgroundColor": "#FFFFFF",
"title": "xxxx",
"text": "xxxxxxx",
"defaultAction": {
"type": "uri",
"label": "View detail",
"uri": "http://〇〇〇〇"
},
"actions": [
{
"type": "uri",
"label": "View detail",
"uri": "http://xxxxxx"
}
]
},
{
"thumbnailImageUrl": "https://〇〇〇〇.jpg",
"imageBackgroundColor": "#FFFFFF",
"title": "xxxx",
"text": "xxxxxxx",
"defaultAction": {
"type": "uri",
"label": "View detail",
"uri": "http://〇〇〇〇"
},
"actions": [
{
"type": "uri",
"label": "View detail",
"uri": "http://xxxxxx"
}
]
}
],
"imageAspectRatio": "square",
"imageSize": "cover"
}
}
}

03

上記のように画像+ボタンメッセージを付けることが出来ます。ボタンメッセージの表示数は最大4つまで可能です。


■ボタンテキスト

{
"line": {
"type": "template",
"altText": "this is a confirm template",
"template": {
"type": "confirm",
"text": "xxxxx",
"actions": [
{
"type": "message",
"label": "Yes",
"text": "yes"
},
{
"type": "message",
"label": "No",
"text": "no"
}
]
}
}
}

04

上記のように二択でのボタンメッセージが表示可能です。上記の場合例えば「Yes」を押すとYesというTextが出力されます。


■ボタンカルーセル

{
"line": {
"type": "template",
"altText": "this is a carousel template",
"template": {
"type": "carousel",
"columns": [
{
"title": title",
"text": "text",
"actions": [
{
"type": "message",
"label": "label",
"text": "text"
},
{
"type": "message",
"label": "label",
"text": "text"
},
{
"type": "message",
"label": "label",
"text": "text"
}
]
},
{
"title": title",
"text": "text",
"actions": [
{
"type": "message",
"label": "label",
"text": "text"
},
{
"type": "message",
"label": "label",
"text": "text"
},
{
"type": "message",
"label": "label",
"text": "text"
}
]
}

],
"imageAspectRatio": "rectangle",
"imageSize": "cover"
}
}
}

05

ボタンテンプレートを2つ以上、最大4つまで表示出力することが可能で、さらにカルーセル形式で横に同様のテンプレートを最大10個作成することが可能です。


■ボタンテンプレート

{
"line": {
"type": "template",
"altText": "This is a buttons template",
"template": {
"type": "buttons",
"thumbnailImageUrl": "https://example.com/bot/images/image.jpg",
"imageAspectRatio": "rectangle",
"imageSize": "cover",
"imageBackgroundColor": "#FFFFFF",
"title": "Menu",
"text": "Please select",
"actions": [
{
"type": "postback",
"label": "Buy",
"data": "action=buy&itemid=123"
},
{
"type": "postback",
"label": "Add to cart",
"data": "action=add&itemid=123"
},
{
"type": "uri",
"label": "View detail",
"uri": "http://example.com/page/123"
}
]
}
}
}

06

ボタンテンプレートを2つ以上、最大4つまで表示出力することが可能です。


■画像

{
"line":{
"type": "image",
"originalContentUrl": "https://example.com/original.jpg",
"previewImageUrl": "https://example.com/preview.jpg"
}
}

07

画像単体を表示することが可能です。


■動画

{
"line":{
"type": "video",
"originalContentUrl": "https://example.com/original.mp4",
"previewImageUrl": "https://example.com/preview.jpg"
}
}

08

動画ファイル単体を出力することが可能です。


■画像カルーセル

{
"line": {
"type": "template",
"altText": "this is a image carousel template",
"template": {
"type": "image_carousel",
"columns": [
{
"imageUrl": "https://xxxx.jpg",
"action": {
"type": "message",
"label": "xxxx",
"text": "yyyyyyyy"
}
}
]
}
}
}

09

上記のようにカルーセル形式で画像を表示することが出来ます。ステータスのactionにて画像をタップしたときに出力する内容を設定することが可能です。
※選択できる形式は以下のリンクからご確認ください。
https://developers.line.me/ja/reference/messaging-api/#action-objects


■イメージマップメッセージ

{
"line": {
"type": "imagemap",
"baseUrl": "https://marianaocean.com/wp-content/uploads/2018/02",
"altText": "This is an imagemap",
"baseSize": {
"height": 1040,
"width": 1040
},
"actions": [
{
"type": "message",
"text": "テンプレートから選ぶ",
"area": {
"x": 0,
"y": 0,
"width": 1040,
"height": 520
}
},
{
"type": "message",
"text": "自分のデータを持ち込む",
"area": {
"x": 0,
"y": 520,
"width": 1040,
"height": 520
}
}
]
}
}

10

正方形(1024px×1024px)の中で上記のように分割し各領域に画像を設定、また画像カルーセルと同じように画像をタップすることでactionsパラメータに設定した出力を実行することが可能です。


今回は、IntegrationのLINEの「Custom Payload」のサンプルコードについてご紹介しました。前述でもお話しした通り、Facebook MessengerなどでもCustom Payloadはあるので、上記のような様々な表示形式を設定したい場合はADD RESPONSESのテンプレートではなくCustom Payloadで記載してみましょう。コードを書く練習にもなるのでトライアンドエラーで試してみましょう!

ご覧いただきありがとうございました!

タグ:


参考になったら「いいね!」と「シェア」をお願いします!!

このエントリーをはてなブックマークに追加
AI(人工知能)入門セミナー開催中
AI(人工知能)入門セミナー AI(人工知能)入門セミナー

AI入門ブログの中の人

AI研究所 研究スタッフ
通称:マサミ
アメリカ・サンフランシスコにある情報メディアの専門学校を卒業。大手金融会社での事務経験を経て、2016年9月よりAI研究所に入所。見習い研究員として、AI技術を日々勉強中。

Facebookページ