リッチメニューに載せたい項目が多いと、1枚の画像では窮屈になりがちです。そんなときに便利なのがタブ切り替えです。メニューの上部に「予約」「メニュー」「お知らせ」のようなタブを置き、タップするとメニュー全体が切り替わります。
タブ切り替えの仕組み
タブ切り替えは、実は「タブごとに別々のリッチメニューを作って、タップで入れ替えている」仕組みです。LINEのMessaging APIでは、次の2つを組み合わせて実現します。
- リッチメニューエイリアス：各リッチメニューに付ける「あだ名」のようなID（例：
tab-reserve、tab-menu） - richmenuswitchアクション：タップすると、指定したエイリアスのリッチメニューに切り替えるアクション
たとえばタブが2つなら、次のように設定します。
| リッチメニュー | エイリアス | タブ部分のタップ領域 |
|---|---|---|
| 予約タブが選ばれた状態の画像 | tab-reserve | 「メニュー」タブ → tab-menu に切り替え |
| メニュータブが選ばれた状態の画像 | tab-menu | 「予約」タブ → tab-reserve に切り替え |
作り方の流れ（Messaging API）
- タブの数だけリッチメニューを作成し、それぞれに画像をアップロードする
- 各リッチメニューにエイリアスを作成して紐づける
- タブ部分のタップ領域に、切り替え先のエイリアスを指定した richmenuswitch アクションを設定する
- 最初に表示したいリッチメニューをデフォルトに設定する
エイリアスIDは最大32文字で、半角英数字・アンダースコア（_）・ハイフン（-）が使えます。エイリアスは1つのアカウントあたり最大1000件まで作れます。
タブ切り替えはMessaging APIの機能です。LINE Official Account Manager（管理画面）だけでは作れません。
注意点
画像はタブごとに「選択中の見た目」で作る
タブ切り替えでは画像ごと入れ替わるので、「予約タブが選ばれている画像」「メニュータブが選ばれている画像」をそれぞれ用意します。タブの位置やデザインをそろえておくと、切り替えが自然に見えます。
切り替えた後は「ユーザー単位のメニュー」になる
タブを切り替えると、そのユーザーには切り替え後のリッチメニューがユーザー単位で紐づきます。表示の優先順位は「ユーザー単位＞APIで設定したデフォルト＞管理画面で設定したデフォルト」のため、あとからデフォルトのメニューを変えても、タブを切り替えたことのあるユーザーには新しいデフォルトが表示されないことがあります。
メニューを更新するときはエイリアスを付け替える
APIではリッチメニューの画像を差し替えられないため、デザインを変えるときはリッチメニューを作り直し、エイリアスを新しいメニューに付け替えます。エイリアスを付け替えれば、ほかのタブの richmenuswitch アクションはそのままで新しいメニューに切り替わります。
まとめ
- タブ切り替えは「タブごとのリッチメニュー＋エイリアス＋richmenuswitch」で実現する
- 管理画面では作れず、Messaging APIの機能を使う
- 切り替え後はユーザー単位のメニューになる点に注意
richmenu-aiでは、タブ切り替えのメニューをまとめて1つのプロジェクトとして扱えます。既存のタブ切り替えメニューも、連携するだけでタブのまとまりごと読み込みます。反映時にはエイリアスの付け替えも自動で行うので、タブの動きを保ったままデザインを更新できます。