More than 3 years have passed since last update.

LINE Bot + SpreadSheet + Google Calendarで予約アプリを作る - 2

Last updated at 2020-06-30Posted at 2020-05-13

この記事について

LINE BotとGoogleのサービスだけで予約システムを構築することが目的です．
この記事は続きなのでまだの人は前回の記事を見てからのほうがわかりやすいと思います．

LINE Botの作成

今回作成するLINE BOTの目玉はRich Menuです．
ここからユーザに予約をするフラグを送信してもらいます．
Rich Menuの挙動はLINE Bot Designerを使ってモックを作成することで決定します．

Rich Menuとは

Rich Menuは公式アカウントとかでよく見かける，ボタンを押すとイベントが発火するMenu画面のことです．
↓のような感じで，複数個のボタンと，それによって発生するイベントを設定します．

このRich Menuの設定方法は2つあります．

GUIで設定
CLIで設定 ← 今回採用した方法

今回は下のCLIで設定する方法を選びました．
と言うのもCLIベースのほうが拡張性が高く，またユーザへの表示が即時に行われるからです．

RichMenuの生成，解除はこのような流れで行います．今回は友達登録している全ユーザに同じMenuを表示していますが，ユーザごとに変更することもでき．最大で1000個までRich Menuを登録できるそうです．

Rich Menuの登録

Rich Menuの生成は↑に示したとおり，画像と設定（json形式）を登録することで行います．

設定は

どこにボタンを作るか（onTouch イベントの発火する領域を指定）
ボタンを押した時の挙動(POSTするデータをString形式で埋め込む)
の2つをjson形式で記述します．

menu.json

{
  "size": {
    "width": 2500,
    "height": 843
  },
  "selected": true,
  "name": "main menu",
  "chatBarText": "メニュー",
  "areas": [
    {
      "bounds": {
        "x": 148,
        "y": 99,
        "width": 1407,
        "height": 643
      },
      "action": {
        "type": "postback",
        "text": "",
        "data": "{\"action\":\"booking\", \"status\":\"start\"}"
      }
    },
    {
      "bounds": {
        "x": 1597,
        "y": 91,
        "width": 759,
        "height": 313
      },
      "action": {
        "type": "postback",
        "text": "",
        "data": "{\"action\":\"report\", \"status\":\"start\"}"
      }
    },
    {
      "bounds": {
        "x": 1597,
        "y": 446,
        "width": 754,
        "height": 305
      },
      "action": {
        "type": "postback",
        "text": "",
        "data": "{\"action\":\"setting\", \"status\":\"start\"}"
      }
    }
  ]
}

これをcurlで指定のサーバに投げれば反映されます．
また，前述のフローにありますが，この設定ファイルのPOSTが成功すると，ユニークIDがjson形式で返ってきます．このユニークIDは画像をPOSTするURLに組み込む必要があります．

また，Rich Menuを有効化（デフォルトのRich Menuに設定）するためにも必要となります．
これらの通信では，Headerに前回取得したChannel access tokenを埋め込む必要があります．

ちなみにこのTokenの有効期限は切れることが無い（再発行しない限り）ようなので，気をつけて管理する必要があります．私は以下のようなディレクトリを作成し，.envで環境変数としてtokenを管理しています．

root/
　├ .env
　├ post_richmenu.sh
　├ delete_richmenu.sh
　└ assets/
　　　├ menu.json
　　　└ menu.png

.env

RICH_TOKEN=Channel access token

post_richmenu.sh

#!/bin/zsh
. .env

curl -v -X POST https://api.line.me/v2/bot/richmenu \
-H "Authorization: Bearer $(eval echo "${RICH_TOKEN}")" \
-H 'Content-Type: application/json' \
-d @assets/menu.json \
| jq -r '.richMenuId' \
| cat \
| { read -r url ; curl -v -X POST https://api-data.line.me/v2/bot/richmenu/"$url"/content \
-H "Authorization: Bearer $(eval echo "${RICH_TOKEN}")" \
-H "Content-Type: image/png" \
-T ./assets/menu.png; \
curl -v -X POST https://api.line.me/v2/bot/user/all/richmenu/"$url" \
-H "Authorization: Bearer $(eval echo "${RICH_TOKEN}")"; }

delete_richmenu.sh

#!/bin/bash
. .env

curl -v -X DELETE https://api.line.me/v2/bot/user/all/richmenu \
-H "Authorization: Bearer $(eval echo "${RICH_TOKEN}")"

ShellScriptはあまり書かないので，汚かったらごめんなさい．
パイプで繋いでいるだけですが，返ってくるjsonを解析するのにjqを使っています．
入っていない人は↓でインストールしてください．

$ brew install jq

LINE Bot Designer

登録の仕方が分かったところで，一つ問題があります．設定用のjsonをどうやって生成するかです．パラメータやタイトルなどはまあ良いとしても，ボタン部分の指定は座標指定なので，設定画像を見ながら入力するのは少々手間がかかります．この手間をカットしてくれるのがLINE Bot Designerです．

このツールはLINEの公式ツールで，ここからダウンロードできます．画像を読み込んで，マウスで範囲指定するだけでボタン領域を確定できます．

また，それぞれのボタンにどのようなイベントを紐付けるかをGUIで設定できます．設定した項目は右下にjson形式で出力されるので，これをコピペして保存すれば完成です．

Rich Menuにおいて，ボタンにより発火できるイベントは7種類です．それぞれの詳細は公式を確認してください．

ポストバックアクション
メッセージアクション
URIアクション
日時選択アクション
カメラアクション
カメラロールアクション
位置情報アクション

今回は予約なので，日時選択アクションを設定してもよいのですが，選択可能な日時の初期値・最小値・最大値をフレキシブルに変更したかったので，ポストバックアクションを採用しています．ポストバックアクションは指定した文字列を送信できるもので，今回はjson形式のデータをString化したものを埋め込んでいます．

続く

LINE Botだけでもそこそこの量になったので，GASは次の記事で書きたいと思います．

続きの記事↓
LINE Bot + SpreadSheet + Google Calendarで予約アプリを作る - 3

You get articles that match your needs
You can efficiently read back useful information
You can use dark theme

What you can do with signing up

LINE Bot + SpreadSheet + Google Calendarで 予約アプリを作る - 2