linebotのリッチメニューをコマンドラインからアップロードしてみた

lineのリッチメニューを作成してみたときの記事です。
意外とめんどくさかったです。

## line botについて

出勤、退勤を記録してくれるline botをGASですでに作ってあるので、そちらを使います。
こちらを参考にどうぞ：
[GAS+linebotでgoogle spreadsheet勤怠管理](https://qiita.com/greenteabiscuit/items/3ae7d58288e3382a8502)

## Canvasで画像の作成

Canvasで画像を取得して、macbookのローカルで地味に画像編集をしました。
800 x 540 pxの画像を作成しました。

![rich-menu-duplicate.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/396623/68b744f4-e6ee-9221-7334-fd924418c1a5.png)


## curl でたたいて、リッチメニューを作成

bearer tokenはあのめちゃめちゃ長い`アクセストークン`のことです。

```
curl -v -X POST https://api.line.me/v2/bot/richmenu \
-H 'Authorization: Bearer {bearer token}' \
-H 'Content-Type: application/json' \
-d \
'{
    "size": {
      "width": 800,
      "height": 540
    },
    "selected": false,
    "name": "Nice richmenu",
    "chatBarText": "Tap here",
    "areas": [
      {
        "bounds": {
          "x": 0,
          "y": 0,
          "width": 400,
          "height": 270
        },
        "action": {
          "type": "message",
          "text": "出勤します"
        }
      },
        {
          "bounds":{
              "x":400,
              "y":0,
              "width":400,
              "height":270
          },
          "action":{
              "type":"message",
              "text":"退勤します"
          }
        },
        {
          "bounds":{
              "x":0,
              "y":270,
              "width":400,
              "height":270
          },
          "action":{
              "type":"message",
              "text":"choice 3"
          }
        },
        {
          "bounds":{
              "x":400,
              "y":270,
              "width":400,
              "height":270
          },
          "action":{
              "type":"message",
              "text":"choice 4"
          }
        }
   ]
}'
```

これで以下のようなレスポンスが返ってきました。

```
Note: Unnecessary use of -X or --request, POST is already inferred.
*   Trying 203.104.153.64...
* TCP_NODELAY set
* Connected to api.line.me (203.104.153.64) port 443 (#0)
* ALPN, offering h2
.....
* Connection #0 to host api.line.me left intact
{"richMenuId":"richmenu-xxxxxxxxxxx"}* Closing connection 0
```

こちらの`richmenu-xxxxxx`はどこかにコピペしておきましょう。

## curlでたたいて、画像をアップロード

curl するときのURLに先ほどコピペした`richmenu-xxxxxx`を記入します。

```
curl -v -X POST https://api-data.line.me/v2/bot/richmenu/richmenu-xxxxxxx/content \
-H "Authorization: Bearer {bearer token}" \
-H "Content-Type: image/jpeg" \
-T rich-menu.png
```

以下のようなレスポンスが返ってくればOKです。

```
*   Trying 203.104.153.64...
* TCP_NODELAY set
* Connected to api-data.line.me (203.104.153.64) port 443 (#0)
* ALPN, offering h2
* ALPN, offering http/1.1
* successfully set certificate verify locations:
*   CAfile: /etc/ssl/cert.pem
  CApath: none
....
< x-frame-options: DENY
<
* Connection #0 to host api-data.line.me left intact
{}* Closing connection 0
```

空のjsonが返されているので、成功したようです。

これでみれているはずです。

## おまけ：複数のリッチメニューをすでにアップロード済みの場合

複数のリッチメニューをすでにアップロードしてしまっている場合はデフォルトに今アップロードしたものを設定しないといけません。

```
curl -v -X POST https://api.line.me/v2/bot/user/all/richmenu/richmenu-xxxxxx \
-H "Authorization: Bearer {bearer token}"
```

以下のレスポンスでOKです。

```
*   Trying 147.92.144.180...
* TCP_NODELAY set
* Connected to api.line.me (147.92.144.180) port 443 (#0)
* ALPN, offering h2
......
* Connection #0 to host api.line.me left intact
{}* Closing connection 0
```

## lineでの見え方

![IMG_974024E6B18B-1.jpeg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/396623/7b477d79-d05a-21c2-f721-9a808eb0cb9b.jpeg)


## 参考

以下の記事が非常に参考になりました、ありがとうございました。

[LINEBotのMessageAPIでのリッチメニューの作り方](https://qiita.com/Marusoccer/items/0d3695a120efb7512f1f)