テンプレートメッセージの「ボタン」表示してみましょう
LINE BOT Button Template messages
公式リファレンスでここに書かれていることを実際にやってみます
LINE BOTをつくる方法はこちらの記事にまとめました
以下のコードは、buttonと入力すると、ボタンテンプレートメッセージが返ってくる例です
コード.gs
var CHANNEL_ACCESS_TOKEN = "TOKEN";
function doPost(e) {
var contents = e.postData.contents;
var obj = JSON.parse(contents);
var events = obj["events"];
for (var i = 0; i < events.length; i++) {
if (events[i].type == "message") {
reply_message(events[i]);
} else if (events[i].type == "postback") {
post_back(events[i]);
}
}
}
function reply_message(e) {
var input_text = e.message.text;
if (input_text == "button") {
var postData = {
"replyToken": e.replyToken,
"messages": [{
"type": "template",
"altText": "select",
"template": {
"type": "buttons",
"thumbnailImageUrl": "https://~.png",
"title": "Menu",
"text": "Please select",
"actions": [{
"type": "postback",
"label": "postback",
"data": "postback selected"
},
{
"type": "message",
"label": "message",
"text": "text:message"
},
{
"type": "uri",
"label": "uri",
"uri": "https://linecorp.com"
},
{
"type": "datetimepicker",
"label": "datetimepicker",
"data": "datetimepicker selected",
"mode": "datetime",
"initial": "2017-10-25T00:00",
"max": "2017-12-31T23:59",
"min": "2017-01-01T00:00"
}
]
}
}]
};
}
fetch_data(postData);
}
function post_back(e) {
var data = e.postback.data;
var replay_text = "";
if (data == "postback selected") {
replay_text = data;
} else if (data == "datetimepicker selected") {
replay_text = data + "\n" + e.postback.params['datetime'];
}
var postData = {
"replyToken": e.replyToken,
"messages": [{
"type": "text",
"text": replay_text + "\n" + JSON.stringify(e.postback)
}]
};
fetch_data(postData);
}
function fetch_data(postData) {
var options = {
"method": "post",
"headers": {
"Content-Type": "application/json",
"Authorization": "Bearer " + CHANNEL_ACCESS_TOKEN
},
"payload": JSON.stringify(postData)
};
UrlFetchApp.fetch("https://api.line.me/v2/bot/message/reply", options);
}
|
意訳.gsアクセストークンを設定する この処理は以下を実行する 送信されたデータの内容を取得し そのJSONをオブジェクトに変換し eventsを取得する eventsの数だけ以下を繰り返す もしtypeが message なら reply_messageに渡す もしtypeが postback なら post_backに渡す この処理は以下を実行する 入力されたtextを取得して もしそれが button なら postDataに replyTokenを設定し messagesの typeをtemplateに設定し altTextを設定し templateの typeをbuttonsに設定し thumbnailImageUrlを設定し titleを設定し textを設定し actionsの 1つ目のtypeをpostbackに設定し labelを設定し dataを設定する 2つ目のtypeをmessageに設定し labelを設定し textを設定する 3つ目のtypeをuriに設定し labelを設定し uriを設定する 4つ目のtypeをdatetimepickerに設定し labelを設定し dataを設定し modeを設定し initialを設定し maxを設定し minを設定する fetch_dataにpostDataを渡す この処理は以下を実行する 受け取ったpostbackからdataを取得し replay_textという入れ物を作り もしdataがpostback selectedなら replay_textにそれを入れる もしdataがdatetimepicker selectedなら replay_textにdataと改行と受け取ったdatetimeを入れる postDataに replyTokenを設定し messagesの typeをtextに設定し textにreplay_textと改行とJSON文字列に変換した値を設定する fetch_dataにpostDataを渡す この処理は以下を実行する optionsに methodを設定し headersに Content-Typeを設定し Authorizationを設定し payloadにはpostDataをJSONに変換したものを設定する optionをつけてLINEのmessage reply APIをたたく |
おまけ
JSON.stringify(e.postback)について
datetimepickerで日時を送信したあと
その送信した日時の取得方法がわからなかった
リファレンスだけではよくわからなかったので
e.postbackでどんな値が取得できるのか
まず見えるようにしようと思い
JSON.stringify(e.postback)を追加しています
上のコード.gsの例で
それぞれのボタンを押すと
以下のようなメッセージが返ってきます
postbackボタンは
"type": "postback",
"label": "postback",
"data": "postback selected"
というコードなので
postback selected
{"data":"postback selected"}
と返ってきました
取得できるのはdataのみのようです
messageボタンは
"type": "message",
"label": "message",
"text": "text:message"
というコードなので
text:message
と返ってきました
uriボタンは
"type": "uri",
"label": "uri",
"uri": "https://linecorp.com"
というコードなので
これは特になにも送受信せず
uriで設定したページ（例ではLINE株式会社のホームページ）へ飛びます
datetimepickerボタンは
"type": "datetimepicker",
"label": "datetimepicker",
"data": "datetimepicker selected",
"mode": "datetime",
"initial": "2017-10-25T00:00",
"max": "2017-12-31T23:59",
"min": "2017-01-01T00:00"
というコードなので
datetimepicker selected
2017-10-25T00:00
{"data":"datetimepicker selected","params":{"datetime":"2017-10-25T00:00"}}
と返ってきました
取得できるのは
dataと
paramsのdatetime
のようです
ちなみに
modeをdataやtimeにして
initialやmax, minをそれぞれ設定すると
日付けや時間のみになるようです
initialをいれないと
現在日時が初期値になりました
