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

# この記事について
LINE BotとGoogleのサービスだけで予約システムを構築することが目的です．
この記事は続きなのでまだの人は[前回の記事](https://qiita.com/yodai-hi/items/1b18a517466708bfe3cc)を見てからのほうがわかりやすいと思います．

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

## Rich Menuとは
Rich Menuは公式アカウントとかでよく見かける，ボタンを押すとイベントが発火するMenu画面のことです．
↓のような感じで，複数個のボタンと，それによって発生するイベントを設定します．
<img width="350" alt="Rich Menu.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/317621/ff28e2b9-4551-2597-577a-73db15bfeba3.png">
このRich Menuの設定方法は2つあります．
1. GUIで設定
2. **CLIで設定** ← 今回採用した方法

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

![RichMenuSystem.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/317621/d8ccf589-890c-f207-5c72-a4d27a4f63db.png)
RichMenuの生成，解除はこのような流れで行います．今回は友達登録している全ユーザに同じMenuを表示していますが，ユーザごとに変更することもでき．最大で1000個までRich Menuを登録できるそうです．

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

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

```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

```text:.env
RICH_TOKEN=Channel access token
```

```bash: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}")"; }
```

```bash: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](https://stedolan.github.io/jq/)を使っています．
入っていない人は↓でインストールしてください．

```bash
$ brew install jq
```

## LINE Bot Designer

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

このツールはLINEの公式ツールで，[ここ](https://developers.line.biz/ja/services/bot-designer/)からダウンロードできます．画像を読み込んで，マウスで範囲指定するだけでボタン領域を確定できます．

また，それぞれのボタンにどのようなイベントを紐付けるかをGUIで設定できます．設定した項目は右下にjson形式で出力されるので，これをコピペして保存すれば完成です．
<img width="1751" alt="LINE_Bot_Designer.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/317621/62927298-9801-9ad9-e5a3-657c20ef7bdd.png">

Rich Menuにおいて，ボタンにより発火できるイベントは7種類です．それぞれの詳細は[公式](https://developers.line.biz/ja/reference/messaging-api/#action-objects)を確認してください．

1. ポストバックアクション
2. メッセージアクション
3. URIアクション
4. 日時選択アクション
5. カメラアクション
6. カメラロールアクション
7. 位置情報アクション

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

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

続きの記事↓
[LINE Bot + SpreadSheet + Google Calendarで 予約アプリを作る - 3](https://qiita.com/yodai-hi/items/6aade0009a9230f0649f)