LANG SELRCT

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

2017年10月28日土曜日

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



テンプレートメッセージでYES/NOの確認メッセージを表示してみましょう
LINE BOT Confirm Template messages

公式リファレンスでここに書かれていることを実際にやってみます



LINE BOTをつくる方法はこちらの記事にまとめました

以下のコードは、confirmと入力すると、確認テンプレートメッセージが返ってくる例です


コード.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 == "confirm") {
    var postData = {
      "replyToken": e.replyToken,
      "messages": [{
        "type": "template",
        "altText": "this is a confirm template",
        "template": {
          "type": "confirm",
          "text": "Are you sure?",
          "actions": [{
              "type": "message",
              "label": "Yes",
              "text": "yes"
            },
            {
              "type": "message",
              "label": "No",
              "text": "no"
            }
          ]
        }
      }]
    };
  }
  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を取得して
もしそれが confirm なら
postDataに
replyTokenを設定し
messagesの
typeをtemplateに設定し
altTextを設定し
templateの
typeをconfirmに設定し
textを設定し
actionsの
1つ目のtypeをmessageに設定し
labelを設定し
textを設定する


2つ目のtypeをmessageに設定し
labelを設定し
textを設定する






fetch_dataにpostDataを渡す



この処理は以下を実行する
optionsに
methodを設定し
headersに
Content-Typeを設定し
Authorizationを設定し

payloadにはpostDataをJSONに変換したものを設定する

optionをつけてLINEのmessage reply APIをたたく


おまけ




LINE BOTでテンプレートメッセージのボタンを表示する
で使ったdatetimepickerを利用して
日付けの確認をするメッセージを作ってみました

select date を押すと
日付け選択のウィンドウが出ます


選択できる日付けの範囲は以下のコードのmaxとminで設定できます


コード.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 == "confirm") {
    var postData = {
      "replyToken": e.replyToken,
      "messages": [{
        "type": "template",
        "altText": "this is a confirm template",
        "template": {
          "type": "confirm",
          "text": "When are you available?",
          "actions": [{
              "type": "datetimepicker",
              "label": "select date",
              "data": "datetimepicker selected",
              "mode": "date",
              "initial": "2017-10-29",
              "max":   "2017-10-31",
              "min": "2017-10-29"
            },
            {
              "type": "postback",
              "label": "none",
              "data": "none selected"
            }
          ]
        }
      }]
    };
  }
  fetch_data(postData);
}

function post_back(e) {
  var data = e.postback.data;
  var replay_text = "";
  if (data == "none selected") {
    replay_text = "none of them";
  } else if (data == "datetimepicker selected") {
    replay_text = e.postback.params['date'];
  }

  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を取得して
もしそれが confirm なら
postDataに
replyTokenを設定し
messagesの
typeをtemplateに設定し
altTextを設定し
templateの
typeをconfirmに設定し
textを設定し
actionsの
1つ目のtypeをdatetimepickerに設定し
labelを設定し
data(post_backで受け取る)のテキストを設定し
modeをdateに設定し
初期のdateを設定し
maxのdateを設定し
minのdateを設定する


2つ目のtypeをpostbackに設定し
labelを設定し
dataを設定する






fetch_dataにpostDataを渡す


この処理は以下を実行する
受け取ったpostbackからdataを取得し
replay_textという入れ物を作り
もしdataがnone selectedなら
replay_textに none of them を入れる
もしdataがdatetimepicker selectedなら
replay_textにdataと改行と受け取ったdateを入れる


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をたたく