はじめに
こんにちは！
この記事はミロゴス Advent Calendar 2023 20日目の投稿です。
LINE Messaging APIでは、様々な形式のメッセージを送信することができます。
本記事では、見た目がイメージマップ風のメッセージをFlex Message形式で送信できるか試してみました。
かなりニッチな内容ですが、少しでも多くの方のお役に立てれば幸いです。
やりたいこと
Flex Message形式でイメージマップ風のメッセージを配信できるか試してみたいと思います。
前提
- イメージマップメッセージ・Flex Messageの各仕様については、以下のLINE Developersのドキュメントに記載があります。
- 1:1の正方形の画像を指定した場合のイメージマップメッセージの見た目は以下です。
検証結果
結論
Flex Messgeでgigaサイズを指定すると、イメージマップとほぼ同様の見た目・サイズ感で配信できました。
※メッセージJson
{
"type": "bubble",
"size": "giga",
"body": {
"type": "box",
"layout": "vertical",
"contents": [
{
"type": "image",
"url": "https://bcsr-media.mlgs.app/media/1/13fb35a5-986e-41d4-9bfb-856bc6af9ab3/original/image.jpeg",
"size": "full",
"aspectMode": "cover",
"aspectRatio": "1:1",
"gravity": "center",
"action": {
"type": "uri",
"label": "action",
"uri": "https://www.milogos.co.jp/"
}
}
],
"paddingAll": "0px"
}
}
Flex Messageの各サイズの見た目
参考までに、Flex Messageのサイズを変えて同じメッセージを送信してみました。
サイズは画面キャプチャ上からgiga mega kilo hecto deca micro nanoです（参考：サイズについて）。
※画像は1024px × 1024pxのものを利用（= Flex Messageの最大画像サイズ）。
上述の通り、gigaサイズだとメッセージの横幅がトーク画面いっぱいに広がるため、イメージマップの見た目と近しい形になりました。
補足
Flex Message形式で送信する際はpngの透過画像を指定しても透過されないので注意が必要です（イメージマップ形式では透過画像が使えます）。
また、Flex Message形式ではイメージマップのように1画像内に複数のリンクを設置できないのでその点も要注意です。
逆に、イメージマップ形式ではURL遷移やテキスト発話のアクションの設定が必須ですが、Flex Message形式はアクション設定なしでも配信もできます。
さいごに
いかがだったでしょうか？
だいぶニッチな内容でしたが、Flex Messageでもイメージマップメッセージと同じような見た目で送信することができました。
Flex Messageは柔軟にデザインを組むことができるので、やはり噛みごたえがあるメッセージ形式だな〜と個人的には思います。
他にもFlexMessageでこんな面白いメッセージを送信できる！という耳よりな情報がありましたら、ぜひコメント欄でシェアいただけますと幸いです。
以上、ここまで読んでいただきありがとうございました！