LANG SELRCT

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

2017年10月25日水曜日

LINE BOTで「ボタン」テンプレートメッセージを表示する



テンプレートメッセージの「ボタン」表示してみましょう
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をいれないと
現在日時が初期値になりました