LINE Bot 日時選択アクションを今あるBOTに追加実装したい （引用記事あり）

Question

前提・実現したいこと

LINE公式ドキュメントを参考にGASを使って「日時選択アクション」の
APIをを用いて現在あるBOTに日時選択アクションを実装したいです。

発生している問題・エラーメッセージ

公式ドキュメントや
引用記事を参考にしましたが
どのように実装していけば良いのか
路頭に迷っております。

色々、記述を書き換えてみましたが
うまく動作しません、、、

該当のソースコード

  if (type === null) {
    //予定の追加
    if (messageText === "予定の追加") {
      cache.put("type", 1);
    //開始日時の質問
      replyPlans(replyToken, "予定日をいずれかの形式で教えてください！", "【 06/18 】or【 6月18日 】", "などの形式なら大丈夫です！");
    //今日、７日間の予定の取得
    } else if (messageText.match("今日の予定")) {
      reply(replyToken, getEvents());
    }  else if (messageText.match("今週の予定")) {
      reply(replyToken, notifyWeekly());
    } else {
    //処理方法の返答
      replyPlans(replyToken, "「予定の追加」で予定追加します", "「今日の予定」で今日の予定をお知らせします。", "「今週の予定」で7日間の予定をお知らせします！");
    }
  } else {
    //キャンセル処理
    if (messageText === "キャンセル") {
      cache.remove("type");
      reply(replyToken, "予定追加のキャンセルをしました");
      return;
    } 

    switch(type) {
      case "1":
        // 開始日時の追加
        if ( messageText.match(dateExp)) {
          var [matched, start_month, start_day] = messageText.match(dateExp);
          cache.put("type", 2);
          cache.put("start_month", start_month);
          cache.put("start_day", start_day);
          //終了日時の質問
          var year = new Date().getFullYear();
          //var year = 2020;
          var startDate = new Date(year, cache.get("start_month") - 1, cache.get("start_day"));
          reply(replyToken,"予定日は\n" + EventFormat(startDate) + "\nですね！\n\n次に予定終了日をお知らせください。");
          break;
        }else{
          reply(replyToken, "予定追加処理中です。\n「キャンセル」\nで追加作業をキャンセルします。");
          break;
        }
      case "2":
        // 終了日時の追加
        if ( messageText.match(dateExp)) {
          var [matched, end_month, end_day] = messageText.match(dateExp);
          cache.put("type", 3);
          cache.put("end_month", end_month);
          cache.put("end_day", end_day);
          //予定名の質問
          var year = new Date().getFullYear();
          //var year = 2020;
          var endDate = new Date(year, cache.get("end_month") - 1, cache.get("end_day"));
          reply(replyToken,"予定終了日は\n" + EventFormat(endDate) + "\nですね。\n\n最後に予定名を教えてください。");
          break;
        }else{
          reply(replyToken, "予定追加処理中です。\n「キャンセル」\nで追加作業をキャンセルします。");
          break;
        }
      case "3":
        // 最終確認
        cache.put("type", 4);
        cache.put("title", messageText);
        var [title, startDate, endDate] = createData(cache);
        //予定追加の確認
        replyPlans(replyToken, "【予定名】：" + title, "予定日：\n" + EventFormat(startDate)+ "\n予定終了日：\n" + EventFormat(new Date(endDate.setDate(endDate.getDate() - 1))), "予定を追加しますか？\n「はい」か「いいえ」でお知らせください。");
        break;
      case "4":
        if (messageText === "はい") {
          cache.remove("type");
          var [title, startDate, endDate] = createData(cache);
          CalendarApp.getDefaultCalendar().createAllDayEvent(title, startDate, endDate);
          reply(replyToken, "予定を追加しました");
        } else if (messageText === "いいえ") {
          cache.remove("type");
          reply(replyToken, "予定の追加をキャンセルしました。");
        } else{
          reply(replyToken, "「はい」か「いいで」でお答えください。");
          break;
        }
        break;
    }
  }
}

function createData(cache) {
  var year = new Date().getFullYear();
  //var year = 2020;
  var title = cache.get("title");
  var startDate = new Date(year, cache.get("start_month") - 1, cache.get("start_day"));
  var endDate = new Date(year, cache.get("end_month") - 1, cache.get("end_day"));
  endDate = new Date(endDate.setDate(endDate.getDate() + 1));
  return [title, startDate, endDate];
}

function EventFormat(Date) {
  var y = Date.getFullYear();
  var m = Date.getMonth() + 1;
  var d = Date.getDate();
  var w = Date.getDay();
  var weekname = ['日', '月', '火', '水', '木', '金', '土'];
  m = ('0' + m).slice(-2);
  d = ('0' + d).slice(-2);
  return y + '年' + m + '月' + d + '日 (' + weekname[w] + ')\n';
}

function replyPlans(replyToken, message, message2, message3) {
  var url = "https://api.line.me/v2/bot/message/reply";
  UrlFetchApp.fetch(url, {
    "headers": {
      "Content-Type": "application/json; charset=UTF-8",
      "Authorization": "Bearer " + CHANNEL_ACCESS_TOKEN,
    },
    "method": "post",
    "payload": JSON.stringify({
      "replyToken": replyToken,
      "messages": [{
        "type": "text",
        "text": message,
      },{
        "type": "text",
        "text": message2,
      },{
        "type": "text",
        "text": message3,
      }],
    }),
  });
  return ContentService.createTextOutput(JSON.stringify({"content": "post ok"})).setMimeType(ContentService.MimeType.JSON);
}

function reply(replyToken, message) {
  var url = "https://api.line.me/v2/bot/message/reply";
  UrlFetchApp.fetch(url, {
    "headers": {
      "Content-Type": "application/json; charset=UTF-8",
      "Authorization": "Bearer " + CHANNEL_ACCESS_TOKEN,
    },
    "method": "post",
    "payload": JSON.stringify({
      "replyToken": replyToken,
      "messages": [{
        "type": "text",
        "text": message,
      }],
    }),
  });
  return ContentService.createTextOutput(JSON.stringify({"content": "post ok"})).setMimeType(ContentService.MimeType.JSON);
}


}

function HmFormat(date){
  return Utilities.formatDate(date, "JST", "HH:mm");
}

補足情報（引用記事になります！）

引用記事はこちらになります！
https://arukayies.com/gas/line_bot/datetime-picker-action

公式ドキュメントはこちら
https://developers.line.biz/ja/reference/messaging-api/#uri-action

Comments

[退会済みユーザー]

createData関数が動かないコードになっていますが、ここもわからないということでしょうか？

[SA-KYO]

ご回答ありがとうございます。
すみません！コートの記述を色々試していたもので
そのまま載せてしましました、、、
修正させていただいております！
createData関数の関しましては
ご教授いただきましたおかげで
理解ができました！ありがとうございました。

今回の件も申し訳ありませんが
ご教授いただけると幸いです????‍♂️

Answer 1

下記のコード例では、datetime　picker表示用に新たにpushDatePickerという関数を作っています。

日付を質問する時は、この関数に、表示させたいメッセージと一緒にリプライトークンを渡すようにします。

      //開始日時の質問
      pushDatePicker("開始日を入力してください", replyToken);

ユーザーがdatetime　pickerを利用して日付を入力したときにGASに返ってくるデータは、リプライデータと構造が異なるため、冒頭で条件分岐しています。
datetime　picker経由で入力されたデータか否かは、イベントタイプがpostbackかどうかで判断できます。
（ここでは、イベントタイプが"postback"であれば datetime　picker経由で入力されたデータ
そうでなければ、通常のリプライデータ）

  var messageText = "";
  if (eventtype == "postback") {
    messageText = event.postback.params.datetime;
  } else {
    messageText = event.message.text;
  }

また、datetime　pickerを利用して入力された日付時刻データは「2021-08-24T12:34」のような形式になっているため
この形式にマッチするように正規表現のパターンも変えておく必要があります。

var dateExp2 = /(\d+)-(\d+)T\d+:\d+/;

pushDatePicker関数で記事のコードから変えたのは、
・初期値を現在日時とするようにした。 ("initial": Utilities.formatDate(new Date(), "Asia/Tokyo", "yyyy-MM-dd'T'HH:mm"),)
・メッセージを変数にした
・最大・最小は不要なのでコメントアウト
等です。

---

全体は下記のようになります。

var dateExp2 = /(\d+)-(\d+)T\d+:\d+/;

略

//受け取ったメッセージの処理
function doPost(e) {
  var event = JSON.parse(e.postData.contents).events[0]
  var replyToken = event.replyToken;
  var eventtype = event.type;
  if (typeof replyToken === 'undefined') {
    return;
  } 
  var messageText = "";
  if (eventtype == "postback") {
    messageText = event.postback.params.datetime;
  } else {
    messageText = event.message.text;
  }
  var cache = CacheService.getScriptCache();
  var type = cache.get("type");
  
  if (type === null) {
    //予定の追加
    if (messageText === "予定の追加") {
      cache.put("type", 1);
      //開始日時の質問
      pushDatePicker("開始日を入力してください", replyToken);
      //今日、７日間の予定の取得 
    } else if (messageText.match("今日の予定")) {
      reply(replyToken, getEvents());
    } else if (messageText.match("今週の予定")) {
      reply(replyToken, notifyWeekly());
    } else {
      //処理方法 の返答 
      replyPlans(replyToken, "「予定の追加」で予定追加します。", "「今日の予定」で今日の予定をお知らせします。", "「今週の予定」で7日間の予定をお知らせします。");
    }
  } else {
    //キャンセル処理 
    if (messageText === "キャンセル") {
      cache.remove("type");
      reply(replyToken, "予定追加のキャンセルをしました");
      return;
    }

    switch (type) {
      case "1":
        //開始日時の追加
        if (messageText.match(dateExp2)) {
          var [matched, start_month, start_day] = messageText.match(dateExp2);
          cache.put("type", 2);
          cache.put("start_month", start_month);
          cache.put("start_day", start_day);

          //終了日時の質問
          var year = new Date().getFullYear();
          var startDate = new Date(year, cache.get("start_month") - 1, cache.get("start_day"));
          //pushDatePicker("開始日は\n"+ EventFormat(startDate) + "\nですね。\n\n次に予定の終了日時をお知らせください。", userId);
          pushDatePicker("次に終了日を入力してください。", replyToken);

          break;
        } else {
          reply(replyToken, "予定追加処理中です。\n「キャンセル」\nで追加作業をキャンセルします。");
          break;
        } 
      case "2":
        // 終了日時の追加
        if (messageText.match(dateExp2)) {
          var [matched, end_month, end_day] = messageText.match(dateExp2);
          cache.put("type", 3);
          cache.put("end_month", end_month);
          cache.put("end_day", end_day);
          //予定名の質問
          var year = new Date().getFullYear();
          var endDate = new Date(year,cache.get("end_month")-1, cache.get("end_day"));

          reply(replyToken, "終了日時は\n"+EventFormat(endDate)+"\n ですね。\n\n最後に予定名を教えてください。");
          break;
        }else{
          reply(replyToken,"予定追加処理中です。\n「キャンセル」\nで追加作業をキャンセルします。");
          break;
        }
      case "3":
        //最終確認 
        cache.put("type", 4);
        cache.put("title", messageText);
        var [title, startDate, endDate] = createData(cache);
        //予定追加の確認
        replyPlans(replyToken, "予定名："+title,"開始日時：\n"+EventFormat(startDate)+"\n終了日時：\n"+
          EventFormat(new Date(endDate.setDate(endDate.getDate() - 1))),
          "予定を追加しますか？\n「はい」か「いいえ」でお知らせください。");
        break;
      case "4":
        if (messageText === "はい") {
          cache.remove("type");
          var [title, startDate, endDate]=createData(cache);
          CalendarApp.getDefaultCalendar().createAllDayEvent(title, startDate, endDate);
          reply(replyToken,"お疲れ様です\nGoogleカレンダーに予定を追加しました");
        } else if (messageText === "いいえ") {
          cache.remove("type");
          reply(replyToken, "予定の追加をキャンセルしました。");
        } else {
          reply(replyToken, "「はい」か「いいえ」でお答えください。");
          break;
        }
        break;
    }   
  }
}


function pushDatePicker(message, replyToken) {
  var url = "https://api.line.me/v2/bot/message/reply";
  UrlFetchApp.fetch(url, {
    "headers": {
      "Content-Type": "application/json; charset=UTF-8",
      "Authorization": "Bearer "+ CHANNEL_ACCESS_TOKEN,
    },
    "method": "post",
    "payload": JSON.stringify({
      "replyToken": replyToken,
      "messages": [
        {
          "type": "template",
          "altText": "datetime_picker",
          "template": {
            "type": "buttons",
            "thumbnailImageUrl": "https://placehold.jp/640x480.jpg?text=datetime_picker", // 画像のURL
            "imageAspectRatio": "rectangle", // 画像のアスペクト比、「rectangle: 1.51:1」・「square: 1:1」、デフォルト値はrectangle
            "imageSize": "cover", // 画像の表示形式
            "imageBackgroundColor": "#FFFFFF", // 画像の背景色
            "title": "メニュー",
            "text": message,
            "defaultAction": {
              "type": "uri",
              "label": "View detail",
              "uri": "https://www.line.me/"
            },
            "actions": [
              {
                "type": "datetimepicker",
                "label": "ここをタップ",
                "data": "action=settime",
                "mode": "datetime",
                "initial": Utilities.formatDate(new Date(), "Asia/Tokyo", "yyyy-MM-dd'T'HH:mm"),
                // "max": "2018-01-24t23:59",
                // "min": "2017-12-25t00:00"
              }
            ]
          }
        }
      ],
      "notificationDisabled": false // trueだとユーザーに通知されない
    }),
  });
    
  return// ContentService.createTextOutput(JSON.stringify({ "content": "postok"})).setMimeType(ContentService.MimeType.JSON);

}

createData(cache)他
--->略 （現状から変えなくてよいはず）

Comments

[SA-KYO]

毎回本当にご丁寧に回答・お教えくださり本当にありがとうございます。
感謝してもしきれないぐらい感謝の念に堪えません。
的確で、要所での解説もあり本当にわかりやすいです。
記述コードを丸写でコピーで終わるのではなく、
どのような意味があるのかまで解説いただいているので
本当にわかりやすいです。

そこで追記質問で申し訳ないのですが
一応全て書き換えてみたのですが
どうも『予定の追加』がうまく動作しなくなりました????

どこか変になってしまっているのでしょうか？
重ね重ねで申し訳ありませんが
後少しお力をいただけると助かります、、

お忙しいところ大変恐縮ではございますが
どうかよろしくお願い致します????‍♂️

↓完成した記述コード↓

var CHANNEL_ACCESS_TOKEN = "アクセストークン";
// var dateExp = /(\d+)[/月](\d+)/;
var dateExp2 = /(\d+)-(\d+)T\d+:\d+/;

//doPost関数（Lineからメッセージを受け取る）
function doPost(e) {
GetMessage(e);
}

//受け取ったメッセージの処理
function GetMessage (e) {
var event = JSON.parse(e.postData.contents).events[0]
var replyToken = event.replyToken;
var userId = event.source.userId;
var eventtype = event.type;
if (typeof replyToken === 'undefined') {
return;
}
var messageText = "";
if (eventtype == "postback") {
messageText = event.postback.params.datetime;
} else {
messageText = event.message.text;
}
var cache = CacheService.getScriptCache();
var type = cache.get("type");

if (type === null) {
//予定の追加
if (messageText === "予定の追加") {
cache.put("type", 1);
//開始日時の質問
pushDatePicker("開始日を入力してください", userId);
//今日、７日間の予定の取得
} else if (messageText.match("今日の予定")) {
reply(replyToken, getEvents());
} else if (messageText.match("今週の予定")) {
reply(replyToken, notifyWeekly());
} else {
//処理方法 の返答
replyPlans(replyToken, "「予定の追加」で予定追加します。", "「今日の予定」で今日の予定をお知らせします。", "「今週の予定」で7日間の予定をお知らせします。");
}
} else {
//キャンセル処理
if (messageText === "キャンセル") {
cache.remove("type");
reply(replyToken, "予定追加のキャンセルをしました");
return;
}

switch (type) {
case "1":
//開始日時の追加
if (messageText.match(dateExp2)) {
var [matched, start_month, start_day] = messageText.match(dateExp2);
cache.put("type", 2);
cache.put("start_month", start_month);
cache.put("start_day", start_day);

//終了日時の質問
var year = new Date().getFullYear();
var startDate = new Date(year, cache.get("start_month") - 1, cache.get("start_day"));
pushDatePicker("開始日は\n"+ EventFormat(startDate) + "\nですね。\n\n次に予定の終了日時をお知らせください。", userId);
break;
} else {
reply(replyToken, "予定追加処理中です。\n「キャンセル」\nで追加作業をキャンセルします。");
break;
}
case "2":
// 終了日時の追加
if (messageText.match(dateExp2)) {
var [matched, end_month, end_day] = messageText.match(dateExp2);
cache.put("type", 3);
cache.put("end_month", end_month);
cache.put("end_day", end_day);
//予定名の質問
var year = new Date().getFullYear();
var endDate = new Date(year,cache.get("end_month")-1, cache.get("end_day"));

reply(replyToken, "終了日時は\n"+EventFormat(endDate)+"\n ですね。\n\n最後に予定名を教えてください。");
break;
}else{
reply(replyToken,"予定追加処理中です。\n「キャンセル」\nで追加作業をキャンセルします。");
break;
}
case "3":
//最終確認
cache.put("type", 4);
cache.put("title", messageText);
var [title, startDate, endDate] = createData(cache);
//予定追加の確認
replyPlans(replyToken, "予定名："+title,"開始日時：\n"+EventFormat(startDate)+"\n終了日時：\n"+
EventFormat(new Date(endDate.setDate(endDate.getDate() - 1))),
"予定を追加しますか？\n「はい」か「いいえ」でお知らせください。");
break;
case "4":
if (messageText === "はい") {
cache.remove("type");
var [title, startDate, endDate]=createData(cache);
CalendarApp.getDefaultCalendar().createAllDayEvent(title, startDate, endDate);
reply(replyToken,"お疲れ様です\nカレンダーに予定を追加しました");
} else if (messageText === "いいえ") {
cache.remove("type");
reply(replyToken, "予定の追加をキャンセルしました。");
} else {
reply(replyToken, "「はい」か「いいえ」でお答えください。");
break;
}
break;
}
}
}

function pushDatePicker(message, userId) {

UrlFetchApp.fetch(url, {
"headers": {
"Content-Type": "application/json; charset=UTF-8",
"Authorization": "Bearer "+ CHANNEL_ACCESS_TOKEN,
},
"method": "post",
"payload": JSON.stringify({
"to": userId,
"messages": [
{
"type": "template",
"altText": "datetime_picker",
"template": {
"type": "buttons",
"thumbnailImageUrl": "https://placehold.jp/640x480.jpg?text=datetime_picker", // 画像のURL
"imageAspectRatio": "rectangle", // 画像のアスペクト比、「rectangle: 1.51:1」・「square: 1:1」、デフォルト値はrectangle
"imageSize": "cover", // 画像の表示形式
"imageBackgroundColor": "#FFFFFF", // 画像の背景色
"title": "メニュー",
"text": message,
"defaultAction": {
"type": "uri",
"label": "View detail",
"uri": "https://www.line.me/"
},
"actions": [
{
"type": "datetimepicker",
"label": "日時を選択してください。",
"data": "action=settime",
"mode": "datetime",
"initial": Utilities.formatDate(new Date(), "Asia/Tokyo", "yyyy-MM-dd'T'HH:mm"),
// "max": "2018-01-24t23:59",
// "min": "2017-12-25t00:00"
}
]
}
}
],
"notificationDisabled": false // trueだとユーザーに通知されない
}),
});

return ContentService.createTextOutput(JSON.stringify({ "content": "postok"})).setMimeType(ContentService.MimeType.JSON);

}

// function createData(cache) {
// 略 （現状から変更なし）
// }

function createData(cache) {
var year = new Date().getFullYear();
//var year = 2020;
var title = cache.get("title");
var startDate = new Date(year, cache.get("start_month") - 1, cache.get("start_day"));
var endDate = new Date(year, cache.get("end_month") - 1, parseInt(cache.get("end_day")) + 1 );
var endDate = new Date(year, cache.get("end_month") - 1, cache.get("end_day"));
endDate = new Date(endDate.setDate(endDate.getDate() + 1));
return [title, startDate, endDate];
}

function EventFormat(Date) {
var y = Date.getFullYear();
var m = Date.getMonth() + 1;
var d = Date.getDate();
var w = Date.getDay();
var weekname = ['日', '月', '火', '水', '木', '金', '土'];
m = ('0' + m).slice(-2);
d = ('0' + d).slice(-2);
return y + '年' + m + '月' + d + '日 (' + weekname[w] + ')\n';
}

function replyPlans(replyToken, message, message2, message3) {
var url = "https://api.line.me/v2/bot/message/reply";
UrlFetchApp.fetch(url, {
"headers": {
"Content-Type": "application/json; charset=UTF-8",
"Authorization": "Bearer " + CHANNEL_ACCESS_TOKEN,
},
"method": "post",
"payload": JSON.stringify({
"replyToken": replyToken,
"messages": [{
"type": "text",
"text": message,
},{
"type": "text",
"text": message2,
},{
"type": "text",
"text": message3,
}],
}),
});
return ContentService.createTextOutput(JSON.stringify({"content": "post ok"})).setMimeType(ContentService.MimeType.JSON);
}

function reply(replyToken, message) {
var url = "https://api.line.me/v2/bot/message/reply";
UrlFetchApp.fetch(url, {
"headers": {
"Content-Type": "application/json; charset=UTF-8",
"Authorization": "Bearer " + CHANNEL_ACCESS_TOKEN,
},
"method": "post",
"payload": JSON.stringify({
"replyToken": replyToken,
"messages": [{
"type": "text",
"text": message,
}],
}),
});
return ContentService.createTextOutput(JSON.stringify({"content": "post ok"})).setMimeType(ContentService.MimeType.JSON);
}

//今日の予定
function getEvents() {
var events = CalendarApp.getDefaultCalendar().getEventsForDay(new Date());
var body = "今日の予定は\n";

if (events.length === 0) {
body += "ありません。";
return body;
}

body += "\n";
events.forEach(function(event) {
var title = event.getTitle();
body += "????" + title + "\n";
});
body += "\nです！";
return body;
}

//７日間の予定
function notifyWeekly() {
var body = "1週間の予定は\n\n";
var weekday = ["日", "月", "火", "水", "木", "金", "土"];
for ( var i = 0; i < 7; i++ ) {

var dt = new Date();
dt.setDate(dt.getDate()+i);
var events = CalendarApp.getDefaultCalendar().getEventsForDay(dt);
body += Utilities.formatDate(dt, "JST", '???? MM/dd(' + weekday[dt.getDay()] + ')') + "\n";
if (events.length === 0) {
body += "ありません。\n";
}

events.forEach(function(event) {
var title = event.getTitle();
body += title + "\n";
});
}
return body;
}

function HmFormat(date){
return Utilities.formatDate(date, "JST", "HH:mm");
}

[退会済みユーザー]

コードを修正しました。
pushDatePickerにurlを記載していなかったこちらのミスでした。

日時選択する場合もプッシュメッセージである必要はなく、通常のリプライでよさそうなので冒頭から書き換えてあります。

[SA-KYO]

迅速にご回答、修正いただきありがとうございます。
しっかりと動作致しました。
嬉しくて笑顔が溢れてしまいます。
本当に何度もお助け、お力いただきありがとうございます。