要素

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

コンテナ {#container}

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

バブル {#container-bubble}

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

JSON スキーマについて詳しくは、バブル を参照してください。

カルーセル {#container-carousel}

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

JSON スキーマについて詳しくは、カルーセル を参照してください。

ブロック {#block}

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

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

JSON スキーマについて詳しくは、バブル の header プロパティ、hero プロパティ、body プロパティ、footer プロパティを参照してください。

コンポーネント {#component}

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

ボックス {#box}

ボックス (box) は、メッセージのレイアウトを定義するためのコンポーネントです。

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

JSON スキーマについて詳しくは、ボックス を参照してください。

ボタン {#button}

ボタン (button)は、ボタンを表示するコンポーネントです。

ユーザーがボタンをタップすると、アクションが実行されます。実行できるアクションについて詳しくは、トーク Bot の Action Objects を参照してください。

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

JSON スキーマについて詳しくは、ボタン を参照してください。

画像 {#image}

画像 (image)は、画像を表示するコンポーネントです。

JSON スキーマについて詳しくは、画像 を参照してください。

アイコン {#icon}

アイコン (icon)は、隣接したテキストを装飾するために、アイコンを表示するコンポーネントです。

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

JSON スキーマについて詳しくは、アイコン を参照してください。

テキスト {#text}

テキスト (text) は、1 行の文字列を表示するコンポーネントです。文字の色、サイズ、太さを指定できます。

テキストの折り返し {#text-wrap}

既定の動作では、テキストの幅を超える部分は省略記号 ("...") に置き換えられます。

上の 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!",      }    ]  }}

JSON スキーマについて詳しくは、テキスト を参照してください。

スパン {#span}

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

JSON スキーマについて詳しくは、スパン を参照してください。

セパレータ {#separator}

セパレータ (separator)は、ボックス内に分割線を表示するコンポーネントです。水平ボックスに含めると垂直線、垂直ボックスに含めると水平線が表示されます。

JSON スキーマについて詳しくは、セパレータ を参照してください。

フィラー {#filler}

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

以下の例では、フィラーを使って画像の間にスペースを作っています。

JSON スキーマについて詳しくは、フィラー を参照してください。