日本語

# ニュース： #Flex Message の記事

2022/03/11

【更新】Flex Message Update 3をリリースしました

2022年3月15日追記

Flex Message SimulatorがFlex Message Update 3に対応しました。

Messaging APIのFlex Message Update 3をリリースしました。

Flex Message Update 3では、以下の機能追加を行いました。

# ヒーローのブロックに動画を表示できるようになりました

Flex Messageに動画コンポーネントが追加されました。動画コンポーネントを使うと、ヒーローのブロックに動画を表示できます。

動画コンポーネントの例

詳しくは、『Messaging APIドキュメント』の「動画を含むFlex Messageを作成する」を参照してください。

# ボックスコンポーネントの最大幅と最大高を指定できるようになりました

ボックスコンポーネントにmaxWidthプロパティとmaxHeightプロパティが追加されました。これらのプロパティを使うと、ボックスコンポーネントの最大幅や最大高を指定することができます。

詳しくは、『Messaging APIドキュメント』の「ボックスの最大幅」および「ボックスの最大高」を参照してください。

# テキストコンポーネント内の行間を広げられるようになりました

テキストコンポーネントにlineSpacingプロパティが追加されました。lineSpacingプロパティを使うと、テキストコンポーネント内の行間を広げることができます。

lineSpacing未指定 lineSpacing20px
lineSpacingプロパティ未指定の例 lineSpacingプロパティ20pxの例

詳しくは、『Messaging APIドキュメント』の「テキスト内の行間を広げる」を参照してください。

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

Flex Message Simulatorが、Flex Message Update 3に対応しました。

Flex Message Simulatorを使うと、簡単にFlex MessageのJSONデータを作ってレイアウトを確認できます。テストメッセージを送って、手元のLINEで実際の見た目を確認することもできます。

制限事項

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

Messaging API Flex Message
2020/10/08

【更新】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のバージョン、端末の解像度、言語設定、フォントなどがあります。

Messaging API Flex Message
2020/06/09

Flex Message Simulatorに関するチュートリアルを公開しました

Flex Message Simulatorに関するチュートリアルを公開しました。

このチュートリアルでは、Flex Message Simulatorの使い方を実践的にご紹介しています。また、チュートリアルを最後まで進めると、Flex Messageを使用した次の画像のようなデジタル名刺が完成します。

アウトプット

ぜひこの機会に、Flex Message Simulatorの使い方を学び、独自のFlex Messageを作ってみてください。

Messaging API Flex Message
2019/08/30

Flex Message Simulator Update 1（β）がリリースされました

Flex Message Simulator Update 1（β）がリリースされました。Flex Message Update 1で追加された新しいプロパティに対応し、より洗練されたレイアウトのサンプルメッセージも利用できます。

制限事項

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

Flex Message Simulator Update 1 (β)

Flex Message Update 1 examples

Messaging API Flex Message
2019/08/28

Flex Message Update 1がリリースされました

Flex Messageに新しいプロパティが追加されました。その結果、Flex Messageでは、HTMLおよびCSSによるレイアウトに近い考えかたで、より洗練されたレイアウトのメッセージを構築できるようになりました。詳しくは、「Flex Messageを送信する」を参照してください。

Flex Messageのサンプル

Messaging API Flex Message
2018/08/06

Flex Messageをデスクトップで表示できるようになりました

Flex Messageをデスクトップで表示できるようになりました。

対応するmacOS版とWindows版LINEのバージョンは5.9.0以降です。

また、Flex Messageに以下の新しいプロパティが追加され、メッセージをさらに自由に作成できるようになりました。

詳しくは、以下のページを参照してください。

Messaging API Flex Message
2018/06/12

Flex Messageがリリースされました

Messaging APIの新しいメッセージタイプであるFlex Messageがリリースされました。Flex Messageは、複数の要素を組み合わせてレイアウトを自由にカスタマイズできるメッセージです。

Flex Messageのサンプル

Flex MessageはiOS版とAndroid版のLINE 6.7.0以降で対応しています。

詳しくは、「Flex Messageを送信する」を参照してください。

Messaging API Flex Message

Newsタグ

Android Bot Designer CLOVA CLOVA Extensions Kit LINE Developersコンソール 非推奨 ドキュメント サポート終了 Flex Message Flex Message Simulator Flutter Group イメージマップメッセージ iOS ライフサイクル LIFF LINE広告 LINE API Expert LINE Blockchain Platform LINEログイン LINEミニアプリ LINEプラットフォーム LINE SDK LINE Things LINE TV メンテナンス Messaging API 法人ユーザー向けオプション 障害報告 リッチメニュー Social API LINE Social Plugins SSL/TLS テンプレートメッセージ Unity

LINE Developers公式アカウント

LINEプラットフォームの最新情報をお知らせします
LINE Developers QR Code