/assets/images/4296662/original/b80b4f68-ec9e-4cdc-9859-c9bcb75aa27f?1574232535)
株式会社dotD's job postings
この記事はdotD公式noteの転載です。
執筆者は、Server-side Engineer 前田翔平さんです。
https://www.wantedly.com/companies/company_7005547/post_articles/372001
こんにちは。dotDでmeepaの開発を担当している前田です。
Meepa | 子どもの本当の好きに出会う 課外活動マッチング子どもの本当の好きに出会う 課外活動マッチング。meepaは親の思い込みや限られた情報にとらわれない、子どもの「本当の好きmeepa.io
今回は、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}"
}
リクエストボディの以下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`はリッチメニューエリアの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
- リクエストボディ
- 画像
- レスポンス
{}
パスパラメータには、①リッチメニューを作成する でレスポンスとして返ってきたrichMenuIdを指定します。
③LINE公式アカウントでリッチメニューが表示されるように設定する
- エンドポイント
- https://api.line.me/v2/bot/user/all/richmenu/{richMenuId}
- パスパラメータ
- richMenuId
- HTTPメソッド
- POST
- リクエストヘッダー
- Authorization
- Bearer {channel access token}
- レスポンス
{}
ここのパスパラメータにも、①リッチメニューを作成する でレスポンスとして返ってきたrichMenuIdを指定します。
まとめ
今回は、リッチメニューの作成・表示方法について解説しました。
私は、以前リッチメニューを作成するときに、`bounds`がわかりづらいと感じたため、`bounds`の指定方法にフォーカスして、リッチメニューの作成・表示方法の記事を書きたいと思っていました。
同じところでつまづいている方もきっといると思うので、この記事がリッチメニュー作成のご参考になれば大変嬉しく思います！
最後に、dotDでは、新しい事業を共に作っていくためのエンジニアのメンバーを募集しています！
少しでも興味を持ってくださった方はお気軽にご連絡ください！！
www.wantedly.com子どもが本当の好きと出会うためのプラットフォーム！立ち上げエンジニア募集！ by 株式会社dotD株式会社dotD
/assets/images/4296662/original/b80b4f68-ec9e-4cdc-9859-c9bcb75aa27f?1574232535)
Invitation from 株式会社dotD
If this story triggered your interest, have a chat with the team?
LINE Messaging APIでリッチメニューを作成・表示させる方法
/assets/images/4296662/original/b80b4f68-ec9e-4cdc-9859-c9bcb75aa27f?1574232535)
/assets/images/8864511/original/b80b4f68-ec9e-4cdc-9859-c9bcb75aa27f?1644990968)
