# リッチメニューを使う
このページでは、LINE公式アカウントを友だち追加しているすべてのユーザーに表示される「デフォルトのリッチメニュー」を、Messaging APIを使って設定する方法について説明します。
デフォルトのリッチメニューは、LINE Official Account Manager (opens new window)でも設定できます。詳しくは、「LINE Official Account Managerでリッチメニューを設定する」を参照してください。
# デフォルトのリッチメニューを設定する
Messaging APIを使ってデフォルトのリッチメニューを設定するには、以下の手順に従います。
- リッチメニューの画像を準備する。
- タップ領域を指定してリッチメニューを作成する。
- リッチメニューに画像をアップロードして添付する。
- デフォルトのリッチメニューを設定する。
# 1. リッチメニューの画像を準備する
まず、リッチメニューの画像を準備します。リッチメニューの画像は、タップ領域をどのように配置するかを考慮する必要があります。
ここでは、以下のリッチメニュー用のテンプレート画像(richmenu-template-guide-04.png
)を使用します。任意のディレクトリに保存してください。
この画像の場合、A、B、Cの3つのタップ領域を定義することが想定されています。
LINE Official Account Manager (opens new window)からリッチメニュー用のテンプレート画像をダウンロードできます。リッチメニュー新規作成画面を開いて、[デザインガイド]をクリックしてください。LINE Official Account Managerには、LINE Developersコンソールと同じアカウントでログインできます。
画像の要件について詳しくは、『Messaging APIリファレンス』の「リッチメニューの画像の要件」を参照してください。
# 2. リッチメニューを作成する
手順1.で用意したリッチメニューの画像に合うリッチメニューを作成します。画像のA、B、Cにタップ領域が正しく設定されるようにします。
リッチメニューを作成するには、リッチメニューオブジェクトをリッチメニューを作成するエンドポイントのリクエストに指定します。以下のコマンドをターミナルで実行してください。A、B、Cのそれぞれのタップ領域で、異なるURLが開くようにURIアクションを指定しています。
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": "デフォルトのリッチメニューのテスト",
"chatBarText": "Tap to open",
"areas": [
{
"bounds": {
"x": 0,
"y": 0,
"width": 1666,
"height": 1686
},
"action": {
"type": "uri",
"label": "タップ領域A",
"uri": "https://developers.line.biz/ja/news/"
}
},
{
"bounds": {
"x": 1667,
"y": 0,
"width": 834,
"height": 843
},
"action": {
"type": "uri",
"label": "タップ領域B",
"uri": "https://www.line-community.me/ja/"
}
},
{
"bounds": {
"x": 1667,
"y": 844,
"width": 834,
"height": 843
},
"action": {
"type": "uri",
"label": "タップ領域C",
"uri": "https://techblog.lycorp.co.jp/ja/"
}
}
]
}'
- リクエストの
selected
プロパティをtrue
に変更すると、ユーザーにリンクしたときにリッチメニューが自動的に表示されます。 - トークルームメニューのテキストを変更するには、リクエストの
chatBarText
プロパティを指定します。 - 指定したリッチメニューオブジェクトに不備がないか、リッチメニューを作成する前に、リッチメニューオブジェクトを検証することも可能です。
リッチメニューの作成に成功すると、リッチメニューのIDがレスポンスで返されます。リッチメニューのIDは、以降の手順で使用します。
{
"richMenuId": "richmenu-88c05..."
}
# 3. リッチメニューに画像をアップロードして添付する
手順2.で作成したリッチメニューに、手順1.で用意した画像をアップロードして添付します。ターミナル上で、以下の手順でコマンドを実行してください。
- 手順1.で用意した画像があるディレクトリに移動する。
- 以下のコマンドの
{richMenuId}
を手順2.で取得したリッチメニューのIDに置き換えて実行する。
curl -v -X POST https://api-data.line.me/v2/bot/richmenu/{richMenuId}/content \
-H "Authorization: Bearer {channel access token}" \
-H "Content-Type: image/png" \
-T richmenu-template-guide-04.png
# 4. デフォルトのリッチメニューを設定する
準備が完了したため、リッチメニューを表示するための設定を行います。ここでは、デフォルトのリッチメニューを設定します。デフォルトのリッチメニューは、LINE公式アカウントを友だち追加し、ユーザー単位のリッチメニューがリンクされていないすべてのユーザーに表示されます。以下のコマンドをターミナルで実行してください。
curl -v -X POST https://api.line.me/v2/bot/user/all/richmenu/{richMenuId} \
-H "Authorization: Bearer {channel access token}"
# 4-1. リッチメニューの表示を確認する
設定したデフォルトのリッチメニューが表示されることを確認します。リッチメニューを設定したLINE公式アカウントのトーク画面を開きます。今回作成したリッチメニューは、閉じた状態で表示されるため[Tap to open]をタップして、リッチメニューを開きます。
# ユーザー単位のリッチメニューについて
Messaging APIを使うと、ユーザーごとにリッチメニューをリンクできます。ユーザー単位のリッチメニューについて詳しくは、「ユーザー単位のリッチメニューを使う」を参照してください。