LANG SELRCT

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

2018年12月29日土曜日

LINE BOTで「ボタン」テンプレートメッセージをPUSHしてみる


「ボタン」テンプレートメッセージは以前
LINE BOTで「ボタン」テンプレートメッセージを表示する
ということをやってみました

それを元にして
今回はPUSHメッセージを利用して
任意のタイミングでこのようなテンプレートメッセージを表示してみます

元の記事と異なる点
  1. アクセストークンとuser IDはスクリプトのプロパティに保存しています
  2. thumbnailImageUrlは今回利用しないのでコメントアウトしています
  3. fetch_data(postData, url)でそれぞれのurlを渡すようにしています
    • 理由は「今回ぶつかった壁」に書きました


元の記事でやっていたことのおさらい

元の記事では「button」というメッセージが送られた時に
このようなテンプレートメッセージを返して
それぞれ反応する選択肢を配置していました




コード.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 push_message(e) {
    var postData = {
      "to": get_user_id(),
      "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": "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);
}


関連記事


今回ぶつかった壁

fetch_data(){} の関数が元の記事では

function fetch_data(postData) {}
になっていますが、今回はurlも渡して

function fetch_data(postData, url) {}
のようにしました。

これはpushで使うurlとreplyで使うurlが異なるためです。

UrlFetchApp.fetch(url, options)を共通処理にしているので、
元記事のまま
"https://api.line.me/v2/bot/message/reply"
にしたらPUSHできなくて

PUSHしたくて
"https://api.line.me/v2/bot/message/push"
にしたらpostbackでreplyが効かなくなってしまい、、

それに気づくのにちょっと手こずってしまいました。