たった30分でできる！？サンタから毎日メッセージが届くLINE Botを作るチャレンジ

本記事は、下記アドベントカレンダーの初日の記事でもあります！
初日に相応しいかどうかは別として・・

12月に何か LINE Bot をネタにしたハンズオンができないかな？と考えていたところ、この Bot が浮かびました。毎日サンタさんから LINE にメッセージが届きます。

ハンズオンは、LINEDC(LINE Developer Community)イベントのもので、この記事はイベント前に書いてます。

（追記)当日の動画も最後にリンク貼ってありますので、よろしければお楽しみください！
イベント概要は以下より。

日常にほんのちょっとの彩りを

私が想像する利用シーンは以下です。 family script 言語です。

子：「ねぇ。今日ってサンタさんから LINE きた？？」
親：「まだかな。もう少しでくるんじゃない？」
（数分後）
親：「お！きたぞきたぞ！」
子：「見せて見せて！」

といった感じに、クリスマスまで毎日 Bot にメッセージが届き、親子のコミュニケーションのひと時をお届けできたら素敵です。日常にほんのちょっとの彩りを。

構成はいたってシンプルです

ざっくりやることは

1. LINE Botの準備（Developers Console)
2. スプレッドシートでカレンダー作成
3. GAS実装
4. GASトリガー設定

1. LINE Botの準備（Developers Console)

LINE Bot （Messaging API） の設定をしていきます。以下の記事に手順がありますので、こちらを参考に。

• プロバイダーとチャネルを作成
• ユーザーIDをメモ
• チャネルアクセストークンを発行しメモ

今回、Botに対してユーザーがメッセージを送信してBotが応答を返すようなことはしないため、Webhook の設定や応答メッセージの設定などは不要です。

2. スプレッドシートでカレンダー作成

こんな感じでカレンダーっぽく作り、画像では省略してますが Bot に通知したいメッセージ（サンタさんからのメッセージ）を日毎に仕込みます。

GASで操作しやすいように、カレンダーの範囲に「カレンダー」と名前を付けています。

3. GAS実装

愚直に実装です。
イベント内で30分で全て作り切れるか？的なチャレンジでしたのですが、結果はどうだったのか・・（この記事はイベント前に書いてますので・・笑）。イベントの様子は、イベント終了後に動画のリンクを貼っておきます。

カレンダーのセル（データ）を取得

以下の記述で「カレンダー」と名前をつけた範囲の値を全て取得してます。 getValues というメソッドがありますが、日時を表示通りに取得したかったので、 getDisplayValues を使ってます。

const calendar = SpreadsheetApp.getActiveSheet().getRange("カレンダー").getDisplayValues();

以下のような形で２次元配列で取得されます。スプレッドシートの行ごとに配列で取得され、さらに各行のセルの値が取得されています。

console.log(calrendar);

[ 
  [ '',
    '',
    '',
    '2022/12/01',
    '2022/12/02',
    '2022/12/03',
    '2022/12/04' ],
  [ '', '', '', '木曜日', '金曜日', '土曜日', '日曜日' ],
  [ '',
    '',
    '',
    'いよいよ12月じゃ。サンタさんにプレゼントはお願いしたかの？',
    '今日は何か楽しいことはあったかい？',
    '今日は何をして遊んだんじゃ？',
    '' ],
  [ '2022/12/05',
    '2022/12/06',
    '2022/12/07',
    '2022/12/08',
    '2022/12/09',
    '2022/12/10',
    '2022/12/11' ],
  [ '月曜日', '火曜日', '水曜日', '木曜日', '金曜日', '土曜日', '日曜日' ],
  [ '', '', '', '', '', '', '' ],
  [ '2022/12/12',
    '2022/12/13',
    '2022/12/14',
    '2022/12/15',
    '2022/12/16',
    '2022/12/17',
    '2022/12/18' ],
  [ '月曜日', '火曜日', '水曜日', '木曜日', '金曜日', '土曜日', '日曜日' ],
  [ '', '', '', '', '', '', '' ],
  [ '2022/12/19',
    '2022/12/20',
    '2022/12/21',
    '2022/12/22',
    '2022/12/23',
    '2022/12/24',
    '2022/12/25' ],
  [ '月曜日', '火曜日', '水曜日', '木曜日', '金曜日', '土曜日', '日曜日' ],
  [ '', '', '', '', '', '今日ははやく寝るんじゃぞ。', 'メリークリスマス！' ] 
]

該当する日のメッセージを取得

一致する日付から、その日に通知するメッセージを取得。
力技この上ない実装ですが、上記２次元配列をまわして、一致する日付の列方向のインデックス (clmIndex) を取得します。一致したら、そのセルの２行下のセルに通知するメッセージが記載されているので、 calendar[rowIndex + 2][clmIndex] で取得しています。

let santaMessage = "";
calendar.forEach((rowData, rowIndex) => {
    const clmIndex = rowData.findIndex(cell => cell === today);
    if (clmIndex === -1) {
      return;
    }
    
    santaMessage = calendar[rowIndex + 2][clmIndex]
})

today には、プログラムが動作した日付が yyyy/MM/dd の形式で格納されているので、スプレッドシート記載の日付と比較可能です。

const today = Utilities.formatDate(new Date(), "GMT+9", "yyyy/MM/dd");

LINE Bot にメッセージをプッシュ通知

const sendMessageToLine = (santaMessage) => {
  const pushMessage = {
    to: USER_ID,
    messages: [
      {
        type: "image",
        originalContentUrl: IMAGE_URL,
        previewImageUrl: IMAGE_URL
      },
      {
        type: "text",
        text: santaMessage
      }
    ]
  }

  const params = {
    method: "POST",
    headers: {
      'Content-Type': 'application/json',
      Authorization: `Bearer ${CHANNEL_ACCESS_TOKEN}`
    },
    payload: JSON.stringify(pushMessage)
  }

  UrlFetchApp.fetch(LINE_API, params)
}

プッシュメッセージのリクエスト方法などは以下のリファレンスに記載がありますので、こちらを参考に画像とメッセージを通知しています。

4. GASトリガー設定

以下のようにGASにて時間主導型のトリガーを作成します。
下記サンプルでは午後7時〜8時の間くらいにトリガーが動作し、結果Line Botにプッシュ通知が飛んできます。

イベント当日の動画はこちらから

作ったスプレッドシートは以下に共有してますので、ご自由にお使いください。

GAS全体

const CHANNEL_ACCESS_TOKEN = "[アクセストークン]"
const USER_ID = "[ユーザーID]"

const IMAGE_URL = "https://drive.google.com/uc?id=[画像ファイルID]"

const LINE_API = "https://api.line.me/v2/bot/message/push"

const sendMessage = () => {

  const calendar = SpreadsheetApp.getActiveSheet().getRange("カレンダー").getDisplayValues();
  const today = Utilities.formatDate(new Date(), "GMT+9", "yyyy/MM/dd");

  let santaMessage = "";
  calendar.forEach((rowData, rowIndex) => {
    const clmIndex = rowData.findIndex(cell => cell === today);
    if (clmIndex === -1) {
      return;
    }

    santaMessage = calendar[rowIndex + 2][clmIndex]
  })

  sendMessageToLine(santaMessage)
}

const sendMessageToLine = (santaMessage) => {
  const pushMessage = {
    to: USER_ID,
    messages: [
      {
        type": "image",
        originalContentUrl: IMAGE_URL,
        previewImageUrl: IMAGE_URL
      },
      {
        type: "text",
        text: santaMessage
      }
    ]
  }

  const params = {
    method: "POST",
    headers: {
      'Content-Type': 'application/json',
      Authorization: `Bearer ${CHANNEL_ACCESS_TOKEN}`
    },
    payload: JSON.stringify(pushMessage)
  }

  UrlFetchApp.fetch(LINE_API, params)
}

イベント後

なんとか30分でライブコーディング？できましたでしょうか笑
素敵なクリスマスになりますように。メリークリスマス！