Flex Messageを送信する

# Flex Messageを送信する

Flex Messageは、通常のLINEメッセージに比べ、より豊かでインタラクティブなレイアウトが可能なメッセージです。通常のLINEメッセージでは、テキスト、画像、動画など1種類のソースしか配信されません。しかし、Flex Messageでは、CSS Flexible Box（CSS Flexbox） (opens new window)の仕様に基づいて、レイアウトを自由にカスタマイズできます。

Flex Messageの構成要素は、コンテナ、ブロック、コンポーネントです。各Flex Messageは、メッセージバブルを含むコンテナという単一の最上位構造を持ちます。コンテナには複数のメッセージバブルを含めることができます。バブルはブロックで構成され、ブロックはコンポーネントで構成されています。

Flex Messageでは、テキストの書字方向を左から右（左横書き）、または右から左（右横書き）に指定できます。

Flex Messageの制限事項

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

Flex Messageのサンプル

他のメッセージタイプと同様に、Flex MessageはJSON形式で記述します。Flex Messageについて詳しくは、以下のページを参照してください。

# 動作環境

Flex Messageは、すべてのバージョンのLINEでサポートされます。なお、以下の機能は、LINEの特定のバージョンのみサポートしています。

機能	iOS版LINE Android版LINE	PC版LINE （macOS版、Windows版）
ボックスの`maxWidth`プロパティボックスの`maxHeight`プロパティテキストの`lineSpacing`プロパティ動画 ※1	11.22.0以上	7.7.0以上
バブルの`size`プロパティの`deca`と`hecto` ※2 ボタン、テキスト、およびアイコンの`scaling`プロパティ	13.6.0以上	7.17.0以上

※1 動画をサポートしていないLINEのバージョンにおいてもコンテンツを適切に表示するには、altContentプロパティを指定します。このプロパティで指定した画像が動画の代わりに表示されます。

※2 LINEのバージョンがdecaとhectoをサポートするバージョンに満たない場合、バブルのサイズはkiloとして表示されます。

# Flex Message Simulator

Flex Message Simulatorを使うと、メッセージを実際に送信しなくても、描画された状態を確認できます。

Flex Message Simulator

Flex Message Simulatorについて詳しくは、チュートリアルを参照してください。

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

Flex Messageを始めるにあたり、「Hello, World！」をFlex Messageとして送信してみましょう。まず、Flex MessageをJSONで定義し、Messaging APIを呼び出してメッセージを送信します。

Hello, World!

# JSONでFlex Messageを定義する

Messaging APIを呼び出してFlex Messageを送信する前に、Flex MessageをJSONで定義します。以下は、JSONでFlex Messageを定義する方法で、"Hello, World!"というメッセージを作ります。このFlex Messageにはメッセージバブルが1つあればよいので、バブルコンテナを使用します。

{
  "type": "bubble", // 1
  "body": {
    // 2
    "type": "box", // 3
    "layout": "horizontal", // 4
    "contents": [
      // 5
      {
        "type": "text", // 6
        "text": "Hello,"
      },
      {
        "type": "text", // 6
        "text": "World!"
      }
    ]
  }
}

1～6の説明は以下のとおりです。

dummy	dummy
1	単体のメッセージバブルのコンテナを作成します。このように、コンテナの種類を`"bubble"`にします。
2	バブルの内容を保持するバブルを指定します。メッセージの表示に必要なブロックは、ボディ1点です。
3	ボディに、ボックスを設定します。
4	ボディの方向を水平に設定します。ボックス内の子コンポーネントが水平に配置されます。
5	ボックス内に配置するコンポーネントを指定します。
6	「Hello,」と「World!」の2つのテキストを挿入します。

# Messaging APIで送信する

Flex Messsageは、「メッセージを送信する」のいずれの方法でも送信できます。メッセージリクエストのリクエストボディで、message.contentsプロパティにFlex Messageオブジェクトの定義を設定します。

以下は、プッシュメッセージを送信するリクエストの例です。

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!"
            }
          ]
        }
      }
    }
  ]
}'

動作環境