Messaging API / Flex Message 入門
初めに
この記事は LINE のメッセージ形態の一つ Flex Message について解説する記事です。
Flex Message は基本的に LINE 公式アカウント等の送信に使われます。
このようなメッセージを見たことが無いですか？ そうそれです。
実はあまり知られていませんが、 Flex Message の送信は LIFF (LINE Front-end Framework) を使えばオープンチャットや個人トーク、グループでも送信可能です。 (この場合コールバックアクション等は指定できないので幅は狭まりますが)
実は皆様の知らないうちにトークやグループ、オープンチャットで Flex Messageは使われています。
投票やノート共有、連絡先共有 全てflexです。
本文
LINE Messaging APIでの送信方法は こちら をご覧ください。
基本的な形は以下のようになっています。
{
"type": "flex",
"altText": "This is a Flex Message",
"contents": {
"type": "bubble",
"body": {
"type": "box",
"layout": "horizontal",
"contents": [
{
"type": "text",
"text": "Hello,"
},
{
"type": "text",
"text": "World!"
}
]
}
}
}
"type": "flex"の部分は これがFlex Messageであることを表しています。
"altText": "This is a Flex Message" の部分は察せる人も居ると思いますが、
返信した時やプッシュ通知の時に本体のメッセージとして扱われます。
プッシュ通知の時に altText の部分が通知されるイメージです。
そして "contents": ... ここが本題の Flex Messageを置く所です。
Flexメッセージのkeyとvalueから察した人も居るかもしれませんが、Flex MessageのFlexはFlexbox記法のFlexです。
しかし直書きするのは骨が折れます。
そこで LINE運営が便利な物を用意しています。
Flex Simulator を使えば
LINEアカウントさえ持っていれば簡単にpreviewしながらGUIで構築できます。
出来たものは右上の View as JSON から見れます。
これを contents の部分に入れれば OKです。 (環境によっては一部対応していないプロパティが有るので注意)
完成物
{
"type": "flex",
"altText": "Coffee shop",
"contents": {
"type": "bubble",
"hero": {
"type": "image",
"url": "https://scdn.line-apps.com/n/channel_devcenter/img/fx/01_1_cafe.png",
"size": "full",
"aspectRatio": "20:13",
"aspectMode": "cover",
"action": {
"type": "uri",
"uri": "http://linecorp.com/"
}
},
"body": {
"type": "box",
"layout": "vertical",
"contents": [
{
"type": "text",
"text": "Brown Cafe",
"weight": "bold",
"size": "xl"
},
{
"type": "box",
"layout": "baseline",
"margin": "md",
"contents": [
{
"type": "icon",
"size": "sm",
"url": "https://scdn.line-apps.com/n/channel_devcenter/img/fx/review_gold_star_28.png"
},
{
"type": "icon",
"size": "sm",
"url": "https://scdn.line-apps.com/n/channel_devcenter/img/fx/review_gold_star_28.png"
},
{
"type": "icon",
"size": "sm",
"url": "https://scdn.line-apps.com/n/channel_devcenter/img/fx/review_gold_star_28.png"
},
{
"type": "icon",
"size": "sm",
"url": "https://scdn.line-apps.com/n/channel_devcenter/img/fx/review_gold_star_28.png"
},
{
"type": "icon",
"size": "sm",
"url": "https://scdn.line-apps.com/n/channel_devcenter/img/fx/review_gray_star_28.png"
},
{
"type": "text",
"text": "4.0",
"size": "sm",
"color": "#999999",
"margin": "md",
"flex": 0
}
]
},
{
"type": "box",
"layout": "vertical",
"margin": "lg",
"spacing": "sm",
"contents": [
{
"type": "box",
"layout": "baseline",
"spacing": "sm",
"contents": [
{
"type": "text",
"text": "Place",
"color": "#aaaaaa",
"size": "sm",
"flex": 1
},
{
"type": "text",
"text": "Miraina Tower, 4-1-6 Shinjuku, Tokyo",
"wrap": true,
"color": "#666666",
"size": "sm",
"flex": 5
}
]
},
{
"type": "box",
"layout": "baseline",
"spacing": "sm",
"contents": [
{
"type": "text",
"text": "Time",
"color": "#aaaaaa",
"size": "sm",
"flex": 1
},
{
"type": "text",
"text": "10:00 - 23:00",
"wrap": true,
"color": "#666666",
"size": "sm",
"flex": 5
}
]
}
]
}
]
},
"footer": {
"type": "box",
"layout": "vertical",
"spacing": "sm",
"contents": [
{
"type": "button",
"style": "link",
"height": "sm",
"action": {
"type": "uri",
"label": "CALL",
"uri": "https://linecorp.com"
}
},
{
"type": "button",
"style": "link",
"height": "sm",
"action": {
"type": "uri",
"label": "WEBSITE",
"uri": "https://linecorp.com"
}
},
{
"type": "box",
"layout": "vertical",
"contents": [],
"margin": "sm"
}
],
"flex": 0
}
}
}
Flex Messageの種類
Flex Message には Bubble と Carousel が有ります。
Bubble はメッセージの大枠一つの単位です。
これで一つです。 先ほど作ったものがそうです。
Carousel は Bubbleを横並びに最大12枚使えるようにしたものです。
このように複数のメッセージを横に最大12枚連結できます。
基本的に一枚一枚の仕様は Bubbleと同じです。
汎用プロパティ解説
CSSが出来る人は間隔で分かると思いますが、"margin" 等のプロパティの意味を解説します。
margin は要素の周りの余白です。
xs, sm, md, lg, xl, xxl ...
等が有ると思いますが、左から順に値は大きくなっていきます。
Box には horizontal, vertical, baseline の三つが有ります。
それぞれ、水平、垂直、水平揃えです。
水平 は横方向に要素が配置され、
垂直 は縦方向に要素が配置されます。
水平揃え は水平とほとんど変わりませんが、要素が一番下の部分に沿って配置されます。
size はテキストの大きさです。
size: smの時
size: xl の時
lineSpacing 行と行の感覚です。 pxで指定できます。
color は色です。 RGB記法で書けます。 RGBAでも書けるので透明度も指定できます。
weight は文字の太さです。
style は斜形か普通かを選べます。
斜形はitalicとも呼ばれます。
decoration はアンダーラインや取り消し線を指定できます。
position は相対配置か絶対配置かを選べます。
詳しく知りたい人は CSS relative absolute と調べれば分かると思います。
align はテキスト、要素の場所を横方向で指定出来ます。
centerなら真ん中、 startなら左、endなら右です。
gravity は alignの縦版です。
wrap はテキストが要素の幅を超えたときに折り返すかを決めます。
scaling は テキストのサイズ等を自動調整してくれます。
offset ~ は自分の位置から ~ にどれだけ動くかを決めれます。
特別な要素
リンクを埋め込む方法
button と書いてあるところが有ります。
そこから追加可能です。 (text等でも下のActionプロパティから変更可能)
追加したらプロパティの一番下の項目からリンクやテキストを弄れます。
type は uriで大丈夫です。
labelが表示するテキスト、uriが埋め込むリンクです。
画像を埋め込む方法
image から追加可能です。
プロパティに urlと書いてあるので、そこから画像を変更可能です。 (ファイル保存サービス等や自社サイトにアップするのが良し)
動画を埋め込む方法
hero内限定ですが、boxと同じように追加可能です (権限が必要)
Discussion