Flex Messageの要素

Flex Messageは、コンテナブロック(ヘッダー、ヒーロー、ボディ、フッター)コンポーネントの3層のデータ構造から構成されます。ここでは、Flex Messageを構成する要素について例を挙げて説明します。

Flex Messageの構造

コンテナ

コンテナは、Flex Messageの最上位の構造です。以下のタイプのコンテナを利用できます。

タイプ 説明
バブル 単体のメッセージバブルを表示するコンテナ
カルーセル 複数のメッセージバブルを横に並べて表示するコンテナ

バブル

バブルは、1つのメッセージバブルを構成するコンテナです。

バブルの例

JSONスキーマについて詳しくは、『Messaging APIリファレンス』の「バブル」を参照してください。

カルーセルは、1つ以上のバブルを要素に持つコンテナです。カルーセル内のバブルは、横にスクロールして閲覧できます。

カルーセルの例

上のFlex Messageを表現するには以下のようなJSONデータを指定します。

{
  "type": "carousel",
  "contents": [
    {
      "type": "bubble",
      "body": {
        "type": "box",
        "layout": "horizontal",
        "contents": [
          {
            "type": "text",
            "text": "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.",
            "wrap": true
          }
        ]
      },
      "footer": {
        "type": "box",
        "layout": "horizontal",
        "contents": [
          {
            "type": "button",
            "style": "primary",
            "action": {
              "type": "uri",
              "label": "Go",
              "uri": "https://example.com"
            }
          }
        ]
      }
    },
    {
      "type": "bubble",
      "body": {
        "type": "box",
        "layout": "horizontal",
        "contents": [
          {
            "type": "text",
            "text": "Hello, World!",
            "wrap": true
          }
        ]
      },
      "footer": {
        "type": "box",
        "layout": "horizontal",
        "contents": [
          {
            "type": "button",
            "style": "primary",
            "action": {
              "type": "uri",
              "label": "Go",
              "uri": "https://example.com"
            }
          }
        ]
      }
    }
  ]
}

JSONスキーマについて詳しくは、『Messaging APIリファレンス』の「カルーセル」を参照してください。

ブロック

ブロックは、バブルを構成する構造です。以下のタイプのブロックを利用できます。

タイプ 説明
ヘッダー メッセージの件名や見出しを表示するブロック
ヒーロー 画像などの主要なコンテンツを表示するブロック
ボディ 主要なメッセージコンテンツを表示するブロック
フッター ボタンや補足情報を表示するブロック

ヘッダー、ヒーロー、ボディ、フッターは、この順番でバブルの上から表示されます。どのブロックもバブル内で1つだけ指定できます(省略可能)。

ブロックスタイルの例

上のFlex Messageを表現するには以下のようなJSONデータを指定します。

{
  "type": "bubble",
  "styles": {
    "header": {
      "backgroundColor": "#ffaaaa"
    },
    "body": {
      "backgroundColor": "#aaffaa"
    },
    "footer": {
      "backgroundColor": "#aaaaff"
    }
  },
  "header": {
    "type": "box",
    "layout": "vertical",
    "contents": [
      {
        "type": "text",
        "text": "header"
      }
    ]
  },
  "hero": {
    "type": "image",
    "url": "https://example.com/flex/images/image.jpg",
    "size": "full",
    "aspectRatio": "2:1"
  },
  "body": {
    "type": "box",
    "layout": "vertical",
    "contents": [
      {
        "type": "text",
        "text": "body"
      }
    ]
  },
  "footer": {
    "type": "box",
    "layout": "vertical",
    "contents": [
      {
        "type": "text",
        "text": "footer"
      }
    ]
  }
}

JSONスキーマについて詳しくは、『Messaging APIリファレンス』の「バブル」のheaderプロパティ、heroプロパティ、bodyプロパティ、footerプロパティを参照してください。

コンポーネント

コンポーネントは、ブロックを構成する要素です。以下のタイプのコンポーネントを利用できます。

タイプ 説明
ボックス コンポーネントのレイアウトを定義するコンポーネント
ボタン ボタンを表すコンポーネント。ユーザーがタップすると、指定したアクションが実行されます。
画像 画像を描画するコンポーネント
アイコン アイコンを描画するコンポーネント
テキスト 1行の文字列を描画するコンポーネント。色、サイズ、および太さを指定できます。
スパン 1行に、デザインが異なる複数の文字列を描画するコンポーネント。色、サイズ、太さ、および装飾を指定できます。
セパレータ 分割線を描画するコンポーネント
フィラー スペースを作るためのコンポーネント
スペーサー(非推奨) ボックス内の先頭または末尾に固定サイズのスペースを配置する不可視のコンポーネント

ボックス

メッセージのレイアウトを定義するためのコンポーネントです。

他のコンポーネント(ボックス、ボタン、画像など)を含めることができます。ボックスに含めたコンポーネント(子要素)は、ボックスのプロパティと、子要素のプロパティに従ってレイアウトされます。レイアウトについて詳しくは、「Flex Messageのレイアウト」を参照してください。

JSONスキーマについて詳しくは、『Messaging APIリファレンス』の「ボックス」を参照してください。

ボタン

ボタンを描画するコンポーネントです。

ユーザーがタップするとアクションが実行されます。指定できるアクションについては、「アクション」を参照してください。

ボタンには3つのスタイルがあり、それぞれ色を変更できます。

ボタンの例

上のFlex Messageを表現するには以下のようなJSONデータを指定します。

{
  "type": "bubble",
  "body": {
    "type": "box",
    "layout": "vertical",
    "spacing": "md",
    "contents": [
      {
        "type": "button",
        "style": "primary",
        "action": {
          "type": "uri",
          "label": "Primary style button",
          "uri": "https://example.com"
        }
      },
      {
        "type": "button",
        "style": "secondary",
        "action": {
          "type": "uri",
          "label": "Secondary style button",
          "uri": "https://example.com"
        }
      },
      {
        "type": "button",
        "style": "link",
        "action": {
          "type": "uri",
          "label": "Link style button",
          "uri": "https://example.com"
        }
      }
    ]
  }
}

JSONスキーマについて詳しくは、『Messaging APIリファレンス』の「ボタン」を参照してください。

画像

画像を描画するコンポーネントです。

画像の例

上のFlex Messageを表現するには以下のようなJSONデータを指定します。

{
  "type": "bubble",
  "body": {
    "type": "box",
    "layout": "horizontal",
    "contents": [
      {
        "type": "image",
        "url": "https://example.com/flex/images/image.jpg",
        "size": "md"
      }
    ]
  }
}

JSONスキーマについて詳しくは、『Messaging APIリファレンス』の「画像」を参照してください。

アイコン

隣接するテキストを装飾するために、アイコンを描画するコンポーネントです。

ベースラインボックス内でのみ使用できます。

アイコンの例

上のFlex Messageを表現するには以下のようなJSONデータを指定します。

{
  "type": "bubble",
  "body": {
    "type": "box",
    "layout": "vertical",
    "contents": [
      {
        "type": "box",
        "layout": "baseline",
        "contents": [
          {
            "type": "icon",
            "url": "https://example.com/flex/images/icon.png",
            "size": "md"
          },
          {
            "type": "text",
            "text": "The quick brown fox jumps over the lazy dog",
            "size": "md"
          }
        ]
      },
      {
        "type": "box",
        "layout": "baseline",
        "contents": [
          {
            "type": "icon",
            "url": "https://example.com/flex/images/icon.png",
            "size": "lg"
          },
          {
            "type": "text",
            "text": "The quick brown fox jumps over the lazy dog",
            "size": "lg"
          }
        ]
      },
      {
        "type": "box",
        "layout": "baseline",
        "contents": [
          {
            "type": "icon",
            "url": "https://example.com/flex/images/icon.png",
            "size": "xl"
          },
          {
            "type": "text",
            "text": "The quick brown fox jumps over the lazy dog",
            "size": "xl"
          }
        ]
      },
      {
        "type": "box",
        "layout": "baseline",
        "contents": [
          {
            "type": "icon",
            "url": "https://example.com/flex/images/icon.png",
            "size": "xxl"
          },
          {
            "type": "text",
            "text": "The quick brown fox jumps over the lazy dog",
            "size": "xxl"
          }
        ]
      },
      {
        "type": "box",
        "layout": "baseline",
        "contents": [
          {
            "type": "icon",
            "url": "https://example.com/flex/images/icon.png",
            "size": "3xl"
          },
          {
            "type": "text",
            "text": "The quick brown fox jumps over the lazy dog",
            "size": "3xl"
          }
        ]
      }
    ]
  }
}

JSONスキーマについて詳しくは、『Messaging APIリファレンス』の「アイコン」を参照してください。

テキスト

1行の文字列を描画するコンポーネントです。色、サイズ、および太さを指定できます。

テキストの例

上のFlex Messageを表現するには以下のようなJSONデータを指定します。

{
  "type": "bubble",
  "body": {
    "type": "box",
    "layout": "vertical",
    "contents": [
      {
        "type": "text",
        "text": "Closing the distance",
        "size": "md",
        "align": "center",
        "color": "#ff0000"
      },
      {
        "type": "text",
        "text": "Closing the distance",
        "size": "lg",
        "align": "center",
        "color": "#00ff00"
      },
      {
        "type": "text",
        "text": "Closing the distance",
        "size": "xl",
        "align": "center",
        "weight": "bold",
        "color": "#0000ff"
      }
    ]
  }
}

JSONスキーマについて詳しくは、『Messaging APIリファレンス』の「テキスト」を参照してください。

テキストを折り返す

デフォルトでは、テキストの幅を超える部分は省略記号に置き換えられます。

折り返しなしの例

上のFlex Messageを表現するには以下のようなJSONデータを指定します。

{
  "type": "bubble",
  "body": {
    "type": "box",
    "layout": "horizontal",
    "contents": [
      {
        "type": "text",
        "text": "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua."
      }
    ]
  }
}

wrapプロパティにtrueを指定すると、テキストの幅を超える部分は折り返して表示されます。また、改行文字(\n)を使って改行できます。

折り返しありの例

note 注意

テキストの最後に改行文字(\n)を入力した場合の描画結果は、環境によって異なる可能性があります。

上のFlex Messageを表現するには以下のようなJSONデータを指定します。

{
  "type": "bubble",
  "body": {
    "type": "box",
    "layout": "horizontal",
    "contents": [
      {
        "type": "text",
        "text": "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod\n tempor incididunt ut labore et dolore magna aliqua.",
        "wrap": true
      }
    ]
  }
}

JSONスキーマについて詳しくは、『Messaging APIリファレンス』の「テキスト」を参照してください。

スパン

1行に、デザインが異なる複数の文字列を描画するコンポーネントです。色、サイズ、太さ、および装飾を指定できます。スパンは、テキストcontentsプロパティに設定します。

スパンの例

上のFlex Messageを表現するには以下のようなJSONデータを指定します。

{
  "type": "bubble",
  "body": {
    "type": "box",
    "layout": "horizontal",
    "contents": [
      {
        "type": "text",
        "text": "hello, world",
        "contents": [
          {
            "type": "span",
            "text": "Hello, world!",
            "decoration": "line-through"
          },
          {
            "type": "span",
            "text": "\nClosing",
            "color": "#ff0000",
            "size": "sm",
            "weight": "bold",
            "decoration": "none"
          },
          {
            "type": "span",
            "text": " "
          },
          {
            "type": "span",
            "text": "the",
            "size": "lg",
            "color": "#00ff00",
            "decoration": "underline",
            "weight": "bold"
          },
          {
            "type": "span",
            "text": " "
          },
          {
            "type": "span",
            "text": "distance",
            "color": "#0000ff",
            "weight": "bold",
            "size": "xxl"
          }
        ],
        "wrap": true,
        "align": "center"
      }
    ]
  }
}

JSONスキーマについて詳しくは、『Messaging APIリファレンス』の「スパン」を参照してください。

セパレータ

ボックス内に分割線を描画するコンポーネントです。水平ボックスに含めた場合は垂直線、垂直ボックスに含めた場合は水平線が描画されます。

セパレータの例

上のFlex Messageを表現するには以下のようなJSONデータを指定します。

{
  "type": "bubble",
  "body": {
    "type": "box",
    "layout": "vertical",
    "spacing": "md",
    "contents": [
      {
        "type": "box",
        "layout": "horizontal",
        "spacing": "md",
        "contents": [
          {
            "type": "text",
            "text": "orange"
          },
          {
            "type": "separator"
          },
          {
            "type": "text",
            "text": "apple"
          }
        ]
      },
      {
        "type": "separator"
      },
      {
        "type": "box",
        "layout": "horizontal",
        "spacing": "md",
        "contents": [
          {
            "type": "text",
            "text": "grape"
          },
          {
            "type": "separator"
          },
          {
            "type": "text",
            "text": "lemon"
          }
        ]
      }
    ]
  }
}

セパレータについて詳しくは、『Messaging APIリファレンス』の「セパレータ」を参照してください。

フィラー

スペースを作るためのコンポーネントです。ボックス内の任意の位置に挿入することで、コンポーネントの間にスペースを作ったり、他のコンポーネントを一方向に寄せたりできます。

以下の例では、画像の間にスペースを作るためにフィラーを挿入しています。

フィラーの例

上のFlex Messageを表現するには以下のようなJSONデータを指定します。

{
  "type": "bubble",
  "body": {
    "type": "box",
    "layout": "horizontal",
    "contents": [
      {
        "type": "image",
        "url": "https://example.com/flex/images/image.jpg"
      },
      {
        "type": "filler"
      },
      {
        "type": "image",
        "url": "https://example.com/flex/images/image.jpg"
      }
    ]
  }
}

フィラーについて詳しくは、『Messaging APIリファレンス』の「フィラー」を参照してください。

スペーサー(非推奨)

note 注意

スペーサーは、将来のアップデートで削除される予定です。スペーサーを使わずに、コンポーネントの位置を調整してください。

ボックス内の先頭または末尾に固定サイズのスペースを配置する不可視のコンポーネントです。ブロックの前後のスペースを拡張するために使用します。

以下の例では、スペーサーを使ってボディとフッターの間のスペースを拡張しています。

スペーサーの例

上のFlex Messageを表現するには以下のようなJSONデータを指定します。

{
 "type": "bubble",
 "body": {
   "type": "box",
   "layout": "vertical",
   "contents": [
     {
       "type": "image",
       "url": "https://example.com/flex/images/image.jpg",
       "size": "full"
     }
   ]
 },
 "footer": {
   "type": "box",
   "layout": "vertical",
   "contents": [
     {
       "type": "spacer",
       "size": "xl"
     },
     {
       "type": "button",
       "action": {
         "type": "uri",
         "label": "Tap me",
         "uri": "https://example.com"
       },
       "style": "primary",
       "color": "#0000ff"
     }
   ]
 }
}

スペーサーについて詳しくは、『Messaging APIリファレンス』の「スペーサー(非推奨)」を参照してください。

関連ページ

{{ $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") }}