# リッチメニューを使う
このページでは、LINE公式アカウントのトーク画面で表示される、リッチメニューについて説明します。
- リッチメニューとは
- LINE Official Account Managerでリッチメニューを作成する
- Messaging APIでリッチメニューを作成する
- 複数のリッチメニューを切り替える
- リッチメニューの表示について
- その他のリッチメニュー機能
# リッチメニューとは
リッチメニューはLINE公式アカウントのトーク画面下部に表示されるメニュー機能です。リッチメニューの各領域にリンクを設定することで、LINE公式アカウントの各機能のほか、外部サイトや予約ページなどにユーザーを誘導することができます。
リッチメニューは、デスクトップ版（macOS、Windows）のLINEでは表示されません。
# リッチメニューの構造
リッチメニューは、リッチメニュー画像、タップ領域、およびトークルームメニューで構成されます。
- リッチメニュー画像：JPEGまたはPNG。詳しくは、「リッチメニューの画像を準備する」を参照してください。
- タップ領域：ポストバックイベントを返したり、URLを開いたりする様々なアクションを、メニュー項目に設定できます。
- トークルームメニュー：リッチメニューの開閉に使うメニューです。トークルームメニューのテキストは、カスタマイズできます。
# リッチメニューを作成するツールを選択する
リッチメニューは、2つのツール（LINE Official Account ManagerまたはMessaging API）で作成できます。ツールごとの利点は以下のとおりです。
| ツール | 利点 |
|---|---|
| LINE Official Account Manager (opens new window) |
|
| Messaging API |
|
LINE Official Account Managerで作成したリッチメニューは、Messaging APIで取得および編集できません。逆も同様です。
それぞれのツールでのリッチメニューの作成方法については、以下を参照してください。
# LINE Official Account Managerでリッチメニューを作成する
LINE Official Account Managerではデフォルトのリッチメニューを設定できます。優先順位が高いリッチメニューが設定されていない場合は、ユーザーにはデフォルトのリッチメニューが表示されます。
LINE Official Account Managerを使うと、あらかじめタップ領域が定義されたテンプレートをもとに、グラフィカルユーザーインターフェイスを使ってタップ領域を設定できます。
LINE Official Account Managerを使ってリッチメニューを作成する手順については、LINE Official Account Managerのマニュアル (opens new window)を参照してください。
# Messaging APIでリッチメニューを作成する
Messaging APIを使ってリッチメニューを作成するには、以下の手順に従います。
PHPを使ったサンプルボットにリッチメニューを実装した例については、GitHubのdemo-rich-menu-bot (opens new window)リポジトリを参照してください。
# リッチメニューの画像を準備する
リッチメニューで使用する画像を準備します。
リッチメニューの画像は以下の要件を満たす必要があります。
- 画像フォーマット：JPEGまたはPNG
- 画像の幅サイズ（ピクセル）：800以上、2500以下
- 画像の高さサイズ（ピクセル）：250以上
- 画像のアスペクト比（幅/高さ）：1.45以上
- 最大ファイルサイズ：1MB
LINE Official Account Manager (opens new window)でリッチメニュー新規作成画面を開いて、［デザインガイド］をクリックすると、リッチメニュー用のテンプレート画像がダウンロードできます。LINE Official Account Managerには、LINE Developersコンソールと同じアカウントでログインできます。
# リッチメニューを作成する
最大20件のタップ領域を持つリッチメニューを作成します。
リッチメニューオブジェクトをボディに指定します。以下は、リッチメニューを作成する場合のリクエストとレスポンスの例です。
- リクエストの
selectedプロパティをtrueに変更すると、ユーザーにリンクしたときにリッチメニューが自動的に表示されます。表示されているリッチメニューを、Messaging APIを使用して閉じることはできません。 - リクエストの
chatBarTextプロパティを指定すると、トークルームメニューのテキストを変更できます。
リクエストの例
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": "LINE Developers Info",
"chatBarText": "Tap to open",
"areas": [
{
"bounds": {
"x": 34,
"y": 24,
"width": 169,
"height": 193
},
"action": {
"type": "uri",
"uri": "https://developers.line.biz/en/news/"
}
},
{
"bounds": {
"x": 229,
"y": 24,
"width": 207,
"height": 193
},
"action": {
"type": "uri",
"uri": "https://www.line-community.me/ja/"
}
},
{
"bounds": {
"x": 461,
"y": 24,
"width": 173,
"height": 193
},
"action": {
"type": "uri",
"uri": "https://engineering.linecorp.com/en/blog/"
}
}
]
}'
リッチメニューIDが含まれるレスポンスの例。
{
"richMenuId": "richmenu-88c05ef6921ae53f8b58a25f3a65faf7"
}
指定したリッチメニューオブジェクトに不備がないか確認したい場合、リッチメニューを作成する前に、リッチメニューオブジェクトを検証することも可能です。
リッチメニューの作成方法について詳しくは、『Messaging APIリファレンス』の「リッチメニューを作成する」を参照してください。
# リッチメニューに画像をアップロードして添付する
前の手順で作成したリッチメニューに、画像をアップロードして添付します。
curl -v -X POST https://api-data.line.me/v2/bot/richmenu/richmenu-88c05ef6921ae53f8b58a25f3a65faf7/content \
-H "Authorization: Bearer {channel access token}" \
-H "Content-Type: image/jpeg" \
-T image.jpg
詳しくは、『Messaging APIリファレンス』の「リッチメニューの画像をアップロードする」を参照してください。
# デフォルトのリッチメニューを設定する
デフォルトのリッチメニューを設定します。デフォルトのリッチメニューは、LINE公式アカウントを友だち追加し、ユーザー単位のリッチメニューがリンクされていないすべてのユーザーに表示されます。
curl -v -X POST https://api.line.me/v2/bot/user/all/richmenu/richmenu-88c05ef6921ae53f8b58a25f3a65faf7 \
-H "Authorization: Bearer {channel access token}"
詳しくは、『Messaging APIリファレンス』の「デフォルトのリッチメニューを設定する」を参照してください。
ユーザー単位でリッチメニューをリンクできます。1人のユーザーには、1つのリッチメニューだけをリンクできます。詳しくは、Messaging APIリファレンスの以下の項目を参照してください。
# 複数のリッチメニューを切り替える
リッチメニューエイリアスを使うことで、タブ切り替えのように、複数のリッチメニューを簡単に切り替えられます。
たとえばリッチメニューAとリッチメニューBを切り替えたい場合、以下の手順に従って設定をします。
- リッチメニューAとリッチメニューBの画像を準備する
- リッチメニューA（
richmenu-a）を作成する - リッチメニューAに画像をアップロードする
- リッチメニューB（
richmenu-b）を作成する - リッチメニューBに画像をアップロードする
- リッチメニューAをデフォルトのリッチメニューにする
- リッチメニューエイリアスAを作成する
- リッチメニューエイリアスBを作成する
- リッチメニューの表示を終了する
# 1. リッチメニューAとリッチメニューBの画像を準備する
事前にリッチメニューAの画像（richmenu-a.png）と、リッチメニューBの画像（richmenu-b.png）を準備しておきます。使用できる画像について詳しくは、「リッチメニューの画像を準備する」を参照してください。
リッチメニューAの画像（richmenu-a.png） | リッチメニューBの画像（richmenu-b.png） |
|---|---|
 |  |
# 2. リッチメニューA（richmenu-a）を作成する
「リッチメニューを作成する」エンドポイントを使って、リッチメニューA（richmenu-a）を作成します。
この例では、タップ領域オブジェクトのアクションに、以下を指定しています。
- 左半分のタップ領域
- LINE Developersサイトを開くURIアクションを指定する
- 右半分のタップ領域
- リッチメニュー切替アクション（
richmenuswitch）を指定する - 切替先となるリッチメニューエイリアスIDには、リッチメニューエイリアスB（
richmenu-alias-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-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に画像をアップロードする
「リッチメニューの画像をアップロードする」エンドポイントを使ってリッチメニュー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（richmenu-b）を作成する
リッチメニューAと同様の手順で、リッチメニューB（richmenu-b）を作成します。
この例では、タップ領域オブジェクトのアクションに、以下を指定しています。
- 左半分のタップ領域
- リッチメニュー切替アクション（
richmenuswitch）を指定する - 切替先となるリッチメニューエイリアスIDには、リッチメニューエイリアスB（
richmenu-alias-a）を指定しておく
- リッチメニュー切替アクション（
- 右半分のタップ領域
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/"
}
}
]
}'
レスポンスで、リッチメニューBのリッチメニューIDが返ります。
{
"richMenuId": "richmenu-4ecc8d672d9da4ba375fb82fa938fe5e"
}
# 5. リッチメニューBに画像をアップロードする
リッチメニューAと同様の手順で、リッチメニューBに画像をアップロードします。
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（richmenu-alias-a）を作成します。リッチメニューエイリアスAには、手順2で作成しておいたリッチメニューA（richmenu-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（richmenu-alias-b）を作成します。リッチメニューエイリアスBには、手順4で作成しておいたリッチメニューB（richmenu-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. リッチメニューの表示を終了する
リッチメニュー切り替えアクションを使用した後に、そのリッチメニューの表示を終了したい場合は、以下の手順に従ってください。
- 「デフォルトのリッチメニューを解除する」エンドポイントを使って、デフォルトのリッチメニューを解除する
- 「リッチメニューエイリアスを削除する」エンドポイントを使って、リッチメニューエイリアスAとリッチメニューエイリアスBを削除する
- 「リッチメニューを削除する」エンドポイントを使って、リッチメニューAとリッチメニューBを削除する
なおユーザーとのリンクを解除せずにリッチメニューを削除した場合、ユーザーがトーク画面に再入室したときに削除が反映されます。
LINE公式アカウントと友だちになっているユーザーの、ユーザーIDが分かっている場合は、リッチメニューを削除する代わりに、以下のエンドポイントでリッチメニューとユーザーのリンクを解除することで、リッチメニューの表示を終了できます。
リッチメニューとユーザーのリンクを解除した場合、リッチメニューは即時で表示されなくなります。
リッチメニュー切替アクションでリッチメニューAからリッチメニューBに切り替わった場合や、リッチメニューBから再びリッチメニューAへ切り替わった場合、表示されているリッチメニューは、表示優先順位がもっとも高いユーザー単位のリッチメニューになっています。そのため、手順6で設定したデフォルトのリッチメニューを解除しただけでは、リッチメニューAもしくはリッチメニューBは引き続き表示されたままとなります。その場合は、リッチメニューを削除するか、リッチメニューとユーザーのリンクを解除することで、リッチメニューの表示を終了できます。リッチメニューの表示優先順位について詳しくは、「リッチメニューの表示について」を参照してください。
新しいデフォルトのリッチメニューを設定したのに他のリッチメニューが表示されてしまう場合は、デフォルトのリッチメニューよりも表示優先順位の高い、ユーザー単位のリッチメニューが設定されている可能性があります。その場合は、意図せず表示されているリッチメニューを削除するか、リッチメニューとユーザーのリンクを解除することで、新しいリッチメニューが表示されるようになります。詳しくは、「リッチメニューの表示について」を参照してください。
# リッチメニューの表示について
リッチメニューは、設定方法と適用範囲によって以下の3つのタイプに分けられます。リッチメニューの表示優先順位（1が最優先で表示）は以下のとおりです。
- Messaging APIで設定するユーザー単位のリッチメニュー
- Messaging APIで設定するデフォルトのリッチメニュー
- LINE Official Account Manager (opens new window)で設定するデフォルトのリッチメニュー
ユーザーがリッチメニューをタップして、リッチメニュー切替アクションでリッチメニューが切り替わった場合は、「1. Messaging APIで設定するユーザー単位のリッチメニュー」に含まれます。
# 設定変更のタイミング
リッチメニューの設定を変更したとき、リッチメニューのタイプによって、ユーザーのトーク画面に反映されるタイミングが異なります。
| タイプ | 反映されるタイミング |
|---|---|
| Messaging APIで設定するユーザー単位のリッチメニュー | 即時。ただし、ユーザーとのリンクを解除せずにリッチメニューを削除した場合は、トーク画面に再入室したときに削除が反映されます。 |
| Messaging APIで設定するデフォルトのリッチメニュー | トーク画面に再入室したとき。変更が反映されるまで、1分程度掛かる場合があります。 |
| LINE Official Account Managerで設定するデフォルトのリッチメニュー | トーク画面に再入室したとき。 |
# その他のリッチメニュー機能
リッチメニューを作成してユーザーに割り当てた後は、Messaging APIを使って以下の操作を実行できます。