LINE タブ付きリッチメニューを試してみる

こんにちは！ソニックムーブの自社サービスのバックエンドをやっている中崎です。
LINEのリッチメニューの機能であるタブ付きのリッチメニューについて調べてみました。

タブ付きのリッチメニューとは

リッチメニューの領域を別のリッチメニューに遷移できる機能を使って複数のリッチメニューをユーザーに表示できるようにしたものです。
例えば以下のような2つのリッチメニューをタブで遷移できるイメージです。(デザインセンスは…😇)

登録方法

まずは遷移したい分のリッチメニューを登録します。理論上は1000個分登録できそう…
今回は2つですね。bodyのareas以外は割愛します。その他は普通のリッチメニューと変わりませんので。

リッチメニューA

"areas": [
    {
        "bounds": {
            "x": 0,
            "y": 0,
            "width": 1250,
            "height": 200
        },
        "action": {
            "type": "richmenuswitch",
            "richMenuAliasId": "richmenu-alias-b",
            "data": "richmenu-changed-to-b"
        }
    }
]

リッチメニューB

"areas": [
    {
        "bounds": {
            "x": 1250,
            "y": 0,
            "width": 1250,
            "height": 200
        },
        "action": {
            "type": "richmenuswitch",
            "richMenuAliasId": "richmenu-alias-a",
            "data": "richmenu-changed-to-a"
        }
    }
]

このようにリッチメニュー切り替えのためにはareasのactionにリッチメニュー切り替えのための設定が必要です。
richMenuAliasIdについては後述しますが、これは登録時に決めることができる値のため、被らない好きな値で大丈夫です。

次に画像登録です。これも通常のリッチメニュー登録と変わらないため省略します。

最後にエイリアスを登録します。ここのでエイリアスは遷移するリッチメニューの識別用のIDになります。リッチメニュー登録時には遷移させたいリッチメニューのIDがわからないためこのような方法になっているのだと思います。
エイリアスの登録にはリッチメニューのIDが必要なのであらかじめ登録しておく必要があります。
また、エイリアスIDはリッチメニュー登録時に決めたrichMenuAliasIdと一致している必要があります。

リッチメニューA

curl -v -X POST https://api.line.me/v2/bot/richmenu/alias \
-H 'Authorization: Bearer {channel access token}' \
-H 'Content-Type: application/json' \
-d \
'{
    "richMenuAliasId": "richmenu-alias-a",
    "richMenuId": "richmenu-xxxxxxx"
}'

リッチメニューB

curl -v -X POST https://api.line.me/v2/bot/richmenu/alias \
-H 'Authorization: Bearer {channel access token}' \
-H 'Content-Type: application/json' \
-d \
'{
    "richMenuAliasId": "richmenu-alias-b",
    "richMenuId": "richmenu-xxxxxxx"
}'

これでタブ付きのリッチメニューの登録は完了です！
リッチメニューAをデフォルトに設定して確認してみましょう！

終わりに

今回はタブ付きのリッチメニューを試してみました。
結構簡単に使うことができました！
詳しいことなどはLINE Developersリファレンスなどを確認してみてください！
https://developers.line.biz/ja/docs/messaging-api/switch-rich-menus/