LINEにチャットボットを搭載！画像や動画などの多彩な返答を設定する方法

こんにちは、AI研究所、駆け出し研究員のリョウタです。
今回は、DialogflowにあるIntegrationの中の一つ、「LINE」のCustom Payloadでチャットボットを開発する方法をご紹介したいと思います。

LINEのCustom Payloadとは

コミュニケーションアプリ「LINE」のCustom PayloadはLINE チャットボットを30開発することのできるものです。
Dialogflowには数多くのアプリケーションにコネクトし、接続した媒体のインターフェース上でDialogflowで作成したインテンツのテキスト内容をアウトプットすることが出来ます。
Dialogflowの使い方についてはこちらの記事を参考にしてみてください。

 

【プログラミング不要】Dialogflowを利用してSiriのように会話ができるチャットボットを開発しよう

 

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

LINEで実装したい機能を選択

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

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

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

上記の形式を、インテンツのResponcesから、コードを書くことなくテンプレートから簡単に選択することが出来ます。
勿論コードによって記載することも可能です。
コードによって上記のような表示形式を記載する場合は「Custom Payload」を選択することで、JavaScriptで記載することが可能です。
選択したアプリケーションによってコードが多少異なります。
各アプリケーションのドキュメントにサンプルコードが載っています。
上記のように数多くあるIntegration連携アプリケーションですが、この中でLINEのみ、専用のテンプレートがなく、全てCustom Payloadで記載しなければなりません。
そのため都度LINEにあるドキュメントを確認しなければなりません。
他のアプリケーションに比べて作成が非常に面倒くさいです。
またADD RESPONSESに備わっているテンプレートは「Image」「Card」「Quick Replies」のみであり、その他の出力形式を設定したい場合は各ドキュメントを確認しCustom Payloadの中でコードとして記載する必要があります。

LINEチャットボットのサンプルコード紹介

今回は、この中の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"
}
}
}

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

---

■ボタンテキスト

{
"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"
}
]
}
}
}

上記のように二択でのボタンメッセージが表示可能です。上記の場合例えば「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"
}
}
}

ボタンテンプレートを2つ以上、最大４つまで表示出力することが可能で、さらにカルーセル形式で横に同様のテンプレートを最大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"
}
]
}
}
}

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

---

■画像

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

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

---

■動画

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

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

---

■画像カルーセル

{
"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"
}
}
]
}
}
}

上記のようにカルーセル形式で画像を表示することが出来ます。ステータスの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
}
}
]
}
}

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

LINEチャットボットの開発・実装のまとめ

今回は、コミュニケーションアプリ LINEでチャットボットを開発する方法として、IntegrationのLINEの「Custom Payload」のサンプルコードについてご紹介しました。前述でもお話しした通り、Facebook MessengerなどでもCustom Payloadはあるので、上記のような様々な表示形式を設定したい場合はADD RESPONSESのテンプレートではなくCustom Payloadで記載してみましょう。チャットボットを事例をもとに勉強することで、コードを書く練習にもなるのでトライアンドエラーで開発してみましょう！

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

---