Help us understand the problem. What is going on with this article?

LINEBotのMessageAPIでのリッチメニューの作り方

More than 1 year has passed since last update.

LINEBotのMessageAPIでのリッチメニューの作り方

趣味でLINEBotでのメッセージングアプリを開発中です。

その中でリッチメニューを利用したい気分になったので、利用方法のメモを残す。

ちなみにリッチメニューとは、以下のようなものです。
image.png

作り方は以下の公式サイト見れば良いのですが、若干むずいので噛み砕いでメモ残します。
https://developers.line.biz/ja/docs/messaging-api/using-rich-menus/

前提条件

今回はcurlコマンドを叩いてAPI通信するのではなく、GUIツールのPostmanを利用します、

Postmanダウンロード

https://www.getpostman.com/

STEP1 リッチメニューで利用する画像を作る

当たり前ですが、リッチメニュー画像を作りましょう。

オススメはCanvasというwebツールです。
この無料ツールを利用すれば、簡単にオリジナル画像を作成することができます。

リッチメニューで利用できる画像制限

画像フォーマット:JPEGまたはPNG
画像サイズ(ピクセル):2500x1686、2500x843、1200x810、1200x405、800x540、800x270
最大ファイルサイズ:1MB

僕は以下のようなリッチメニューを作成しました。
スクリーンショット 2019-11-23 15.15.15.png

※画像サイズは(1200x810)でPNG形式で保存しました。

STEP2 リッチメニューを作成する

リッチメニュー画像が作成できたので、早速Postmanを利用してLineAPIを叩いてリッチメニューを作成しましょう!

HTTP POSTリクエストを/bot/richmenuエンドポイントに送信します。このとき、チャネルアクセストークンをAuthorizationヘッダーに、リッチメニューオブジェクトをボディに指定します。成功すると、リッチメニューIDが返されます。

公式サイトに書かれている通り以下4点をセットアップする。

1. URL -> https://api.line.me/v2/bot/richmenu 
2. Authorization チャンネルアクセストークン
3. Content-Type application/json
4. PostリクエストのBodyの中身

チャンネルアクセストークンはLINEdeveloperにログインして確認してください。
スクリーンショット 2019-11-23 16.38.15.png

Postmanで必要事項を入力して、Sendボタンをクリック
スクリーンショット 2019-11-23 16.40.56.png
スクリーンショット 2019-11-23 16.41.06.png

通信成功するとrichMenuIdが取得できます。

{
    "richMenuId": "richmenu-88c05ef6921ae53f8b58a25f3a65faf7"
}

Bodyの中身(4)

  {
    # 画像サイズの指定
    "size":{
        "width":1200,
        "height":810
    },
  # デフォルトで表示させるかどうか
    "selected":false,
    "name":"簡易検索",
  #メニューを表示・非表示を行うボタンへ表示するテキスト
    "chatBarText":"簡易検索",
   # areaの説明は難しいので以下参照
    "areas":[
        {
          "bounds":{
              "x":0,
              "y":405,
              "width":600,
              "height":810
          },
          "action":{
              "type":"message",
              "text":"明後日"
          }
        },
        {
          "bounds":{
              "x":600,
              "y":405,
              "width":1200,
              "height":810
          },
          "action":{
              "type":"message",
              "text":"今週"
          }
        },
        {
          "bounds":{
              "x":0,
              "y":0,
              "width":600,
              "height":405
          },
          "action":{
              "type":"message",
              "text":"今日"
          }
        },
        {
          "bounds":{
              "x":600,
              "y":0,
              "width":1200,
              "height":405
          },
          "action":{
              "type":"message",
              "text":"明日"
          }
        }
    ]
  }

bodyの中でareaを設定するのですが、xは領域の左端を基準とした横幅のスタート地点、yは領域の上端を基準とした縦軸のスタート地点、widthはxから横にどのくらいの幅を持たせるか、heightはyから縦にどのくらいの幅を持たせるかの指定をする。
スクリーンショット 2019-11-23 16.10.45.png

僕は以下のように設定しました。

スクリーンショット 2019-11-23 15.21.02.png

① X:0, Y:0, width:600, height:405
② X:600 Y: 0, width:1200, height:405
③ X:0 Y: 405, width:600, height:810
④ X:600 Y:405, width:1200, height:810

STEP3 リッチメニューの画像をアップロードする

リッチメニューの画像をアップロードするには、HTTP POSTリクエストを/bot/richmenu/{richMenuId}/contentエンドポイントに送信します。このとき、リッチメニューIDをrichMenuIdパスパラメータに指定します。

こちらもPostmanで実施します。

1. URL -> https://api-data.line.me/v2/bot/richmenu/{richMenuId}/content
2. Authorization: Bearer {channel access token}
3. Content-Type: image/png
4. image.png

スクリーンショット 2019-11-23 16.42.49.png
スクリーンショット 2019-11-23 16.42.56.png

STEP4 デフォルトのリッチメニューを設定する

リッチメニューをLINE公式アカウントのデフォルトのリッチメニューに設定するには、HTTP POSTリクエストを/bot/user/all/richmenu/{richMenuId}エンドポイントに送信します。このとき、リッチメニューIDをパスパラメータとして指定します。APIコールが成功すると、リッチメニューはユーザーがトーク画面に再入室後に表示されます。

1. URL -> https://api.line.me/v2/bot/user/all/richmenu/{richMenuId}
2. Authorization: Bearer {channel access token}

スクリーンショット 2019-11-23 16.19.43.png

完成

IMG_0109.PNG

意外と難しかった.....

hirokisoccer
フリーランスエンジニアもどきです
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away