新機能! Messaging APIのリッチメニュー切替を試す

はじめに

Messaging APIのリッチメニュー、使ってますか? トーク画面下部に出てくるあのメニューです。

時間割Botの例

カップ麺タイマーの例

そんなリッチメニューを切り替えるアクションが先日追加されました。今まではリッチメニューとユーザーをリンクするなどの手法が取られてきましたが、より実装を簡単にできるようになりました。
https://developers.line.biz/ja/news/2021/06/21/switch-between-multiple-rich-menus/

リッチメニュー切り替え実装の流れ

0. Messaging APIのチャネルを作成

まずは従来通り、LINE Developerのコンソールで、Messaging APIのチャネルを作成します。
細かい手順は省略しますが、Messaging API設定 タブ内の チャネルアクセストークン を後ほど使うので、すぐに開けるように(貼り付けられるように)しておきましょう。

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

切り替えるリッチメニューがなければ始まりません。今回は、切り替え機能をテストしたいので、タブのように見える画像2枚を用意しました。

画像は2500x1680pxで作成し、ボタンにあたる部分の座標は以下の表のようになっています。

タブ	起点X座標	起点Y座標	横幅	高さ
メニュー1	0	0	1250	300
メニュー2	1250	0	1250	300

これをもとに、リッチメニューの切り替えを実装していきます。
なお、記事の最後で紹介しているリッチメニューエディタを利用することで以下の実装はGUI上ですべて完結します。ぜひお試しください。

リッチメニューの実装

メニュー1の実装内容

{
  "size": {
    "width": 2500,
    "height": 1686
  },
  "selected": true,
  "name": "メニュー1",
  "chatBarText": "メニュー1",
  "areas": [
    {
      "bounds": {
        "x": 1250,
        "y": 0,
        "width": 1250,
        "height": 300
      },
      "action": {
        "type": "richmenuswitch",
        "data": "richMenuChanged",
        "richMenuAliasId": "richmenu-2"
      }
    }
  ]
}

メニュー2の実装内容

{
  "size": {
    "width": 2500,
    "height": 1686
  },
  "selected": true,
  "name": "メニュー2",
  "chatBarText": "メニュー2",
  "areas": [
    {
      "bounds": {
        "x": 0,
        "y": 0,
        "width": 1250,
        "height": 300
      },
      "action": {
        "type": "richmenuswitch",
        "data": "richMenuChanged",
        "richMenuAliasId": "richmenu-1"
      }
    }
  ]
}

この実装において肝となるのは、

"action": {
  "type": "richmenuswitch",
  "data": "richMenuChanged",
  "richMenuAliasId": "richmenu-2"
}

この部分です。新しく追加された、リッチメニュー切替アクション("type": "richmenuswitch")を利用します。
richMenuAliasIdに、切り替え先のリッチメニューのエイリアス^[1] を指定します。
メニュー1のJSON内でメニュー2のエイリアスを切り替え先として指定するイメージです。

エイリアスには、100文字以内の任意の半角英数字とハイフン・アンダースコアを利用できますが、重複はできないので注意してください。
なお、dataにはポストバックイベントに返される文字列を指定します。

リッチメニューの登録

JSON形式のリッチメニューを作成できたら、リッチメニュー作成のエンドポイントにPOSTリクエストを送信し、リッチメニューを登録します。

これ以降はメニュー1に対する処理のみを記載していますが、メニュー2に対してもIDやエイリアスを変更した上で同様の処理を行ってください。

POST https://api.line.me/v2/bot/richmenu
Authorization: Bearer チャネルアクセストークン
Content-Type: application/json

bodyにリッチメニューのJSONを指定

レスポンス

{
  "richMenuId": "richmenu-xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx"
}

レスポンスとして、リッチメニューのIDが帰ってくるので、忘れずに書き留めておいてください。

メニュー画像のアップロード

リッチメニューの画像をLINEのサーバーにアップロードします。

POST https://api-data.line.me/v2/bot/richmenu/richmenu-xxx.../content
Authorization: Bearer チャネルアクセストークン
Content-Type: image/png

bodyに画像データを指定

リッチメニューID(richmenu-xxx...部)には前項で表示されたものを利用してください。

このエンドポイントのドメインはapi-data.line.meです。他のエンドポイントとは違い、api.line.meではありません。

2. リッチメニューにエイリアスを作成する

次に、リッチメニューの切り替えに必要なエイリアスを作成します。

POST https://api.line.me/v2/bot/richmenu/alias
Authorization: Bearer チャネルアクセストークン
Content-Type: application/json

{
  "richMenuAliasId":"richmenu-1",
  "richMenuId":"richmenu-xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx"
}

richMenuAliasIdにはリッチメニュー自身のエイリアスを指定してください。
メニュー1のIDに対してはメニュー1のエイリアスを指定するイメージです。

3. リッチメニューを表示する

全員にリッチメニューを表示する場合

POST https://api.line.me/v2/bot/user/all/richmenu/リッチメニューID
Authorization: Bearer チャネルアクセストークン

特定の個人にリッチメニューを表示する場合

POST https://api.line.me/v2/bot/user/ユーザーID/richmenu/リッチメニューID
Authorization: Bearer チャネルアクセストークン

テスト目的であれば後者を利用し、自分のユーザーID(チャネル基本設定 > あなたのユーザーID)を指定するとよいでしょう。

完成!!

タブ部分を押すとメニューが切り替わる!

最後に

このように、リッチメニュー切替アクションを利用することで、リッチメニューの切り替えが簡単に実装できるようになりました。切り替えに関するサーバーサイドのコードが一切不要になるのは大きな利点となるのではないでしょうか。
規模が大きいLINEBotでは、どうしてもリッチメニュー1枚では項目が入り切らないことがあります。そんなときに、このリッチメニュー切り替えを活用してみてください。2ページに限らず、3ページ, 4ページ, ... 仕様上は1000ページまで繋げられますよ。

なお、この記事で触れられていないAPIの詳細はLINE Developersのドキュメントなどを参考にしてみてください。

リッチメニューエディタ

https://richmenu.app.e-chan.me/
私の作成したリッチメニューエディタでも、リッチメニュー切替アクションの実装が簡単にできます。リッチメニュー実装のツールとしてぜひご利用ください!

脚注

1. リッチメニュー切り替えのために使用する識別名。リッチメニューのIDとは別の概念。