専属秘書を作ろう！ - #08 指定した日付の予定を確認する

Mr.Green＠ITxマーケティング｜やさしく・ふかく・おもしろく

2024年2月5日 09:04

前回、Googleカレンダーに登録されているカレンダーの中から通知したいカレンダーを選択する仕組みを構築しました。

これでムダなカレンダー通知を排除できますので、プライベートの予定や趣味の予定などを外して通知してくれるので使い勝手がよくなりますね。

さて今回は、指定した日の予定を確認してみることにしましょう。

Here we go！

⬇️ 過去の note をまだご覧になっていない方はこちら ⬇️

機能を追加する前に

機能を追加する前に、まずスプレッドシートやリッチメニューの内容を変更していきましょう。

"#04 リッチメニューを作成する①" では、テキスト(コマンド) を送らせる機能に対応することをお話しました。

⬇️ #04 リッチメニューを作成する① はこちら ⬇️

今回追加したい機能は「指定した日付の予定の確認」なので、"日付を指定してもらいたい" ですよね。

この日付も、2024年1月1日であったり、2024-1-1 であったり、2024/01/01 であったりと様々なフォーマットで送られてきては対応も大変です。

そこで、Messaging API のアクションの1つである "日時選択アクション" を使用してみましょう。

⬇️ 日時選択アクションの詳細はこちら ⬇️

これを使用すれば、日時選択ダイアログから日時を指定するようにユーザーに促すことができます。

これだとフォーマットがバラバラになったり、いろいろ対応しなければならなくなったり、といったことが無くなるので良さそうです。

前置きはこのぐらいにして、さっそく変更していきましょう。

スプレッドシートを変更する

機能(D列)に日付選択アクションを追加

これは、スプレッドシートの機能ですので詳細は割愛しますが、ここで機能を選択できるようにします。

プログラムに日付選択アクション対応を追加

機能によって設定項目を切り替えている箇所に "日付選択アクション" を追加します。

action = {
  "type": "datetimepicker",
  "label": allValues[i+j][RICHMENU_MESSAGE],
  "data": allValues[i+j][RICHMENU_MESSAGE],
  "mode": "date"
};

今回の場合は、"日付" だけが必要ですので、mode=date としています。

これでボタンを押すと、日付選択ダイアログが表示されるようになります。

ついでに LINE から受信したデータを見てみると、

・data=FunctionA-1　⇒　I列のメッセージ
・params.date=2024-01-09　⇒　選択した日付

上記のデータが送られてきています。

フォーマットもばらつくことなく、"yyyy-MM-dd" で固定されて送られてきますので、バッチリですね✨

正式な設定内容に変更する

受信メッセージに対応する前に…、正式な設定内容に変更しておきましょう。
まだテスト用の "FunctionA-1" で動作させていますので💦

リッチメニュー画像の変更

リッチメニューA、リッチメニューB の画像内容を以下に変更します。

・リッチメニューA
　・機能タイトル　⇒　カレンダー
　・FUNC1　⇒　予定を確認する (アイコンも適切なものに)
・リッチメニューB
　・リッチメニューA の機能タイトル　⇒　カレンダー

スプレッドシートの設定内容の変更

スプレッドシートの内容を以下のように変更します。

・リッチメニューA
　・画像リンクの変更　⇒　新たに作成した画像A の URL
　・FUNC1
　　・【機能】メッセージ　⇒【機能】日付選択
　　・【メッセージ】FunctionA-1　⇒　【メッセージ】予定確認
・リッチメニューB
　・画像リンクの変更　⇒　新たに作成した画像B の URL

すでにプログラムは作成していますので、内容を変更してメニューから設定すれば LINE に反映されます。

1月10日を指定して送付したところ、

・data=予定確認
・params.date=2024-01-10

上記のデータを受信していますので、問題無く設定されていますね👍

受信データに対応する

それでは、実際に受信したデータに対応していきましょう。

日付選択アクションによって返ってくるデータは、以下となります。

// 日付選択アクションのポストバックイベントの場合
{
  "destination": "U7b74f9ba63d6d056e55577a2fxxxxx",
  "events": [{
    "replyToken": "b60d432864f44d079f6d8efe86cf404b",
    "type": "postback",
    "mode": "active",
    "source": {
      "userId": "Udfcd513ce7719a39fb2fd20523a8xxxx",
      "type": "user"
    },
    "timestamp": 1704721853752,
    "webhookEventId": "01HKMNEBSF0NDAAGTA6QXVZWCP",
    "deliveryContext": {
      "isRedelivery": false
    },
    "postback": {
      "data": "予定確認",
      "params": {
        "date": "2024-01-10"
      }
    }
  }]
}

今回の機能では、

・events[0].type : postback
・events[0].postback.data : 予定確認
・events[0].postback.params.date : 選択した日付 (yyyy-MM-dd の形式)

が必要なデータとなります。

今後の機能追加も考慮して、受信データを解析する処理を追加しています。
※今のところ機能が一つだけなので、ムダな判別処理となっています💦

function analyzeMessage(message)
{
  const data = JSON.parse(message);
  const ev = data.events[0];

  switch(ev.type)
  {
    case EVTYPE_POSTBACK:
      switch(ev.postback.data)
      {
        case SCHEDULE_CHECK:
          replySchedule(ev.replyToken,ev.postback.params.date);
          break;
      }
      break;
  }
}

タイプが "postback" で、かつ "予定確認" を受信した場合に replySchedule() をコールして、指定したカレンダーの予定を返します。

カレンダーの指定の方法については、"#07 Googleカレンダーを設定する" をご参照ください。

⬇️ #07 Googleカレンダーを設定するはこちら ⬇️

replySchedule() 関数では、指定したカレンダーの「終日予定」と「時間指定予定」を分けてお知らせしたいので、それぞれ管理して返すようにしています。

let strallDay = "";
let strDay = "";
for( let val of values )
{
  if(val[SCHINDEX_HECK]===true)
  {
    const calender = CalendarApp.getCalendarById(val[SCHINDEX_ID]);
    const events = calender.getEventsForDay(new Date(date));
    for( let ev of events )
    {
      if( ev.isAllDayEvent()===true ){
        strallDay += "・"+ev.getTitle()+"\n";
      }
      else{
        strDay += "["+Utilities.formatDate(ev.getStartTime(),"JST","HH:mm")+"~"+Utilities.formatDate(ev.getEndTime(),"JST","HH:mm")+"] "+ev.getTitle()+"\n";
      }
    }
  }
}

let message = "【"+date.substring(SUBSTR_YEAR_BEGIN,SUBSTR_YEAR_END)+"年"+date.substring(SUBSTR_MONTH_BEGIN,SUBSTR_MONTH_END)+
  "月"+date.substring(SUBSTR_DAY_BEGIN,SUBSTR_DAY_END)+"日】\nの予定をお知らせします。\n\n";
message += "▼ 終日\n";
message += (strallDay===""?"予定はありません。\n":strallDay)+"\n";
message += "▼ 時間指定\n";
message += (strDay===""?"予定はありません。\n":strDay);

これで一通り、完成しました。

動作確認

サンプルカレンダーだとこのように指定しています。

テストのために 1月11日だけ予定をいろいろと入れています。

・Mr.Greenの予定
　・提出物締め切り (終日予定)
　・打ち合わせ① (8:00～9:00)
　・外出① (11:00～13:15)
・グループ共有用の予定
　・グループMtg① (8:00～9:45)
　・グループMtg② (17:30～19:30)

この予定が正常にお知らせできるか見てみましょう。

うまくいってますね。
指定した 1月11日の予定をすべてお知らせしてくれました。

まとめ

今回は、指定した日付の予定を確認するアクションを追加しました。

いかがでしたでしょうか。
結構便利だと思いませんか？

このようにどんどん機能を追加して "みどりこちゃん" に仕事してもらいましょう👍

最後に、動きも見たい！というお声もあると思いましたので、動画も置いておきます。
ぜひご覧ください。

もしわからないことがありましたら、お気軽に LINE公式アカウントでご質問ください。

今回のご提供ファイルのキーワードは【専属秘書みどりこV5】です。

LINE公式アカウントにご登録の上、キーワードを送信してくださいね。

⬇️LINE公式アカウントに登録してご連絡ください⬇️

もし「サポートしたい！」という方がいらっしゃいましたら、ぜひぜひサポートをお願いいたします！開発費や外注費などクリエイター活動の一部として使用させて頂きます✨