GASとline messaging APIで洗濯タイマーbotを作った話(その3：クイックリプライ編)

#はじめに
LIGHTz Advent Calendar20日目の記事です。

この記事では、google apps script(GAS)を使ってサーバレスでLINEbotを作る方法をご紹介します。

LINE側の初期設定については1回目、
GAS側の設定については2回目の記事をご参照ください。

前回までのおさらい

ユーザのメッセージを受け取り、語尾に「っぴ」を付けて返すbotを実装した。

今回やること

洗濯タイマーの機能実装に入っていきます！
まずは洗濯予約くんが「洗いあがりの時間」候補を提示してくれるようにします。

洗濯タイマーとは

作ろうと思った経緯

我が家の洗濯機には、洗濯予約機能があり、「x時間後に洗濯終了」を指定できます。
例えば夜寝る前に「8時間後に洗いあがり」を指定することで、翌朝起きたらすぐに洗濯物を干すことができます。
とても便利なのですが、困ることが二つ。

• 日をまたぐ場合の時間計算が困難

  • 「今21時43分で、明日7時30分に干したい場合」など。いつスイッチを入れればよいのか、すぐ計算できません。

• 1時間単位でしか指定できない

  • 「いま20時30分かぁ。明日8時に洗いあがりにしたいから、あと30分待ってから予約しよ～」と思って忘れてしまうことがしばしば。人間の短期記憶って脆弱ですね。

時間単位で指定できる洗濯機に買い替えるのが手っ取り早いのですが、ここはお財布と環境に優しく、LINEBOTで解決することにします！

まずは返信機能の実装

洗濯機の予約は「夜寝る前」、洗いあがり時間は「朝7-9時」に設定するので、
何か話しかけたら、botがクイックリプライで候補時間の選択肢を返してくれるようにします！

できあがりはこんな感じ

コード
先ほどのひよこ返しbotのコードを書き換えます。

code.js

//LINE Developersで取得したアクセストークンを入れる
const ACCESS_TOKEN = PropertiesService.getScriptProperties().getProperty("ACCESS_TOKEN");
//endpointのURIを定義
const line_endpoint = 'https://api.line.me/v2/bot/message/reply';

//ポストでLINEのメッセージ内容が送られてくるので、送られてきたJSONをパース
function doPost(e) {
  const json = JSON.parse(e.postData.contents);

  //送られてきたメッセージに対して返信するトークンを取得
  const reply_token= json.events[0].replyToken;
  if (typeof reply_token === 'undefined') {
    return;
  }

  //パースされたJSONからメッセージ部分を取得
  const message = json.events[0].message.text;  

  // メッセージをendpointに返信    
  UrlFetchApp.fetch(line_endpoint, {
    'headers': {
      'Content-Type': 'application/json; charset=UTF-8',
      'Authorization': 'Bearer ' + ACCESS_TOKEN,
    },
    'method': 'post',
    'payload': JSON.stringify({
      'replyToken': reply_token,
  // 送信するメッセージ内容を定義
      'messages': [{
  "type": "text", // ①
  "text": "明日の何時に洗濯物を干したいぴ？",
  "quickReply": { // ②
    "items": [
      {
        "type": "action", // ③
        "action": {
          "type": "message",
          "label": "7時",
          "text": "7時"
        }
      },
      {
        "type": "action",
        "action": {
          "type": "message",
          "label": "7時30分",
          "text": "7時30分"
        }
      },
      {
        "type": "action",
        "action": {
          "type": "message",
          "label": "8時",
          "text": "8時"
        }
      },
            {
        "type": "action",
        "action": {
          "type": "message",
          "label": "8時30分",
          "text": "8時30分"
        }
      },
            {
        "type": "action",
        "action": {
          "type": "message",
          "label": "9時",
          "text": "9時"
        }
      }
    ]
  }
}],
    }),
  });
  return ContentService.createTextOutput(JSON.stringify({'content': 'post ok'})).setMimeType(ContentService.MimeType.JSON);
}

New Versionとしてデプロイ

コードを書いたら「New Version」としてデプロイします。
[公開]→[ウェブアプリケーションとして公開]→下記の画面からproject version「New」を選択
※前回と同じく、「Execute the app as:」 は「Me」、
「Who has access to the app:」は「Anyone,even anonymous」を選択

webhookのURLを書き換え

new versionとしてデプロイするとURLが変更されるため、
LINE official account managerのmessaging API設定からwebhookのURLを書き換えます。

これで完成

何か話しかけると、時間候補を返してくれるようになりました！

次回に続く。