Flex MessageのUpdate 1が公開されました。

こんにちは。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プロパティを指定することで可変となりました。gigamegakilomicronanoの指定が可能です。

なお、カルーセル内のバブルの横幅は、

  • 最大サイズ
  • 画面横幅の80%

のうち小さい方が適用されます。(画面サイズの80%以上になることはありません)

ここがうれしい!

  • Flex Messageを利用してテンプレートメッセージと同サイズの要素が作成できるようになった
  • バブルサイズの調整のための動的画像生成の必要がなくなった
  • 一画面に表示できるバブルの数を増やせるようになった

Boxのパディング

従来box要素内の要素に適用されるパディングは固定でしたが、paddingAll等のプロパティを指定することで可変となりました。

値は以下の形で指定可能です。

単位備考
0以上かつjsonフォーマット上有効な値親要素のサイズを100として計算
ピクセル0以上かつjsonフォーマット上有効な値
キーワードnone, xs, sm, md, lg, xl, xxl

なお、パディング非設定時は、親要素に設定された値が適用されます。

ここがうれしい!

  • 余白無しで、バブルいっぱいに画像を配置できるようになった
  • レイアウトの自由度が増した

Boxのスタイル

box要素に設定可能なスタイルが追加されました。

プロパティデフォルト値説明
backgroundColor16進表記カラーコードで指定(#RRGGBB、#RRGGBBAA等)transparent
borderColor16進表記カラーコードで指定(#RRGGBB、#RRGGBBAA等)
borderWidth任意の値nonepxもしくはキーワード
cornerRadius任意の値nonepxもしくはキーワード
width任意の値%もしくはpx
height任意の値%もしくはpx

なおcornerRadiusを指定した場合、子要素も同時に切り抜かれて表示されます。

また、アクションの設定も可能になっております。

ここがうれしい!

  • 装飾の自由度が増した
  • box要素タップ時のアクションが設定可能になった

ポジションとオフセット

box要素のpositionoffsetTop等のプロパティを利用して、CSSのabsoluteのようなレイアウトが可能になりました。

offset値は以下の形で指定可能です。

単位備考
jsonフォーマット上有効な値(負の整数も可)親要素のサイズを100として計算
ピクセルjsonフォーマット上有効な値(負の整数も可)
キーワードnone, xs, sm, md, lg, xl, xxl

ここがうれしい!

  • パディング、スタイルと合わせることでFlex Messageを利用して画像カルーセルテンプレートが開発可能になった

バブルのアクション

bubble要素にactionプロパティが追加され、bubble要素全体に対してアクションを定義することが可能になりました。

子要素にもアクションが定義されている場合、子要素が優先されます。

ここがうれしい!

  • UXが改良された

Hero要素へのBox要素配置

hero要素へはimage要素のみしか配置できませんでしたが、box要素の配置が可能になりました。

文字のデザイン

文字に適用可能なスタイルが追加されるとともに、長い文字の一部のみにスタイルを適用することが可能になりました。

プロパティ
stylenormalもしくはitalic
decorationnoneもしくはunderlineもしくはline-through
contents配列で指定

styledecorationについては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。アップデートでより洗練されたレイアウトのメッセージを構築できるようになりました。是非使ってみて下さい。

Flex Messageリファレンス

Related Post