日本語

# Flex Messageを送信する

Flex Messageは、レイアウトをカスタマイズできるメッセージです。CSS Flexible Box（CSS Flexbox） (opens new window)の基礎知識を使って、レイアウトを自由にカスタマイズできます。

FlexコンテナがFlex Messageのボックスに対応しています。また、FlexアイテムがFlex Messageのコンポーネントに対応しています。

Flex Messageのサンプル

# Flex Message Simulatorで動作を確認する

Flex Message Simulatorを使うと、メッセージを実際に送信しなくてもレイアウトを確認できます。

Flex Message Simulator

# 動作環境

Flex MessageをサポートするLINEのバージョンは以下のとおりです。

  • iOS版とAndroid版のLINE：すべてのバージョン
  • macOS版とWindows版のLINE：5.17.0以降

以下の機能は、LINEの特定のバージョンのみサポートしています。

機能 iOS版とAndroid版のLINE macOS版とWindows版のLINE
すべてのバージョン 6.2.0以上
11.22.0以上 7.7.0以上

※ LINEのバージョンが動画をサポートするバージョンに満たない場合、動画のaltContentプロパティに指定したコンポーネントが代替コンテンツとして表示されます。

詳しくは、『Messaging APIリファレンス』の「Flex Message」を参照してください。

# 特徴

  • CSS Flexible Box（CSS Flexbox） (opens new window)の基礎知識を使って、複雑なレイアウトのメッセージを構築できます。
  • 単体のメッセージバブルだけでなく、複数のメッセージバブルをカルーセル形式で表示できます。カルーセル形式のメッセージバブルは、横にスクロールして閲覧できます。
  • 書字方向を左横書きまたは右横書きに指定できます。

# Flex Messageの記述形式

他のメッセージタイプと同様に、Flex MessageはJSON形式で記述します。Flex Messageを使ったボットを開発するには、以下のページも参照してください。

制限事項

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

# 「Hello, World!」メッセージを送る

最初のステップとして、「Hello, World!」メッセージを作成してみましょう。

Hello, World!

# JSONデータを用意する

「Hello, World!」メッセージ用のJSONデータを用意します。

{
  "type": "bubble", // ①
  "body": { // ②
    "type": "box", // ③
    "layout": "horizontal", // ④
    "contents": [ // ⑤
      {
        "type": "text", // ⑥
        "text": "Hello,"
      },
      {
        "type": "text", // ⑥
        "text": "World!"
      }
    ]
  }
}

①～⑥の意味は以下のとおりです。

dummy dummy
① 単体のメッセージバブルを表すバブルを作成します。
② ①のバブルの内容を設定するボディを指定します。
①のバブルには、「Hello, World!」を描画するためのボディのみを含めます。
③ ボディには、ボックスのみを指定できます。
④ ボックスのlayoutプロパティにhorizontalを指定します。
ボックス内のコンポーネントは水平に配置されます。
⑤ ボックスのcontentsプロパティに、ボックスに含めるコンポーネントを配列で指定します。
⑥ 「Hello,」と「World!」の2つのテキストを挿入します。

# Messaging APIで送信する

Flex Messsageは、「メッセージを送信する」の方法で送信できます。Flex Messageオブジェクトのcontentsプロパティに、送信するJSONデータ（Flex Messageのコンテナ）を指定してください。

以下は、先に挙げたJSONデータをプッシュメッセージとして送信するcurlコマンドです。

curl -v -X POST https://api.line.me/v2/bot/message/push \
-H 'Content-Type: application/json' \
-H 'Authorization: Bearer {channel access token}' \
-d '{
  "to": "U4af4980629...",
  "messages": [
    {
      "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!"
            }
          ]
        }
      }
    }
  ]
}'