イメージマップとは
画像に1つ以上のリンク・テキスト送信のアクションを設定出来る送信方法
画面全体で一つのアクションを指定したり、場所で区切ってアクションを指定する事も可能
用意する事
画像を複数サイズ用意する必要があり、それぞれエンドポイントを用意する必要がある
これが面倒
単純に、それぞれのサイズの画像を用意して、ファイル名を指定されているサイズに合わせて変更すれば良いだけ
また、画像はjpg
かpng
に限られる
ので、例えば、https://baseurl/
に1040
,700
,460
,300
,240
のサイズと名前で画像を設置すれば良いだけ
実装
公式のSDKを利用
line/line-bot-sdk-python: SDK of the LINE Messaging API for Python.
https://github.com/line/line-bot-sdk-python
/examples/flask-kitchensink/
に imagemap
の例は実装されていないものの、
/linebot/imagemap.py
に実装されている為、読み込んでSDKの記載にある通りに
コード
(kitchensinkを元にしている想定)
from linebot.models
+ MessageImagemapAction,ImagemapArea,ImagemapSendMessage,BaseSize,URIImagemapAction, MessageImagemapAction
imagemap_message = ImagemapSendMessage(
base_url='https:/example.co/imagemap/',
alt_text='this is an imagemap',
base_size=BaseSize(height=1040, width=1040),
actions=[
URIImagemapAction(
link_uri='https://www.walker-industries.co.jp/',
area=ImagemapArea(
x=0, y=0, width=520, height=1040
)
),
MessageImagemapAction(
text='hello',
area=ImagemapArea(
x=520, y=0, width=520, height=1040
)
)
]
)
line_bot_api.push_message(event.source.user_id, imagemap_message)