2018年12月29日土曜日

LINE BOTの「Flex Message」でpostbackを使ってみる


Flex Messgeは以前
LINE BOTで「Flex Message」を使ってみる
でどのように表示できるか試してみました

今回は任意のタイミングでPUSHして
postbackを使ったコードを書きました

postbackを使うと何がいいか
  • そのボタンを押した時に、そのボタンに設定したdataを返すことができる
※以下の例のURIボタンやmessageボタンのように、固定テキストを返したりページを開いたりするだけならpostback不要

ちなみに、ボタンテンプレートはスマホのみでしか表示できませんが、Flex MessageはMacでも表示されました


コード.gs 
function get_token() {
  return PropertiesService.getScriptProperties().getProperty('token');
}

function get_user_id() {
  return PropertiesService.getScriptProperties().getProperty('user_id');
}

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 == "postback") {
      post_back(events[i]);
    }
  }
}

function flex_message() {
  var postData = {
    "to": get_user_id(),
    "messages": [{
      "type": "flex",
      "altText": "this is a flex message",
      "contents":
      {
        "type": "bubble",
        "body": {
          "type": "box",
          "layout": "vertical",
          "spacing": "md",
          "contents": [
            {
              "type": "text",
              "text": "Please select"
            },

            {
              "type": "button",
              "style": "primary",
              "action": {
              "type": "postback",
              "label": "POSTBACK",
              "data": "postback selected"
              }
            },            
            
            {
              "type": "button",
              "style": "primary",
              "color": "#ffc0cb",
              "action": {
                "type": "uri",
                "label": "URI",
                "uri": "https://linecorp.com"
              }
            },

            {
              "type": "button",
              "style": "secondary",
              "action": {
              "type": "message",
              "label": "message",
              "text": "text:message"
              }
            },
            
            {
              "type": "button",
              "style": "primary",
              "style": "secondary",
              "color": "#7fffd4",
              "action": {
              "type": "datetimepicker",
              "label": "datetimepicker",
              "data": "datetimepicker selected",
              "mode": "datetime",
              "initial": "2018-12-29T00:00",
              "max": 　 "2019-10-15T23:59",
              "min": "2018-12-29T00:00"
              }
            }
           
          ]
        }
      }
    }]
  };
  var url = "https://api.line.me/v2/bot/message/push";
  fetch_data(postData, url);
}

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)
    }]
  };
  var url = "https://api.line.me/v2/bot/message/reply";
  fetch_data(postData, url);
}

function fetch_data(postData, url) {
  var options = {
    "method": "post",
    "headers": {
      "Content-Type": "application/json",
      "Authorization": "Bearer " + get_token()
    },
    "payload": JSON.stringify(postData)
  };
  UrlFetchApp.fetch(url, options);
}

関連記事