# リッチメニューを使う

# はじめに

リッチメニューはトーク画面に表示されるカスタマイズして使うメニューで、ユーザーがLINE公式アカウントとやりとりするために使います。

# リッチメニューの構造

リッチメニュー

リッチメニューは、リッチメニュー画像、タップ領域、およびトークルームメニューで構成されます。

  1. リッチメニュー画像:JPEGまたはPNG。詳しくは、「リッチメニューの画像を準備する」を参照してください。
  2. タップ領域:ポストバックイベントを返したり、URLを開いたりする様々なアクションを、メニュー項目に設定できます。
  3. トークルームメニュー:リッチメニューの開閉に使うメニューです。トークルームメニューのテキストは、カスタマイズできます。

# リッチメニューを作成するツールを選択する

リッチメニューは、2つのツール(LINE Official Account ManagerまたはMessaging API)で作成できます。ツールごとの利点は以下のとおりです。

ツール 利点
LINE Official Account Manager
  • 開発期間が短く済みます
  • 操作が簡単なGUIで開発できます
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のマニュアルを参照してください。

# Messaging APIでリッチメニューを作成する

Messaging APIを使ってリッチメニューを作成するには、以下の手順に従います。

  1. リッチメニューの画像を準備する
  2. タップ領域を指定してリッチメニューを作成する
  3. リッチメニューに画像をアップロードして添付する
  4. デフォルトのリッチメニューを設定する
リッチメニューを実装する

PHPを使ったサンプルボットにリッチメニューを実装した例については、GitHubのdemo-rich-menu-botリポジトリを参照してください。

# リッチメニューの画像を準備する

リッチメニューで使用する画像を準備します。

リッチメニューの画像は以下の要件を満たす必要があります。

  • 画像フォーマット:JPEGまたはPNG
  • 画像サイズ(ピクセル):2500x1686、2500x843、1200x810、1200x405、800x540、800x270
  • 最大ファイルサイズ:1MB

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

最大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/"
          }
      },
      {
          "bounds": {
              "x": 461,
              "y": 24,
              "width": 173,
              "height": 193
          },
          "action": {
              "type": "flex",
              "altText": "LINE Developers Site More Options",
              "contents": {
                  "type": "bubble",
                  "hero": {
                      "type": "image",
                      "url": "devSiteImageUrl",
                      "size": "full",
                      "margin": "none",
                      "gravity": "top",
                      "aspectRatio": "1200:630"
                  }
              }
          }
      }
  ]
}'

リッチメニュー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リファレンスの以下の項目を参照してください。

# リッチメニューの表示について

リッチメニューは、設定方法と適用範囲によって以下の3つのタイプに分けられます。リッチメニューの表示優先順位(1が最優先で表示)は以下のとおりです。

  1. Messaging APIで設定するユーザー単位のリッチメニュー
  2. Messaging APIで設定するデフォルトのリッチメニュー
  3. LINE Official Account Managerで設定するデフォルトのリッチメニュー

# 設定変更のタイミング

リッチメニューの設定を変更したとき、リッチメニューのタイプによって、ユーザーのトーク画面に反映されるタイミングが異なります。

タイプ 反映されるタイミング
Messaging APIで設定するユーザー単位のリッチメニュー 即時。ただし、ユーザーとのリンクを解除せずにリッチメニューを削除した場合は、トーク画面に再入室したときに削除が反映されます。
Messaging APIで設定するデフォルトのリッチメニュー トーク画面に再入室したとき。変更が反映されるまで、1分程度掛かる場合があります。
LINE Official Account Managerで設定するデフォルトのリッチメニュー トーク画面に再入室したとき。

# その他のリッチメニュー機能

リッチメニューを作成してユーザーに割り当てた後は、Messaging APIを使って以下の操作を実行できます。