こんにちは。dotDでmeepaの開発を担当している前田です。

今回は、LINE公式アカウントのトーク画面に表示される、カスタマイズ可能なメニューである「リッチメニュー」の作成・表示方法について解説します。
LINE Messaging APIのリッチメニューのドキュメントがわかりづらいと感じたため、この記事を書きました。

この記事が、リッチメニュー作成に手こずっている方の助けになれば幸いです。

▼目次

• 作るもの
• 使用ツール
• リッチメニューの作成・表示手順
• ①リッチメニューを作成する
• ②リッチメニューに画像をつける
• ③LINE公式アカウントでリッチメニューが表示されるように設定する
• まとめ

作るもの

　　　　　　　　　　　　　　　　　　　meepaのリッチメニュー

meepaで実際に使っているリッチメニューを作成します。

使用ツール

リッチメニューを作成・表示させるには、LINE Messaging APIが用意しているリッチメニューAPIを叩く必要があります。

APIを叩くのはcurlでやってもいいですが、Postmanを使うのがオススメです。
直感的に使えますし、APIリクエストを保存できるのでとても便利です。

リッチメニューの作成・表示手順

流れとしては、以下になります。

①リッチメニューを作成する
②リッチメニューに画像をつける
③LINE公式アカウントでリッチメニューが表示されるように設定する

1つずつ見ていきます。

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

- エンドポイント
  - https://api.line.me/v2/bot/richmenu

- HTTPメソッド
  - POST

- リクエストヘッダー
  - Authorization
    - Bearer {channel access token}
  - Content-Type
    - application/json

- リクエストボディ
{
  "size": {
    "width": 900,
    "height": 600
  },
  "selected": false,
  "name": "meepa（β版）",
  "chatBarText": "メニュー",
  "areas": [
    {
      "bounds": {
        "x": 0,
        "y": 0,
        "width": 225,
        "height": 300
      },
      "action": {
        "type": "postback",
        "displayText": "レコメンドを受け取る",
        "data": "method=xxx"
      }
    },
    {
      "bounds": {
        "x": 225,
        "y": 0,
        "width": 225,
        "height": 300
      },
      "action": {
        "type": "postback",
        "displayText": "予約を確認する",
        "data": "method=xxx"
      }
    },
    {
      "bounds": {
        "x": 450,
        "y": 0,
        "width": 225,
        "height": 300
      },
      "action": {
        "type": "postback",
        "displayText": "登録内容を変更する",
        "data": "method=xxx"
      }
    },
    {
      "bounds": {
        "x": 675,
        "y": 0,
        "width": 225,
        "height": 300
      },
      "action": {
        "type": "postback",
        "displayText": "ジャンルを変更する",
        "data": "method=xxx"
      }
    },
    {
      "bounds": {
        "x": 0,
        "y": 300,
        "width": 225,
        "height": 300
      },
      "action": {
        "type": "postback",
        "displayText": "お気に入りを確認する",
        "data": "method=xxx"
      }
    },
    {
      "bounds": {
        "x": 225,
        "y": 300,
        "width": 225,
        "height": 300
      },
      "action": {
        "type": "postback",
        "displayText": "クレジット数を確認する",
        "data": "method=xxx"
      }
    },
    {
      "bounds": {
        "x": 450,
        "y": 300,
        "width": 225,
        "height": 300
      },
      "action": {
        "type": "uri",
        "uri": "xxx"
      }
    },
    {
      "bounds": {
        "x": 675,
        "y": 300,
        "width": 225,
        "height": 300
      },
      "action": {
        "type": "postback",
        "displayText": "お問い合わせ",
        "data": "method=xxx"
      }
    }
  ]
}

- レスポンス
{
  "richMenuId": "{richMenuId}"
}- エンドポイント
  - https://api.line.me/v2/bot/richmenu

- HTTPメソッド
  - POST

- リクエストヘッダー
  - Authorization
    - Bearer {channel access token}
  - Content-Type
    - application/json

- リクエストボディ
{
  "size": {
    "width": 900,
    "height": 600
  },
  "selected": false,
  "name": "meepa（β版）",
  "chatBarText": "メニュー",
  "areas": [
    {
      "bounds": {
        "x": 0,
        "y": 0,
        "width": 225,
        "height": 300
      },
      "action": {
        "type": "postback",
        "displayText": "レコメンドを受け取る",
        "data": "method=xxx"
      }
    },
    {
      "bounds": {
        "x": 225,
        "y": 0,
        "width": 225,
        "height": 300
      },
      "action": {
        "type": "postback",
        "displayText": "予約を確認する",
        "data": "method=xxx"
      }
    },
    {
      "bounds": {
        "x": 450,
        "y": 0,
        "width": 225,
        "height": 300
      },
      "action": {
        "type": "postback",
        "displayText": "登録内容を変更する",
        "data": "method=xxx"
      }
    },
    {
      "bounds": {
        "x": 675,
        "y": 0,
        "width": 225,
        "height": 300
      },
      "action": {
        "type": "postback",
        "displayText": "ジャンルを変更する",
        "data": "method=xxx"
      }
    },
    {
      "bounds": {
        "x": 0,
        "y": 300,
        "width": 225,
        "height": 300
      },
      "action": {
        "type": "postback",
        "displayText": "お気に入りを確認する",
        "data": "method=xxx"
      }
    },
    {
      "bounds": {
        "x": 225,
        "y": 300,
        "width": 225,
        "height": 300
      },
      "action": {
        "type": "postback",
        "displayText": "クレジット数を確認する",
        "data": "method=xxx"
      }
    },
    {
      "bounds": {
        "x": 450,
        "y": 300,
        "width": 225,
        "height": 300
      },
      "action": {
        "type": "uri",
        "uri": "xxx"
      }
    },
    {
      "bounds": {
        "x": 675,
        "y": 300,
        "width": 225,
        "height": 300
      },
      "action": {
        "type": "postback",
        "displayText": "お問い合わせ",
        "data": "method=xxx"
      }
    }
  ]
}

- レスポンス
{
  "richMenuId": "{richMenuId}"
}

リクエストボディの以下JSONの`bounds`がわかりづらいと思うので、こちらを詳細に解説します。

  "areas": [
    {
      "bounds": {
        "x": 0,
        "y": 0,
        "width": 225,
        "height": 300
      },
      "action": {
        "type": "postback",
        "displayText": "レコメンドを受け取る",
        "data": "method=xxx"
      }
    },
    {
      "bounds": {
        "x": 225,
        "y": 0,
        "width": 225,
        "height": 300
      },
      "action": {
        "type": "postback",
        "displayText": "予約を確認する",
        "data": "method=xxx"
      }
    },
    {
      "bounds": {
        "x": 450,
        "y": 0,
        "width": 225,
        "height": 300
      },
      "action": {
        "type": "postback",
        "displayText": "登録内容を変更する",
        "data": "method=xxx"
      }
    },
    {
      "bounds": {
        "x": 675,
        "y": 0,
        "width": 225,
        "height": 300
      },
      "action": {
        "type": "postback",
        "displayText": "ジャンルを変更する",
        "data": "method=xxx"
      }
    },
    {
      "bounds": {
        "x": 0,
        "y": 300,
        "width": 225,
        "height": 300
      },
      "action": {
        "type": "postback",
        "displayText": "お気に入りを確認する",
        "data": "method=xxx"
      }
    },
    {
      "bounds": {
        "x": 225,
        "y": 300,
        "width": 225,
        "height": 300
      },
      "action": {
        "type": "postback",
        "displayText": "クレジット数を確認する",
        "data": "method=xxx"
      }
    },
    {
      "bounds": {
        "x": 450,
        "y": 300,
        "width": 225,
        "height": 300
      },
      "action": {
        "type": "uri",
        "uri": "xxx"
      }
    },
    {
      "bounds": {
        "x": 675,
        "y": 300,
        "width": 225,
        "height": 300
      },
      "action": {
        "type": "postback",
        "displayText": "お問い合わせ",
        "data": "method=xxx"
      }
    }
  ]  "areas": [
    {
      "bounds": {
        "x": 0,
        "y": 0,
        "width": 225,
        "height": 300
      },
      "action": {
        "type": "postback",
        "displayText": "レコメンドを受け取る",
        "data": "method=xxx"
      }
    },
    {
      "bounds": {
        "x": 225,
        "y": 0,
        "width": 225,
        "height": 300
      },
      "action": {
        "type": "postback",
        "displayText": "予約を確認する",
        "data": "method=xxx"
      }
    },
    {
      "bounds": {
        "x": 450,
        "y": 0,
        "width": 225,
        "height": 300
      },
      "action": {
        "type": "postback",
        "displayText": "登録内容を変更する",
        "data": "method=xxx"
      }
    },
    {
      "bounds": {
        "x": 675,
        "y": 0,
        "width": 225,
        "height": 300
      },
      "action": {
        "type": "postback",
        "displayText": "ジャンルを変更する",
        "data": "method=xxx"
      }
    },
    {
      "bounds": {
        "x": 0,
        "y": 300,
        "width": 225,
        "height": 300
      },
      "action": {
        "type": "postback",
        "displayText": "お気に入りを確認する",
        "data": "method=xxx"
      }
    },
    {
      "bounds": {
        "x": 225,
        "y": 300,
        "width": 225,
        "height": 300
      },
      "action": {
        "type": "postback",
        "displayText": "クレジット数を確認する",
        "data": "method=xxx"
      }
    },
    {
      "bounds": {
        "x": 450,
        "y": 300,
        "width": 225,
        "height": 300
      },
      "action": {
        "type": "uri",
        "uri": "xxx"
      }
    },
    {
      "bounds": {
        "x": 675,
        "y": 300,
        "width": 225,
        "height": 300
      },
      "action": {
        "type": "postback",
        "displayText": "お問い合わせ",
        "data": "method=xxx"
      }
    }
  ]

`areas`はリッチメニューエリアを指していて、`bounds`はリッチメニューエリアの1つのエリア（リッチメニュー小エリアとします）を指しています。
meepaのリッチメニューでは、リッチメニュー小エリアが8つあるので、`bounds`は8つあります。

`bounds`の`width`と`height`はリッチメニュー小エリアの幅と高さを指しています。meepaのリッチメニュー小エリアはいずれも幅225px高さ300pxになっています。
`x`と`y`は座標を指しています。座標は以下のように左上を(0, 0)とします。そして、①から順番に`bounds`を指定していきます。

　　　　　　　　　　　　　　　　　　　meepaのリッチメニュー

②リッチメニューに画像をつける

- リッチメニューの画像の要件
  - 画像フォーマット：JPEGまたはPNG
  - 画像の幅サイズ（ピクセル）：800以上、2500以下
  - 画像の高さサイズ（ピクセル）：250以上
  - 画像のアスペクト比（幅/高さ）：1.45以上
  - 最大ファイルサイズ：1MB

- エンドポイント
  - https://api-data.line.me/v2/bot/richmenu/{richMenuId}/content

- パスパラメータ
  - richMenuId

- HTTPメソッド
  - POST

- リクエストヘッダー
  - Authorization
    - Bearer {channel access token}
  - Content-Type
    - image/jpegまたはimage/png

- リクエストボディ
  - 画像

- レスポンス
{}- リッチメニューの画像の要件
  - 画像フォーマット：JPEGまたはPNG
  - 画像の幅サイズ（ピクセル）：800以上、2500以下
  - 画像の高さサイズ（ピクセル）：250以上
  - 画像のアスペクト比（幅/高さ）：1.45以上
  - 最大ファイルサイズ：1MB

- エンドポイント
  - https://api-data.line.me/v2/bot/richmenu/{richMenuId}/content

- パスパラメータ
  - richMenuId

- HTTPメソッド
  - POST

- リクエストヘッダー
  - Authorization
    - Bearer {channel access token}
  - Content-Type
    - image/jpegまたはimage/png

- リクエストボディ
  - 画像

- レスポンス
{}

パスパラメータには、①リッチメニューを作成する でレスポンスとして返ってきたrichMenuIdを指定します。

③LINE公式アカウントでリッチメニューが表示されるように設定する

- エンドポイント
  - https://api.line.me/v2/bot/user/all/richmenu/{richMenuId}

- パスパラメータ
  - richMenuId

- HTTPメソッド
  - POST

- リクエストヘッダー
  - Authorization
    - Bearer {channel access token}

- レスポンス
{}- エンドポイント
  - https://api.line.me/v2/bot/user/all/richmenu/{richMenuId}

- パスパラメータ
  - richMenuId

- HTTPメソッド
  - POST

- リクエストヘッダー
  - Authorization
    - Bearer {channel access token}

- レスポンス
{}

ここのパスパラメータにも、①リッチメニューを作成する でレスポンスとして返ってきたrichMenuIdを指定します。

まとめ

今回は、リッチメニューの作成・表示方法について解説しました。
私は、以前リッチメニューを作成するときに、`bounds`がわかりづらいと感じたため、`bounds`の指定方法にフォーカスして、リッチメニューの作成・表示方法の記事を書きたいと思っていました。
同じところでつまづいている方もきっといると思うので、この記事がリッチメニュー作成のご参考になれば大変嬉しく思います！

最後に、dotDでは、新しい事業を共に作っていくためのエンジニアのメンバーを募集しています！
少しでも興味を持ってくださった方はお気軽にご連絡ください！！