LINEのFlex Messageの構成要素をしらべてみた

LINEでは単純なテキスト以外にも、Flex Messageとして自由なレイアウトでメッセージを送信できます。この方法でメッセージを送信する際の構成要素についてまとめておきます。

公式ドキュメントはこちらです。

構成要素

Flex Messageは3層構造となっており、上から順にコンテナ、ブロック、コンポーネントです。

実際に送信する際は、JSONで定義します。

// TypeScriptでメッセージに返信する例
await client.replyMessage({
  replyToken: req.body.events[0].replyToken,
  messages: [
    {
      type: "flex",
      altText: "this is a flex message",
      contents: // ここにコンテナ以下の構成要素を指定
    },
  ],
});

コンテナ

最上位の構成要素で、メッセージが1つだけのバブルと複数のカルーセルがあります。
1回でメッセージを1つだけ送信するのか、複数送信したいのかでどちらかを選びます。

// バブル
{
    type: "bubble",
    body: {} // ブロックを指定
}

// カルーセル
{
    type: "carousel",
    contents: [] // 複数のバブルを指定
}

ブロック

1つのバブル（メッセージ）を構成する要素を指します。
header, hero, body, footerからなります。
バブル内のレイアウトを決めるため、必要なものだけを選んで使います。

出典：Flex Messageの要素

{
    type: "bubble",
    header: {
      type: "box",
      layout: "vertical",
      contents: [] // コンポーネントを指定
    },
    hero: {},
    body: {},
    footer: {},
}

コンポーネント

ブロックの構成要素です。
テキストや画像に加え、ボックス、ボタン、動画、アイコン、スパン、セパレータを使えます。
ユーザーに表示される要素となります。

{
    type: "bubble",
    header: {
      type: "box",
      layout: "vertical",
      contents: [
        {  // テキストを表示する例
          type: "text",
          text: "sample",
        },
      ],
    },
    hero: {},
    body: {},
    footer: {},
}

まとめ

Flex Messageはコンテナ、ブロック、コンポーネントの3層構造になっています。コンテナは最上位の構成で、1回で送信するメッセージが単数か複数かで選択します。ブロックは1つのメッセージ内のレイアウトを決めます。コンポーネントはテキストや画像などユーザーに表示される要素を指定します。