こんにちは。LINEでテクニカルエバンジェリストとしてLINEのAPIを利用したデベロッパーのビジネスの成功をお手伝いさせていただいている立花です。
Flex Message Update 1が公開され、更に使いやすくなりましたので新機能をご紹介します。
Flex Messageとは
Flex Messageは、CSS Flexible Box（CSS Flexbox）の基礎知識を使って、レイアウトを自由にカスタマイズできるメッセージです。
対応クライアントバージョン
全てのバージョンに対応しておりますが、text要素のmaxLinesを利用する場合のみiOS版LINE、Android版LINEともに9.8.0以降、PC版では5.17以降が必要になります。
新機能
バブルサイズ
従来bubble要素の横幅は固定でしたが、sizeプロパティを指定することで可変となりました。giga、mega、kilo、micro、nanoの指定が可能です。
なお、カルーセル内のバブルの横幅は、
- 最大サイズ
- 画面横幅の80%
のうち小さい方が適用されます。(画面サイズの80％以上になることはありません)
ここがうれしい！
- Flex Messageを利用してテンプレートメッセージと同サイズの要素が作成できるようになった
- バブルサイズの調整のための動的画像生成の必要がなくなった
- 一画面に表示できるバブルの数を増やせるようになった
Boxのパディング
従来box要素内の要素に適用されるパディングは固定でしたが、paddingAll等のプロパティを指定することで可変となりました。
値は以下の形で指定可能です。
| 単位 | 値 | 備考 |
|---|---|---|
| ％ | 0以上かつjsonフォーマット上有効な値 | 親要素のサイズを100として計算 |
| ピクセル | 0以上かつjsonフォーマット上有効な値 | |
| キーワード | none, xs, sm, md, lg, xl, xxl |
なお、パディング非設定時は、親要素に設定された値が適用されます。
ここがうれしい！
- 余白無しで、バブルいっぱいに画像を配置できるようになった
- レイアウトの自由度が増した
Boxのスタイル
box要素に設定可能なスタイルが追加されました。
| プロパティ | 値 | デフォルト値 | 説明 |
|---|---|---|---|
backgroundColor |
16進表記カラーコードで指定(#RRGGBB、#RRGGBBAA等) | transparent | |
borderColor |
16進表記カラーコードで指定(#RRGGBB、#RRGGBBAA等) | ||
borderWidth |
任意の値 | none | pxもしくはキーワード |
cornerRadius |
任意の値 | none | pxもしくはキーワード |
width |
任意の値 | %もしくはpx | |
height |
任意の値 | %もしくはpx |
なおcornerRadiusを指定した場合、子要素も同時に切り抜かれて表示されます。
また、アクションの設定も可能になっております。
ここがうれしい！
- 装飾の自由度が増した
box要素タップ時のアクションが設定可能になった
ポジションとオフセット
box要素のposition、offsetTop等のプロパティを利用して、CSSのabsoluteのようなレイアウトが可能になりました。
offset値は以下の形で指定可能です。
| 単位 | 値 | 備考 |
|---|---|---|
| ％ | jsonフォーマット上有効な値(負の整数も可) | 親要素のサイズを100として計算 |
| ピクセル | jsonフォーマット上有効な値(負の整数も可) | |
| キーワード | none, xs, sm, md, lg, xl, xxl |
ここがうれしい！
- パディング、スタイルと合わせることでFlex Messageを利用して画像カルーセルテンプレートが開発可能になった
バブルのアクション
bubble要素にactionプロパティが追加され、bubble要素全体に対してアクションを定義することが可能になりました。
子要素にもアクションが定義されている場合、子要素が優先されます。
ここがうれしい！
- UXが改良された
Hero要素へのBox要素配置
hero要素へはimage要素のみしか配置できませんでしたが、box要素の配置が可能になりました。
文字のデザイン
文字に適用可能なスタイルが追加されるとともに、長い文字の一部のみにスタイルを適用することが可能になりました。
| プロパティ | 値 |
|---|---|
style |
normalもしくはitalic |
decoration |
noneもしくはunderlineもしくはline-through |
contents |
配列で指定 |
styleとdecorationについてはCSSと同様ですので割愛します。
contentsは文字の一部のみにスタイルを適用するためのプロパティで、span要素をtext要素以下に配列の形で追加して利用します。これによりtext要素を利用した文字全体への装飾の適用のみならず、部分的なデザインの変更が可能になっています。
従来のtext要素
{
"type": "text",
"text": "Hello World",
"style": "italic",
"decoration": "underline"
}contentsプロパティを利用した装飾テキスト
{
"type": "text",
"contents": [
{
"type": "span",
"text": "Hello ",
"weight": "bold",
"color": "#000000",
"style": "italic"
},
{
"type": "span",
"text": "World",
"size": "xl",
"color": "#ff0000",
"decoration": "underline"
},
]
}ここがうれしい！
- 装飾の自由度が増した
フィラー要素のflexプロパティ
filler要素にflexプロパティが追加され、自由度が増しました。
ここがうれしい！
- レイアウトの自由度が増した
Simulator
Flex Message Update 1に対応したFlex Message Simulator Update 1（β版）も使用できます。Showcaseも参考になるかと思います。
ただしβ版のため正しく動作しない場合がありますのでご注意下さい。
まとめ
Messaging APIを利用してユーザーにとって使いやすいサービスを実装しようと思うとほぼ必須の機能であるFlex Message。アップデートでより洗練されたレイアウトのメッセージを構築できるようになりました。是非使ってみて下さい。