Closed5ヶ月前にクローズ12

【LINE Bot開発】リッチメニューを作る

リッチメニューとは？

これ

これ1枚の画像なことに驚き

リッチメニュー画像：メニューの項目を含む1枚の画像（JPEGまたはPNG）ファイルです。画像の要件について詳しくは、『Messaging APIリファレンス』の「リッチメニューの画像の要件」を参照してください。

Figmaで画像を作っていく

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

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

今回はボタン3つくらいあれば足りる

幅800px、高さ250pxはこんな感じ

curlでAPIを叩いてリッチメニューを設定する

リクエストボディの内容

これめんどくさいな

areas
タップ領域の座標とサイズを定義する、領域オブジェクトの配列。
最大領域オブジェクト数：20

リッチメニューデザイン

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

設定

curl -v -X POST https://api.line.me/v2/bot/user/all/richmenu/{richMenuId}
-H "Authorization: Bearer {channel access token}"

設定完了

このスクラップは5ヶ月前にクローズされました