[小ネタ] LINE Messaging APIからリッチメニュー画像サイズを変更する

こんにちは、中村です。現在進めているものでリッチメニューのサイズ変更に関する要望がありました。Messaging API経由であればサイズの変更が可能ということがわかったので確認してみようと思います。

はじめに

検証のためにチャネルを作成する必要があります。作成については、こちらをご覧ください。

LambdaではじめてのLINE Botを作る

リッチメニューの作成

まずは、リッチメニューを作成します。リッチメニューを表示させるためには、画像のアップロード・デフォルトのリッチメニュー設定もしくはユーザーとの紐付けを行う必要があります。また1つのボット上には1000件まで作成が可能です。

HTTPS リクエスト

POST https://api.line.me/v2/bot/richmenu

リクエストヘッダー

• Authorization
  • Bearer {channel access token}
• Content-Type
  • application/json

リクエストボディ

リッチメニューオブジェクトを指定する。

• size
  • 必須項目。sizeオブジェクト。リッチメニューの幅と高さ。2500×1686pxまたは2500×843px。
• selected
  • 必須項目。デフォルトでリッチメニューを表示するかどうか。True or False。
• name
  • 必須項目。リッチメニューの管理名前。最大文字数：300
• chatBarText
  • 必須項目。トークルームメニューに表示されるテキスト。最大文字数：14
• areas
  • 必須項目。タップ領域の座標とサイズを定義する領域オブジェクトの配列。最大領域オブジェクト数：20

レスポンス

ステータスコード200とリッチメニューIDを返す。

さて、実際に使ってみましょう。

今回は、curl で実行していきます。

 $ 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": 843},"selected": true,"name": "blog-sample","chatBarText": "BLOG SAMPLE","areas": [{"bounds": {"x": 0,"y": 0,"width": 2500,"height": 843},"action": {"type": "message","text": "It works."}}]}'

成功するとリッチメニューのIDが返されます。

{"richMenuId":"richmenu-xxxxxxxxxxxxxxxxxx"}

ちなみにこのリッチメニューは、タップするとIt works というメッセージが送信されます。次に、画像を紐づけていきます。

 $ curl -v -X POST https://api.line.me/v2/bot/richmenu/richmenu-62a245d00e3fb615cdab8efbb7fcbbee/content -H 'Authorization: Bearer { channel access token }' -H 'Content-Type: image/png' -T 2500x843.png

これでリッチメニュー作成は完了です。次にチャネルで表示させます。今回は検証用のためチャネル登録している全員のメニューとして反映させます。

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

それでは、テストしてみましょう。

うまく表示されているようです！ちなみに他にもAPIがありますのでそちらはまたどこかで紹介しようと思います。

まとめ

いかがでしたでしょうか。
マーケティングやブランディングの観点での変更・個人ごとでの変更等がよくあると思ったのでまとめてみました。個人的にはサイズを変更できるので、操作性にも大きく影響しそうだなと感じています。