# ニュース: 【更新】Flex Message Update 2がリリースされました

【更新】Flex Message Update 2がリリースされました

2020年12月10日追記

2020年10月22日より一時的に利用不可としておりましたFlex Messageのアニメーション画像再生機能が、再びご利用いただけるようになりました。お客様には多大なご迷惑をお掛けし、誠に申し訳ございませんでした。

Messaging APIのFlex Message Update 2がリリースされました。

Flex Message Update 2では、以下の改善が行われました。

# カルーセルで持てるバブルの上限数が変更されました

カルーセルコンテナで子要素として持てるバブルの上限数が変わりました。変更前と変更後の差異については、以下の表を参照してください。

# コンポーネントの配置指定方法が増えました

Flex Messageのボックスコンポーネントでは、justifyContentプロパティとalignItemsプロパティが追加されました。 これらのプロパティで子要素と余白の配置方法を指定することで、子要素を等間隔に並べたり、中央に揃えたりできます。

flex-start flex-center flex-end space-between space-around space-evenly

詳しくは、『Messaging APIドキュメント』の「ボックスの子要素と余白の配置」を参照してください。

# ボックスの背景をグラデーションにできるようになりました

ボックスコンポーネントのbackground.typeプロパティにlinearGradientを指定すると、ボックスの背景を線形グラデーションにできます。

0degの線形グラデーション 45degの線形グラデーション 90degの線形グラデーション

詳しくは、『Messaging APIドキュメント』の「線形グラデーション背景」を参照してください。

# ボックスのcontentsプロパティで空配列が指定できるようになりました

ボックスコンポーネントのcontentsプロパティで、空配列が指定できるようになりました。

  • ボックスコンポーネント

    項目 変更前 変更後
    contentsプロパティ 空配列を指定できない 空配列を指定できる
    空配列が指定できるとどんな場面で便利になる?

    次の4つの四角のように、ボックスコンポーネントを装飾的に使う場合、今まではそれぞれのボックスに子要素としてフィラーコンポーネントなどを入れておく必要がありましたが、Flex Message Update 2からは空配列を指定するだけで済むようになりました。

    offsetプロパティの例1

    一番左にある黄色いボックスコンポーネントのJSONデータを、変更前と変更後で比較してみましょう。

    • 変更前
    {
        "type": "box",
        "layout": "vertical",
        "contents": [
            {
            "type": "filler"
            }
        ],
        "width": "30px",
        "height": "30px",
        "backgroundColor": "#FFFF7F"
    }
    
    • 変更後
    {
        "type": "box",
        "layout": "vertical",
        "contents": [],
        "width": "30px",
        "height": "30px",
        "backgroundColor": "#FFFF7F"
    }
    

# アニメーション画像を指定できるようになりました

2020年12月10日追記

2020年10月22日より一時的に利用不可としておりましたFlex Messageのアニメーション画像再生機能が、再びご利用いただけるようになりました。お客様には多大なご迷惑をお掛けし、誠に申し訳ございませんでした。

Flex Messageの画像コンポーネントで、アニメーション画像(APNG)を指定できるようになりました。

詳しくは、『Messaging APIリファレンス』の「画像」コンポーネントを参照してください。

# サイズの指定方法が変更されました

コンポーネントのサイズを指定する方法が変わりました。変更前と変更後の差異については、以下の表を参照してください。

# 横幅に合わせてテキストを自動縮小できるようになりました

テキストコンポーネント、ボタンコンポーネントにadjustModeプロパティが追加されました。 このadjustModeプロパティでshrink-to-fitを指定すると、テキストのフォントサイズがコンポーネントの幅に合わせて自動縮小されます。

フォントサイズの自動縮小

詳しくは、『Messaging APIリファレンス』の「テキスト」コンポーネントと「ボタン」コンポーネントを参照してください。

# スペーサーが廃止されました

以前より非推奨としておりました、スペーサーコンポーネントが廃止されました。 今後はスペーサーを使わずに、ボックスのパディングを指定してください。

詳しくは、『Messaging APIドキュメント』の「ボックスのパディング」を参照してください。

# Flex Message SimulatorがUpdate 2に対応しました

Flex Message Simulatorも、Flex Message Update 2で追加された新しいプロパティやオブジェクトに対応しました。

Flex Message Simulatorを使うと、簡単にFlex MessageのJSONデータを作成したり、レイアウトを確認したりできます。

制限事項

Flex Message Simulatorは、Flex Messageのレイアウトを保証するものではありません。受信端末の環境によって、同じFlex Messageでも描画結果が異なる可能性があります。描画に影響を与える要素には、OS、LINEのバージョン、端末の解像度、言語設定、フォントなどがあります。