リッチメニューを使う

リッチメニューはカスタマイズして使うメニューで、ユーザーが簡単にボットとやりとりできるように、トーク画面に表示するものです。

リッチメニューの概要

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

リッチメニュー

  1. リッチメニューの画像:1つ以上のタップ領域から構成されるイメージマップです。各領域にアクションを設定します。2500×1686または2500×843のサイズの画像を使用します。
  2. トークルームメニュー:リッチメニューの開閉に使うメニューです。このメニューのテキストはカスタマイズできます。

リッチメニューの使い方

リッチメニューはMessaging APIまたはLINE@マネージャーを使って作成できます(LINE@マネージャーはLINE@アカウントのコンテンツ管理ツールです)。

Messaging APIを使うと、1つのボットに対して最大で10件の異なるリッチメニューを作成し、各ユーザーに表示するリッチメニューを指定できます。この方法では、個人に合わせたユーザーエクスペリエンスを提供できます。APIを使って作成したリッチメニューを表示するには、ユーザーにリンクする必要があります。

LINE@マネージャーでは、テンプレートを使ってすべてのユーザーに表示されるリッチメニューを作成できます。Messaging APIとは異なり、LINE@マネージャーはポストバックアクションおよびユーザー別のリッチメニュー設定に対応していません。

リッチメニューは、Messaging APIとLINE@マネージャーのどちらを使っても作成できます。両方で作成した場合は、APIを介してリンクしたリッチメニューが、LINE@マネージャーで設定したリッチメニューより優先されます。

次に、Messaging APIおよびLINE@マネージャーを使ったリッチメニューの作成方法について説明します。

Messaging APIを使ってリッチメニューを作成する

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

ここでは、Messaging APIを使ってリッチメニューを作成し、特定のユーザーにリンクする方法について説明します。LINE@マネージャーを使ってリッチメニューを作成する方法については、「LINE@マネージャーを使ってリッチメニューを作成する」を参照してください。

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

リッチメニューを作成するには、まずリッチメニューの画像を準備する必要があります。画像のフォーマットはJPEGまたはPNG、サイズは2500×1686または2500×843のどちらかである必要があります。最大で20件の領域を設定して、タップされたときに実行されるアクションを関連づけることができます。

以下の画像は、複数の領域を持つリッチメニューの画像の例です。次のセクションのサンプルコードでは、このリッチメニュー画像に対応するJSON形式のリッチメニューオブジェクトを使って、リッチメニューを作成しています。PHPを使ったサンプルボットにこのリッチメニューを実装した例については、GitHubのdemo-rich-menu-botリポジトリを参照してください。

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

2. リッチメニューを作成してIDを取得する

Messaging APIを使ってボットの新しいリッチメニューを作成するには、HTTP POSTリクエストを/v2/bot/richmenuエンドポイントに送信します。このとき、チャネルアクセストークンをAuthorizationヘッダーに指定します。

リクエストボディにリッチメニューオブジェクトを指定します。このオブジェクトに、リッチメニューのサイズ、名前、トークルームメニューのテキスト、タップ領域、およびデフォルトでメニューを表示するかどうかを定義します。リッチメニューオブジェクトには、各領域がタップされたときに実行されるアクションの種類も指定できます。リッチメニューオブジェクトの定義方法について詳しくは、「リッチメニューオブジェクト」を参照してください。

リクエストが成功すると、リッチメニューが作成され、LINEプラットフォームからリッチメニューIDが返されます。このIDを使って、リッチメニューの画像をアップロードします。

注:作成できるリッチメニューの数の上限は、ボットあたり10件です。この上限を超過すると、LINEプラットフォームからHTTP 400 Bad Requestエラーが返されます。新しいリッチメニューを作成するには、先にリッチメニューを削除する必要があります。

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"
         }
      }
   ]
}'

詳しくは、「リッチメニューを作成する」を参照してください。

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

リッチメニューを作成してそのIDを取得したら、HTTP POSTリクエストを/v2/bot/richmenu/{richMenuId}/contentエンドポイントに送信することによって、使用する画像をアップロードします。このとき、richMenuIdパスパラメータにリッチメニューIDを指定します。

注:リッチメニューを表示するには、リッチメニューをユーザーにリンクする必要があります。リッチメニューがリンクされていないユーザーには、LINE@マネージャーで設定したリッチメニューが表示されます。LINE@マネージャーでリッチメニューを作成していない場合は、リッチメニューは表示されません。

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

詳しくは、「リッチメニューの画像をアップロードする」を参照してください。

4. リッチメニューとユーザーをリンクする

リッチメニューを個別のユーザーにリンクするには、HTTP POSTリクエストを/v2/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を使って以下の操作を実行できます。

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

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

指定したユーザーにリンクされているリッチメニューがない場合は、LINEプラットフォームからHTTP 404 Not Foundエラーが返されます。

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

詳しくは、「ユーザーのリッチメニューのIDを取得する」を参照してください。

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

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

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

詳しくは、「リッチメニューを削除する」を参照してください。

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

ユーザーとリッチメニューのリンクを解除するには、HTTP DELETEリクエストを/v2/bot/user/{userId}/richmenuエンドポイントに送信します。このとき、ユーザーIDをパスパラメータとして指定します。リッチメニューのリンクを解除したユーザーには、LINE@マネージャーで設定したリッチメニューが表示されます。LINE@マネージャーでリッチメニューを作成していない場合は、リッチメニューは表示されません。

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

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

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

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

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

詳しくは、「リッチメニューのリストを取得する」を参照してください。

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

リッチメニューの画像をダウンロードするには、HTTP GETリクエストを/v2/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

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

LINE@マネージャーを使ってリッチメニューを作成する

ボットのリッチメニューを設定するには、LINE@マネージャーの[リッチコンテンツ作成]メニューを選択します。メニューのデザインを選択し、ボタンの詳細を設定してください。

LINE@マネージャーのリッチメニュー

関連ページ

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