要素
Flexible Template は、コンテナ、ブロック(ヘッダー、ヒーロー、ボディ、フッター)、コンポーネントの3層の多層データ構造で構成されています。ここでは、Flexible Template を構成する要素について例を挙げて説明します。
コンテナ
コンテナ (container)は、Flex Message の最上位の構造です。以下のタイプのコンテナを利用できます。
| タイプ | 説明 |
|---|---|
バブル (bubble) |
単体のメッセージバブルを表示するコンテナ |
カルーセル (carousel) |
複数のメッセージバブルを横に並べて表示するコンテナ |
バブル
バブル (bubble)は、1つのメッセージバブルを構成するコンテナです。
JSON スキーマについて詳しくは、『Flexible Template API』の「バブル」を参照してください。
カルーセル
カルーセル (carousel)は、1つ以上のバブルを要素に持つコンテナです。カルーセル内のバブルは、横にスクロールして閲覧できます。
JSON スキーマについて詳しくは、『Flexible Template API』の「カルーセル」を参照してください。
ブロック
ブロック (block)は、バブルを構成する構造です。以下のタイプのブロックを利用できます。
| タイプ | 説明 |
|---|---|
ヘッダー (header) |
メッセージの件名や見出しを表示するブロック |
ヒーロー (hero) |
画像などの主要なコンテンツを表示するブロック |
ボディ (body) |
主要なメッセージコンテンツを表示するブロック |
フッター (footer) |
ボタンや補足情報を表示するブロック |
ブロックのタイプは、ヘッダー、ヒーロー、ボディ、フッターの順番にバブルの上から表示されます。どのブロックもバブル内では1つだけ指定できます(省略可能)。
JSON スキーマについて詳しくは、『Flexible Template API』の「バブル」の header プロパティ, hero プロパティ, body プロパティ, footer プロパティを参照してください。
コンポーネント
コンポーネント (component)は、ブロックを構成する要素です。以下のタイプのコンポーネントを利用できます。
| タイプ | 説明 |
|---|---|
ボックス (box) |
コンポーネントのレイアウトを定義するコンポーネント |
ボタン (button) |
ボタンを表示するコンポーネント。 ユーザーがボタンをタップすると、指定したアクションが実行されます。 |
画像 (image) |
画像を表示するコンポーネント |
アイコン (icon) |
アイコンを表示するコンポーネント |
テキスト (text) |
1行の文字列を表示するコンポーネント。 文字の色、サイズ、太さを指定できます。 |
スパン (span) |
1行に、デザインが異なる複数の文字列を表示するコンポーネント。 文字の色、サイズ、太さを指定できます。 |
セパレータ (separator) |
分割線を表示するコンポーネント |
フィラー (filler) |
スペースを追加するコンポーネント |
スペーサー (spacer) |
ボックスの先頭や末尾に、一定のサイズのスペースを配置する見えないコンポーネント |
ボックス
ボックス (box)は、メッセージのレイアウトを定義するためのコンポーネントです。
他のコンポーネント(ボックス、ボタン、画像など)を含めることができます。ボックスに含まれたコンポーネント(子要素)は、ボックスのプロパティと子要素のプロパティに従ってレイアウトされます。レイアウトについて詳しくは、Flexible Template の「レイアウト」を参照してください。
JSON スキーマについて詳しくは、『Flexible Template API』の「ボックス」を参照してください。
ボタン
ボタン (button)は、ボタンを表示するコンポーネントです。
ユーザーがボタンをタップすると、アクションが実行されます。実行できるアクションについて詳しくは、トーク Bot の「Action Objects」を参照してください。
ボタンには3つのスタイルがあり、それぞれ色を変更できます。
JSON スキーマについて詳しくは、『Flexible Template API』の「ボタン」を参照してください。
画像
画像 (image)は、画像を表示するコンポーネントです。
JSON スキーマについて詳しくは、『Flexible Template API』の「画像」を参照してください。
アイコン
アイコン (icon)は、隣接したテキストを装飾するために、アイコンを表示するコンポーネントです。
ベースラインボックス内でのみ使用できます。
JSON スキーマについて詳しくは、『Flexible Template API』の「アイコン」を参照してください。
テキスト
テキスト (text)は、1行の文字列を表示するコンポーネントです。文字の色、サイズ、太さを指定できます。
テキストの折り返し
デフォルトでは、テキストの幅を超える部分は省略記号(...)に置き換えられます。
上の Flexible Template を表現するには以下のような JSON データを指定します。
{
"type": "bubble",
"body": {
"type": "box",
"layout": "horizontal",
"contents": [
{
"type": "text",
"text": "The work site begins to move; the work site is coming in sight; the work is going on. Expand business communications with us!"
}
]
}
}
wrapプロパティをtrueを指定すると、長いテキストは折り返して表示することができます。また、改行文字 (\n) を使って改行できます。
注意
- テキストの最後に改行文字 (\n) を入力した場合の表示結果は、環境によって異なる可能性があります。
上の Flexible Template を表現するには以下のような JSON データを指定します。
{
"type": "bubble",
"body": {
"type": "box",
"layout": "horizontal",
"contents": [
{
"type": "text",
"text": "The work site begins to move; the work site is coming in sight; the work is going on. Expand business communications with us!",
"wrap": true
}
]
}
}
JSON スキーマについて詳しくは、『Flexible Template API』の「テキスト」を参照してください。
スパン
スパン (span)は、1行に、デザインが異なる複数の文字列を表示するコンポーネントです。文字の色、サイズ、太さ、装飾を指定できます。スパンは、テキストのcontentsプロパティに設定します。
JSON スキーマについて詳しくは、『Flexible Template API』の「スパン」を参照してください。
セパレータ
セパレータ (separator)は、ボックス内に分割線を表示するコンポーネントです。水平ボックスに含めた場合は垂直線、垂直ボックスに含めた場合は水平線が表示されます。
JSON スキーマについて詳しくは、『Flexible Template API』の「セパレータ」を参照してください。
フィラー
フィラー (filler)は、スペースを作るためのコンポーネントです。ボックス内の任意の位置に挿入することで、コンポーネントの間にスペースを作ったり、他のコンポーネントを一方向に寄せたりできます。
以下の例では、フィラーを使って画像の間にスペースを作っています。
JSON スキーマについて詳しくは、『Flexible Template API』の「フィラー」を参照してください。
スペーサー (未推奨)
注意
- スペーサーは今後のリリースで削除される予定です。スペーサーを使用せずにコンポーネントの位置を調整することを推奨します。
スペーサー (spacer)は、ボックスの先頭や末尾に、一定のサイズのスペースを配置するコンポーネントです。ブロックの先頭または末尾にあるスペースを拡張するコンポーネントです。
以下の例では、スペーサーを使ってボディ(body)とフッター(footer)の間にあるスペースを拡張しています。
JSON スキーマについて詳しくは、『Flexible Template API』の「スペーサー (未推奨)」を参照してください。