LANG SELRCT

コードを書く場所についてはこちら

2017年10月28日土曜日

LINE BOTで「画像カルーセル」テンプレートを表示する




テンプレートメッセージの「画像カルーセル」表示してみましょう
カルーセルテンプレート同様
最大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をたたく