はじめに

こんにちは！

この記事はミロゴス Advent Calendar 2023 20日目の投稿です。

LINE Messaging APIでは、様々な形式のメッセージを送信することができます。
本記事では、見た目がイメージマップ風のメッセージをFlex Message形式で送信できるか試してみました。
かなりニッチな内容ですが、少しでも多くの方のお役に立てれば幸いです。

やりたいこと

Flex Message形式でイメージマップ風のメッセージを配信できるか試してみたいと思います。

前提

イメージマップメッセージ・Flex Messageの各仕様については、以下のLINE Developersのドキュメントに記載があります。
- イメージマップメッセージの仕様
- Flex Messgeの仕様
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でこんな面白いメッセージを送信できる！という耳よりな情報がありましたら、ぜひコメント欄でシェアいただけますと幸いです。

以上、ここまで読んでいただきありがとうございました！