【LINE Bot開発】リッチメニューを作る
komaki/こまきちリッチメニューとは？
これ
komaki/こまきちこれ1枚の画像なことに驚き
リッチメニュー画像：メニューの項目を含む1枚の画像（JPEGまたはPNG）ファイルです。画像の要件について詳しくは、『Messaging APIリファレンス』の「リッチメニューの画像の要件」を参照してください。
komaki/こまきちFigmaで画像を作っていく
リッチメニューの画像の要件
リッチメニューの画像は以下の要件を満たす必要があります。画像フォーマット：JPEGまたはPNG
画像の幅サイズ：800ピクセル以上、2500ピクセル以下
画像の高さサイズ：250ピクセル以上
画像のアスペクト比（幅÷高さ）：1.45以上
最大ファイルサイズ：1MB
komaki/こまきち今回はボタン3つくらいあれば足りる
komaki/こまきち幅800px、高さ250pxはこんな感じ
komaki/こまきちcurlでAPIを叩いてリッチメニューを設定する
komaki/こまきちリクエストボディの内容
komaki/こまきちこれめんどくさいな
areas
タップ領域の座標とサイズを定義する、領域オブジェクトの配列。
最大領域オブジェクト数：20
komaki/こまきちリッチメニューデザイン
Request Body
{
"size": {
"width": 800,
"height": 250
},
"selected": true,
"name": "menu",
"chatBarText": "メニュー表示",
"areas": [
{
"bounds": {
"x": 10,
"y": 10,
"width": 253,
"height": 253
},
"action": {
"type": "",
"data": ""
}
},
{
"bounds": {
"x": 273,
"y": 10,
"width": 253,
"height": 232
},
"action": {
"type": "",
"data": ""
}
},
{
"bounds": {
"x": 536,
"y": 10,
"width": 253,
"height": 253
},
"action": {
"type": "",
"data": ""
}
}
]
}
画像アップロード
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
komaki/こまきち設定
curl -v -X POST https://api.line.me/v2/bot/user/all/richmenu/{richMenuId}
-H "Authorization: Bearer {channel access token}"
komaki/こまきち設定完了
