テンプレートメッセージの「画像カルーセル」表示してみましょう
カルーセルテンプレート同様
最大5個まで並べられるようです
LINE BOT Image carousel Template messages (max 5 columns)
公式リファレンスでここに書かれていることを実際にやってみます
LINE BOTをつくる方法はこちらの記事にまとめました
以下のコードは、image carouselと入力すると、画像カルーセルテンプレートメッセージが返ってくる例です
postback, message, uriのボタンを押すと
それぞれ設定したactionが実行されます
https://developers.line.me/en/docs/messaging-api/reference/#template-messages
コード.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 == "image carousel") {
var postData = {
"replyToken": e.replyToken,
"messages": [{
"type": "template",
"altText": "this is a image carousel template",
"template": {
"type": "image_carousel",
"columns": [{
"imageUrl": "https://~.png",
"action": {
"type": "postback",
"label": "postback",
"data": "get url"
}
},
{
"imageUrl": "https://~.png",
"action": {
"type": "message",
"label": "message",
"text": "https://developers.line.me/en/docs/messaging-api/reference/#image-carousel"
}
},
{
"imageUrl": "https://~.png",
"action": {
"type": "uri",
"label": "uri",
"uri": "https://developers.line.me/en/docs/messaging-api/reference/#image-carousel"
}
}
]
}
}]
};
}
fetch_data(postData);
}
function post_back(e) {
var data = e.postback.data;
if (data == "get url") {
var replay_text = "https://developers.line.me/en/docs/messaging-api/reference/#image-carousel";
}
var postData = {
"replyToken": e.replyToken,
"messages": [{
"type": "text",
"text": replay_text
}]
};
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を取得して もしそれが carousel なら postDataに replyTokenを設定し messagesの typeをtemplateに設定し altTextを設定し templateの typeをimage_carouselに設定し columnsを以下のように設定する 1つ目のcolumnのimageUrlを設定する actionの typeを設定し labelを設定し dataを設定する 2つ目のcolumnのimageUrlを設定する actionの typeを設定し labelを設定し textを設定する 3つ目のcolumnのimageUrlを設定する actionの typeを設定し labelを設定し uriを設定する fetch_dataにpostDataを渡す この処理は以下を実行する 受け取ったpostbackからdataを取得し もしdataがget urlだったら replay_textに指定した値を入れる postDataに replyTokenを設定し messagesの typeをtextに設定し textにreplay_textを設定する fetch_dataにpostDataを渡す この処理は以下を実行する optionsに methodを設定し headersに Content-Typeを設定し Authorizationを設定し payloadにはpostDataをJSONに変換したものを設定する optionをつけてLINEのmessage reply APIをたたく |
