Flex Messageを送信する

はじめに

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

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

Flex Messageのサンプル

Flex Message Simulatorで動作を確認する

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

Flex Message Simulator

Flex Message Update 1に対応したFlex Message Simulator Update 1(β)も使用できます。ただし、正しく動作しない場合があります。

動作環境

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

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

iOS版とAndroid版のLINEについては、以下のプロパティがサポートされるバージョンは9.8.0以降です。

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

特長

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

Flex Messageの記述形式

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

note 制限事項

受信端末の環境によって、同じ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!"
      }
    ]
  }
}

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

単体のメッセージバブルを表すバブルを作成します。
①のバブルの内容を設定するボディを指定します。
①のバブルには、「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!"
            }
          ]
        }
      }
    }
  ]
}'

関連ページ

{{ $t("form.question.helpful") }}

{{ $t("form.question.detail") }}

{{ $t("form.question.improve") }}

{{ $t("form.info.start") }}{{ $t("form.info.link") }}{{ $t("form.info.end") }}


{{ $t("form.result.success") }}
{{ $t("form.result.error") }}
{{ $t("form.result.errorLink") }}