リッチメニューを使う

はじめに

リッチメニューはカスタマイズして使うメニューで、ユーザーが簡単にボットとやりとりできるように、トーク画面に表示するものです。メニュー項目をカスタマイズして、さまざまなアクションに対応できます。

リッチメニューの構造

リッチメニュー

リッチメニューは、リッチメニューの画像とトークルームメニューから構成されます。

  1. リッチメニューの画像:1つ以上のタップ領域から構成されるイメージマップです。各領域が、ポストバックアクションを返したりURLを開いたりの特定のアクションに対応します。
  2. トークルームメニュー:リッチメニューの開閉に使うメニューです。このメニューのテキストはカスタマイズできます。

リッチメニューのタイプと優先順位

リッチメニューは、設定方法と適用範囲によって以下の3つのタイプに分けられます。

タイプ 設定方法 適用範囲 優先順位
Messaging APIで設定するユーザー単位のリッチメニュー Messaging API 個別のユーザー 1
Messaging APIで設定するデフォルトのリッチメニュー Messaging API ボットと友だちになっているすべてのユーザー 2
LINE@マネージャーで設定するデフォルトのリッチメニュー LINE@マネージャー ボットと友だちになっているすべてのユーザー 3

これらの3つのタイプのリッチメニューを1人のユーザーに同時に割り当てることができます。その場合、トーク画面に表示されるリッチメニューは上の表に記載の優先順位で決まります。

設定変更のタイミング

リッチメニューの設定を変更したとき、ユーザーのトーク画面に反映されるタイミングは以下のとおりです。

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

Messaging APIで設定する

注:Messaging APIで作成したリッチメニューは、Android版およびiOS版LINE 7.14.0以降でサポートされます。

Messaging APIではデフォルトのリッチメニューおよびユーザー単位のリッチメニューを設定できます。

Messaging APIで設定するリッチメニューでは、ポストバックおよび日時選択アクションがサポートされます。また、リッチメニューの画像内のタップ領域を自由にカスタマイズできます。

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

  1. リッチメニューの画像を準備する
  2. リッチメニューを作成する
  3. リッチメニューの画像をアップロードする

作成したリッチメニューをデフォルトのリッチメニューに設定する、または個別のユーザーにリンクするには、以下の手順に従います。

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

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

リッチメニューで使用する、最大で20件のタップ領域を持つ画像を準備します。

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

  • 画像フォーマット:JPEGまたはPNG
  • 画像サイズ:2500×1686または2500×843ピクセル
  • 最大ファイルサイズ:1MB

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

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

  1. リッチメニューオブジェクトを指定します。このオブジェクトに、リッチメニューのサイズ、名前、トークルームメニューのテキスト、タップ領域、およびデフォルトでメニューを表示するかどうかを定義します。
  2. HTTP POSTリクエストを/bot/richmenuエンドポイントに送信します。このとき、チャネルアクセストークンをAuthorizationヘッダーに、リッチメニューオブジェクトをボディに指定します。成功すると、リッチメニューIDが返されます。

1つのボットに対して最大で1000件のリッチメニューを作成できます。

以下の画像とリクエストを使って、ゲームコントローラーを表す複数のタップ領域を持つリッチメニューを作成するとします。リクエストが成功すると、リッチメニューのIDがレスポンスとして返されます。

リッチメニュー画像の例
リッチメニューのサンプル

リクエストの例

  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":"Controller",
    "chatBarText":"Controller",
    "areas":[
        {
          "bounds":{
              "x":551,
              "y":325,
              "width":321,
              "height":321
          },
          "action":{
              "type":"message",
              "text":"up"
          }
        },
        {
          "bounds":{
              "x":876,
              "y":651,
              "width":321,
              "height":321
          },
          "action":{
              "type":"message",
              "text":"right"
          }
        },
        {
          "bounds":{
              "x":551,
              "y":972,
              "width":321,
              "height":321
          },
          "action":{
              "type":"message",
              "text":"down"
          }
        },
        {
          "bounds":{
              "x":225,
              "y":651,
              "width":321,
              "height":321
          },
          "action":{
              "type":"message",
              "text":"left"
          }
        },
        {
          "bounds":{
              "x":1433,
              "y":657,
              "width":367,
              "height":367
          },
          "action":{
              "type":"message",
              "text":"btn b"
          }
        },
        {
          "bounds":{
              "x":1907,
              "y":657,
              "width":367,
              "height":367
          },
          "action":{
              "type":"message",
              "text":"btn a"
          }
        }
    ]
  }'

リッチメニューIDを返すレスポンスの例。ステータスコードは200です。

{
    "richMenuId": "richmenu-88c05ef6921ae53f8b58a25f3a65faf7"
}

1つのボットに最大1000件のリッチメニューを作成できますが、この上限を超過すると、ステータスコード400 Bad Requestが返されます。その場合は、新しいリッチメニューを作成する前にリッチメニューを削除する必要があります。

詳しくは、『Messaging APIリファレンス』の「リッチメニューを作成する」を参照してください。

リッチメニューの画像をアップロードする

リッチメニューの画像をアップロードするには、HTTP POSTリクエストを/bot/richmenu/{richMenuId}/contentエンドポイントに送信します。このとき、リッチメニューIDをrichMenuIdパスパラメータに指定します。

curl -v -X POST https://api.line.me/v2/bot/richmenu/{richMenuId}/content \
-H "Authorization: Bearer {channel access token}" \
-H "Content-Type: image/jpeg" \
-T image.jpg

詳しくは、『Messaging APIリファレンス』の「リッチメニューの画像をアップロードする」を参照してください。

デフォルトのリッチメニューを設定する

リッチメニューをボットのデフォルトのリッチメニューに設定するには、HTTP POSTリクエストを/bot/user/all/richmenu/{richMenuId}エンドポイントに送信します。このとき、リッチメニューIDをパスパラメータとして指定します。APIコールが成功すると、リッチメニューはユーザーがトーク画面に再入室後に表示されます。

デフォルトのリッチメニューが既に存在する場合は、新しいリッチメニューに置き換えられます。

curl -v -X POST https://api.line.me/v2/bot/user/all/richmenu/{richMenuId} \
-H "Authorization: Bearer {channel access token}"

詳しくは、『Messaging APIリファレンス』の「デフォルトのリッチメニューを設定する」を参照してください。

リッチメニューを個別のユーザーにリンクする

リッチメニューを個別のユーザーにリンクするには、HTTP POSTリクエストを/bot/user/{userId}/richmenu/{richMenuId}エンドポイントに送信します。このとき、リッチメニューIDとユーザーIDをパスパラメータとして指定します。APIコールが成功すると、リッチメニューは直ちにユーザーに表示されます。

ユーザーにリンクされたリッチメニューが既に存在する場合は、新しいリッチメニューに置き換えられます。

curl -v -X POST https://api.line.me/v2/bot/user/{userId}/richmenu/{richMenuId} \
-H "Authorization: Bearer {channel access token}"

詳しくは、『Messaging APIリファレンス』の「リッチメニューとユーザーをリンクする」を参照してください。

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

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

リッチメニューの画像をダウンロードする

リッチメニューの画像をダウンロードするには、HTTP GETリクエストを/bot/richmenu/{richMenuId}/contentエンドポイントに送信します。このとき、リッチメニューIDをパスパラメータとして指定します。画像をファイルとしてダウンロードするには、cURLコマンドで-o [filename]を使ってファイル名を指定できます。

curl \
-H 'Authorization: Bearer {channel access token}' \
"https://api.line.me/v2/bot/richmenu/{richMenuId}/content" \
-o picture.jpg

詳しくは、『Messaging APIリファレンス』の「リッチメニューの画像をダウンロードする」を参照してください。

リッチメニューのリストを取得する

すべてのリッチメニューのIDとリッチメニューオブジェクトのリストを取得するには、HTTP GETリクエストを/bot/richmenu/listエンドポイントに送信します。

curl -v -X GET https://api.line.me/v2/bot/richmenu/list \
-H 'Authorization: Bearer {channel access token}'

詳しくは、『Messaging APIリファレンス』の「リッチメニューのリストを取得する」を参照してください。

リッチメニューを取得する

IDを指定してリッチメニューを取得するには、HTTP GETリクエストを/bot/richmenu/{richMenuId}エンドポイントに送信します。

curl -v -X GET https://api.line.me/v2/bot/richmenu/{richMenuId} \
-H 'Authorization: Bearer {channel access token}'

詳しくは、『Messaging APIリファレンス』の「リッチメニューを取得する」を参照してください。

リッチメニューを削除する

作成できるリッチメニューの数の上限は、ボットあたり1000件です。この上限を超過した場合は、新しいリッチメニューを作成する前に既存のリッチメニューを削除する必要があります。リッチメニューを削除するには、HTTP DELETEリクエストを/bot/richmenu/{richMenuId}エンドポイントに送信します。このとき、リッチメニューIDをパスパラメータとして指定します。

curl -v -X DELETE https://api.line.me/v2/bot/richmenu/{richMenuId} \
-H 'Authorization: Bearer {channel access token}'

詳しくは、『Messaging APIリファレンス』の「リッチメニューを削除する」を参照してください。

デフォルトのリッチメニューのIDを取得する

デフォルトのリッチメニューのIDを取得するには、HTTP GETリクエストを/bot/user/all/richmenuエンドポイントに送信します。リクエストが成功した場合は、デフォルトのリッチメニューのIDが返されます。

curl -v -X GET https://api.line.me/v2/bot/user/all/richmenu \
-H 'Authorization: Bearer {channel access token}'

詳しくは、『Messaging APIリファレンス』の「デフォルトのリッチメニューのIDを取得する」を参照してください。

デフォルトのリッチメニューを解除する

デフォルトのリッチメニューを解除するには、HTTP DELETEリクエストを/bot/user/all/richmenuエンドポイントに送信します。

curl -v -X DELETE https://api.line.me/v2/bot/user/all/richmenu \
-H 'Authorization: Bearer {channel access token}'

詳しくは、『Messaging APIリファレンス』の「デフォルトのリッチメニューを解除する」を参照してください。

ユーザーのリッチメニューのIDを取得する

ユーザーにリンクされているリッチメニューのIDを取得するには、HTTP GETリクエストを/bot/user/{userId}/richmenuエンドポイントに送信します。このとき、ユーザーIDをパスパラメータとして指定します。リクエストが成功した場合は、ユーザーにリンクされているリッチメニューのIDが返されます。

curl -v -X GET https://api.line.me/v2/bot/user/{userId}/richmenu \
-H 'Authorization: Bearer {channel access token}'

詳しくは、『Messaging APIリファレンス』の「ユーザーのリッチメニューのIDを取得する」を参照してください。

リッチメニューとユーザーのリンクを解除する

ユーザーとリッチメニューのリンクを解除するには、HTTP DELETEリクエストを/bot/user/{userId}/richmenuエンドポイントに送信します。このとき、ユーザーIDをパスパラメータとして指定します。

curl -v -X DELETE https://api.line.me/v2/bot/user/{userId}/richmenu \
-H 'Authorization: Bearer {channel access token}'

詳しくは、『Messaging APIリファレンス』の「リッチメニューとユーザーのリンクを解除する」を参照してください。

LINE@マネージャーで設定する

LINE@マネージャーではデフォルトのリッチメニューを設定できます。

LINE@マネージャーを使うと、事前定義された画像テンプレートに基づくリッチメニュー画像のタップ領域を、グラフィカルユーザーインターフェイスを使って設定できます。また、リッチメニューのラベルをカスタマイズしたり事前定義されたアイコンを使ったりできます。

複数のリッチメニューを作成できますが、ある時点でアクティブにできるメニューは1つだけです。

LINE@マネージャーを使ってリッチメニューを作成するには、以下の手順に従います。

  1. LINE@マネージャーで[リッチコンテンツ作成]>[リッチメニュー]の順に選択します。
  2. [新規作成]をクリックします。 リッチメニューコンテンツの設定
  3. リッチメニューを設定します。
  4. 事前定義されたリッチメニューの画像テンプレートを選択します。
    • 画像テンプレート
      リッチメニューコンテンツの設定
    • テキストとアイコンのテンプレート
      リッチメニューコンテンツの設定
  5. 画像をアップロードします。
  6. 各領域のアクション(キーワード、URL、またはテキスト)を選択します。 リッチメニューコンテンツの設定
  7. [保存]をクリックします。

ボットとやりとりするユーザーのトーク画面にリッチメニューが表示されます。

関連ページ

リッチメニューの使用方法について詳しくは、『Messaging APIリファレンス』の「リッチメニュー」を参照してください。GitHubのdemo-rich-menu-botリポジトリでは、Messaging APIを使ったリッチメニューの実装のデモを参照できます。