リッチメニューを使う

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

リッチメニュー

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

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

リッチメニューの作成方法

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

Messaging APIを介して特定のユーザーにリンクするリッチメニューは、LINE@マネージャーで設定したリッチメニューより優先されます。

Messaging API

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

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

Messaging APIを使ったリッチメニューの作成方法について詳しくは、以下のセクションを参照してください。

LINE@マネージャー

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

複数のリッチメニューを作成できますが、ある時点でアクティブにできるメニューは1つだけです。アクティブなリッチメニューは、ボットとやりとりするすべてのユーザーに表示されます。

LINE@マネージャーを使ってリッチメニューを作成する方法について詳しくは、「LINE@マネージャーを使ってリッチメニューを作成する」を参照してください。

Messaging APIを使ってリッチメニューを作成およびリンクする

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

  1. リッチメニューの画像を準備する
  2. リッチメニューを作成する
  3. リッチメニューの画像をアップロードする
  4. リッチメニューを個別のユーザーにリンクする

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

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

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

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

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

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

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

  1. リッチメニューオブジェクトを指定します。このオブジェクトに、リッチメニューのサイズ、名前、トークルームメニューのテキスト、タップ領域、およびデフォルトでメニューを表示するかどうかを定義します。
  2. HTTP POSTリクエストを/v2/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が返されます。その場合は、新しいリッチメニューを作成する前にリッチメニューを削除する必要があります。

詳しくは、『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

詳しくは、『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}"

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

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

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

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

ユーザーにリンクされているリッチメニューのIDを取得するには、HTTP GETリクエストを/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}'

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

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

作成できるリッチメニューの数の上限は、ボットあたり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}'

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

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

ユーザーとリッチメニューのリンクを解除するには、HTTP DELETEリクエストを/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}'

詳しくは、『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}'

詳しくは、『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

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

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

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

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

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

関連ページ

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