LINEBot Messaging APIでリッチメニューを作る

はじめに

最近LINEBotをHerokuからAzure Functionsに移植しようと頑張っていたのですが、
半年ちょっと前にMessaging APIで作ったリッチメニューが同じ方法では作れなかったのでまとめました。

環境

MacBook Air (M1)
macOS big Sur

リッチメニューの作り方2種類あるよ

リッチメニューの作り方は2種類あります。
1つはLINE LINE Official Account Managerのメニューから「リッチメニュー」を選んで、画面上でぽちぽちやっていくと簡単にできます
2つ目は、Messaging APIを使ってリッチメニューを作成する方法です。
Messaging APIは、1つ目と違って、優しい感じではないですが、ポストバックアクションや日時指定アクションなどが使えます。

Messaging APIでリッチメニュー作る

1. 画像とchannel access tokenを用意する
   画像は、2500px × 843px もしくは　2500px × 1686px で 1MB 以下で画像を用意しましょう
   （800px 以上、2500px 以下ですが、スマホの解像度を考えて2500 をおすすめします）
   今回は2500px × 843pxで作ります

2.リッチメニューを作る
画像の中に4つのボタンを作るので、4つ分指定します

• ボタン1　postback
• ボタン2　postback
• ボタン3　URL
• ボタン4　message　を指定します
  （Photoshopでスライスを切ってX,Y座標をとってます）
  

リッチメニューオブジェクトをボディに指定します。

curl -v -X POST https://api.line.me/v2/bot/richmenu \
-H 'Authorization: Bearer {channel access token}' \
-H 'Content-Type: application/json' \
-d \
'{
    "size": {
      "width": 2500,
      "height": 843
    },
    "selected": false,
    "name": "MENU",
    "chatBarText": "Tap here",
    "areas": [[
    {
      "bounds": {
        "x": 0,
        "y": 0,
        "width": 1032,
        "height": 836
      },
      "action": {
        "type": "postback",
        "data": "postback1"
      }
    },
    {
      "bounds": {
        "x": 1046,
        "y": 0,
        "width": 860,
        "height": 416
      },
      "action": {
        "type": "postback",
        "data": "postback2"
      }
    },
    {
      "bounds": {
        "x": 1046,
        "y": 424,
        "width": 868,
        "height": 412
      },
      "action": {
        "type": "uri",
        "uri": "google.com"
      }
    },
    {
      "bounds": {
        "x": 1914,
        "y": 0,
        "width": 582,
        "height": 824
      },
      "action": {
        "type": "message",
        "text": "HELLO"
      }
    }
  ]
}'

{channel access token}　に　channel access tokenを入れましょう
これを入れると

{"richMenuId":"richmenu-********"}* Closing connection 0

↑richMenuIdが返ってきます
これを使って、画像をアップします。

用意した画像 test01.jpgをホームに を置いて下記を実行します
(ここでハマった。。。　curlのオプションに --http1.1　をつけないといけないそうです）

curl --http1.1 -v -X POST https://api-data.line.me/v2/bot/richmenu/richmenu-********/content 
-H 'Authorization: Bearer {channel access token}' 
-H 'Content-Type: image/jpeg' -T test01.jpg

これで画像がアップできたのでリッチメニューは完成です！
最後は紐付け！
チャネルでみんなに表示にしましょう

curl -v -X POST https://api.line.me/v2/bot/user/all/richmenu/richmenu-62a245d00e3fb615cdab8efbb7fcbbee -H 'Authorization: Bearer { channel access token }'

完成！！！
これでMessaging APIでリッチメニューが作れました〜
ポストバックとか使わなければ、公式のジェネレータを使うのが一番だと思います！
まとまっている記事が少なかったので教えてもらたことの備忘録として書きました
誰かの役に立てば幸いです〜。