# リッチメニューでタブ切り替えを行う
ユーザー単位のリッチメニューを活用して、タブ切り替えが可能なリッチメニューをユーザーに提供できます。リッチメニューエイリアスとリッチメニュー切替アクションを使うことで、タブ切り替えのように、複数のリッチメニューを簡単に切り替えられます。
たとえばリッチメニューAとリッチメニューBを切り替えたい場合、以下の手順に従って設定します。
- リッチメニューの画像を準備する
- リッチメニューAを作成する
- リッチメニューAに画像をアップロードする
- リッチメニューBを作成する
- リッチメニューBに画像をアップロードする
- リッチメニューAをデフォルトにする
- リッチメニューエイリアスAを作成する
- リッチメニューエイリアスBを作成する
- リッチメニューの表示を終了する
# 1. リッチメニューの画像を準備する
事前にリッチメニューAの画像（richmenu-a.png）と、リッチメニューBの画像（richmenu-b.png）を準備しておきます。使用できる画像について詳しくは、『Messaging APIリファレンス』の「リッチメニューの画像の要件」を参照してください。
| リッチメニューAの画像 | リッチメニューBの画像 |
|---|---|
 |  |
# 2. リッチメニューAを作成する
Messaging APIでリッチメニューを作成します。この例では、タップ領域オブジェクトのアクションに、以下を指定しています。
- リッチメニューAの左側のタップ領域
- アクション：URIアクション
- URI：LINE Developersサイト
- リッチメニューAの右側のタップ領域
- アクション：リッチメニュー切替アクション（type：
richmenuswitch） - 切替先：リッチメニューB（richMenuAliasId：
richmenu-alias-b）
- アクション：リッチメニュー切替アクション（type：
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": 1686
},
"selected": false,
"name": "richmenu-a",
"chatBarText": "Tap to open",
"areas": [
{
"bounds": {
"x": 0,
"y": 0,
"width": 1250,
"height": 1686
},
"action": {
"type": "uri",
"uri": "https://developers.line.biz/"
}
},
{
"bounds": {
"x": 1251,
"y": 0,
"width": 1250,
"height": 1686
},
"action": {
"type": "richmenuswitch",
"richMenuAliasId": "richmenu-alias-b",
"data": "richmenu-changed-to-b"
}
}
]
}'
リッチメニューAが作成されると、レスポンスとしてリッチメニューのIDが返ります。
{
"richMenuId": "richmenu-19682466851b21e2d7c0ed482ee0930f"
}
# 3. リッチメニューAに画像をアップロードする
リッチメニューを作成したら、Messaging APIでリッチメニューA用の「画像をアップロード」します。手順2で取得したリッチメニューAのリッチメニューIDを、パスパラメータで指定します。
curl -v -X POST https://api-data.line.me/v2/bot/richmenu/richmenu-19682466851b21e2d7c0ed482ee0930f/content \
-H 'Authorization: Bearer {channel access token}' \
-H "Content-Type: image/png" \
-T richmenu-a.png
# 4. リッチメニューBを作成する
リッチメニューAと同様の手順で、リッチメニューB（richmenu-b）を作成します。タップ領域オブジェクトのアクションに、以下を指定します。
- リッチメニューBの左側のタップ領域
- アクション：リッチメニュー切替アクション（type：
richmenuswitch） - 切替先：リッチメニューA（richMenuAliasId：
richmenu-alias-a）
- アクション：リッチメニュー切替アクション（type：
- リッチメニューBの右側のタップ領域
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": 1686
},
"selected": false,
"name": "richmenu-b",
"chatBarText": "Tap to open",
"areas": [
{
"bounds": {
"x": 0,
"y": 0,
"width": 1250,
"height": 1686
},
"action": {
"type": "richmenuswitch",
"richMenuAliasId": "richmenu-alias-a",
"data": "richmenu-changed-to-a"
}
},
{
"bounds": {
"x": 1251,
"y": 0,
"width": 1250,
"height": 1686
},
"action": {
"type": "uri",
"uri": "https://www.line-community.me/ja/"
}
}
]
}'
リッチメニューBが作成されると、レスポンスとしてリッチメニューのIDが返ります。
{
"richMenuId": "richmenu-4ecc8d672d9da4ba375fb82fa938fe5e"
}
# 5. リッチメニューBに画像をアップロードする
リッチメニューBを作成したら、Messaging APIでリッチメニューB用の「画像をアップロード」します。手順4で取得したリッチメニューIDを、パスパラメータで指定します。
curl -v -X POST https://api-data.line.me/v2/bot/richmenu/richmenu-4ecc8d672d9da4ba375fb82fa938fe5e/content \
-H 'Authorization: Bearer {channel access token}' \
-H "Content-Type: image/png" \
-T richmenu-b.png
# 6. リッチメニューAをデフォルトにする
「デフォルトのリッチメニューを設定する」エンドポイントを使って、リッチメニューAをデフォルトのリッチメニューにします。
curl -v -X POST https://api.line.me/v2/bot/user/all/richmenu/richmenu-19682466851b21e2d7c0ed482ee0930f \
-H 'Authorization: Bearer {channel access token}'
これによりリッチメニューAが表示されるようになります。しかし、リッチメニューエイリアスBが未作成のため、右側をタップしてもまだリッチメニューBには切り替わりません。
デフォルトのリッチメニューよりも表示優先順位の高い、ユーザー単位のリッチメニューが既に設定されていた場合、リッチメニューAは表示されません。その場合は、表示されているリッチメニューを削除するか、リッチメニューとユーザーのリンクを解除することで、リッチメニューAが表示されるようになります。詳しくは、「リッチメニューの表示優先度」を参照してください。
# 7. リッチメニューエイリアスAを作成する
リッチメニューAのリッチメニューエイリアスを作成します。以下の例では、手順2で作成しておいたリッチメニューAに、リッチメニューエイリアスrichmenu-alias-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-19682466851b21e2d7c0ed482ee0930f"
}'
# 8. リッチメニューエイリアスBを作成する
同様にリッチメニューBのリッチメニューエイリアスを作成します。以下の例では、手順4で作成しておいたリッチメニューBに、リッチメニューエイリアスrichmenu-alias-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-4ecc8d672d9da4ba375fb82fa938fe5e"
}'
これで、リッチメニューAで右側の領域をタップするとリッチメニューBに切り替わるようになりました。リッチメニューBで左側の領域をタップすると、リッチメニューAに戻ります。
| リッチメニューA | リッチメニューB |
|---|---|
|  |
リッチメニューエイリアスと紐づくリッチメニューは、「リッチメニューエイリアスを更新する」エンドポイントを使って、いつでも変更できます。
# 9. リッチメニューの表示を終了する
リッチメニューの表示を終了したい場合は、Messaging APIで以下の手順で実施します。
なお、ユーザーとのリンクを解除せずにリッチメニューを削除できます。しかしこの場合、リッチメニューは即時には削除されず、ユーザーがトーク画面に再入室したときに削除が反映されます。
LINE公式アカウントと友だちになっているユーザーの、ユーザーIDが分かっている場合は、リッチメニューを削除する代わりに、リッチメニューのリンクを解除できます。リッチメニューを保持した状態でリッチメニューとユーザーのリンクを解除するには、以下の手順に従って設定します。
リッチメニューとユーザーのリンクを解除した場合、リッチメニューは即時に表示されなくなります。
リッチメニュー切替アクションでリッチメニューAからリッチメニューBに、またはリッチメニューBからリッチメニューAに切り替わった場合、表示されるリッチメニューは、表示優先順位がもっとも高いユーザー単位のリッチメニューです。そのため、手順6で設定したデフォルトのリッチメニューを解除しただけでは、リッチメニューAもしくはリッチメニューBは引き続き表示されたままとなります。その場合は、リッチメニューを削除するか、リッチメニューとユーザーのリンクを解除することで、リッチメニューの表示を終了できます。リッチメニューの表示優先順位について詳しくは、「リッチメニューの表示優先度」を参照してください。
新しいデフォルトのリッチメニューを設定したのに他のリッチメニューが表示されてしまう場合は、デフォルトのリッチメニューよりも表示優先順位の高い、ユーザー単位のリッチメニューが設定されている可能性があります。その場合は、意図せず表示されているリッチメニューを削除するか、リッチメニューとユーザーのリンクを解除することで、新しいリッチメニューが表示されるようになります。詳しくは、「リッチメニューの表示優先度」を参照してください。