Flex Messageを送信する

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

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

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

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

• Flex Messageの要素
• Flex Messageのレイアウト
• Flex Message（Messaging APIリファレンス）

動作環境

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

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

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

Flex Message Simulator

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

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

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

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

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の説明は以下のとおりです。

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

関連ページ

• Flex Messageの要素
• Flex Messageのレイアウト
• Flex Message（APIリファレンス）
• Flex Message Simulator