# Flex Messageの要素
Flex Messageは、コンテナ、ブロック(ヘッダー、ヒーロー、ボディ、フッター)、コンポーネントの3層のデータ構造から構成されます。ここでは、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",
"size": "mega",
"hero": {
"type": "video",
"url": "https://example.com/video.mp4",
"previewUrl": "https://example.com/video_preview.jpg",
"altContent": {
"type": "image",
"size": "full",
"aspectRatio": "20:13",
"aspectMode": "cover",
"url": "https://example.com/image.jpg"
},
"aspectRatio": "20:13"
}
}
動画について詳しくは、「動画を含むFlex Messageを作成する」と『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"
}
]
}
}
# テキストを折り返す
デフォルトでは、テキストの幅を超える部分は省略記号に置き換えられます。
上の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)を使って改行できます。
テキストの最後に改行文字(\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
}
]
}
}
# テキスト内の行間を広げる
折り返したテキストにlineSpacing
プロパティを指定すると、テキスト内の行間を広げることができます。
上の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,
"lineSpacing": "20px"
}
]
}
}
lineSpacing
プロパティは、テキスト内の行間にのみ適用されます。そのため、開始行の上部と最終行の下部には適用されません。
テキストについて詳しくは、『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リファレンス』の「フィラー」を参照してください。
# 関連ページ
- Flex Messageを送信する
- Flex Messageのレイアウト
- Flex Message(Messaging APIリファレンス)