Flexible Template

Flexible Template は、レイアウトをカスタマイズできるメッセージです。 CSS Flexible Box (CSS Flexbox) の基礎知識を使って、レイアウトを自由にカスタマイズできます。 Flex コンテナは Flexible Template のボックスに対応し、Flex アイテムは Flexible Template のコンポーネントに対応します。

また、Flexible Template Simulator を使うと簡単に Flexible Template を作成できます。詳しくは Flexible Template Simulator で動作を確認する をご参考ください。

Flexible Template の記述形式 {#flex-format}

他のメッセージ形式と同様に、Flexible Template は JSON 形式で記述します。Flexible Template を使用した Bot を開発するには、以下のページを参照して下さい。

• Flexible Template の要素
• Flexible Template のレイアウト

Request Content {#flex-request-request}

common {#flex-request-common}

multi language {#flex-request-multi}

Request Example {#flex-request-example}

Flexible Template structure {#flex-template-structure-example}

{  "content": {    "type": "flex",    "altText": "this is a flexible template",    "contents": {      "type": "bubble",      "body": {        "type": "box",        "layout": "vertical",        "contents": [          {            "type": "text",            "text": "hello"          },          {            "type": "text",            "text": "world"          }        ]      }    }  }}

Multi language (altText) {#flex-multilang-alttext-example}

{  "content": {    "type": "flex",    "altText": "Hello",    "i18nAltTexts":[{      "language": "ja_JP",      "altText": "こんにちは"    },{      "language": "ko_KR",      "altText": "안녕하세요"    }],    "contents": {      "type": "bubble",      "size": "mega",      "hero": {        "type": "box",        "layout": "vertical",        "contents": [          {            "type": "text",            "text": "YOU ARE INVITED!",            "size": "xl",            "color": "#ffffff",            "weight": "bold",            "align": "center",            "wrap": true          }        ],        "backgroundColor": "#81DBA0",        "paddingAll": "15px"      }    }  }}

Flexible Template Simulator で動作を確認する {#using-flex-simulator}

Flexible Template Simulator を使用すると、実際にメッセージを送信しなくてもレイアウトを確認し、メッセージ送信 API で利用できます。

Flexible Template の機能 {#what-is-flex-template}

• CSS Flexible Box (CSS Flexbox) の基礎知識を使って、複雑なレイアウトのメッセージを表現できます。
• 単体のメッセージバブルだけでなく、複数のメッセージバブルをカルーセル形式で表現できます。カルーセル形式のメッセージバブルは、横にスクロールして表示できます。
• 書字方向を左横書きまたは右横書きに設定できます。

Flexible Template Simulator の構造 {#flex-simulator-function}

Flexible Message Simulator は 3 つの部分で構成されています。

• プレビューエリア： ツリービューエリアとプロパティエリアで入力したデータの Flex Message が表示される部分。
• ツリービューエリア： Flex Messageの データ構造を編集したり表示したりする部分。
• プロパティエリア： Flex Message の構築に必要なデータを編集する部分。この領域で入力したデータを基に、Flexible Template Simulator は Flex Message を生成します。

Flexible Template Simulator で Flex Message を生成 {#how-to-use-flex-simulator}

1. Flexible Template Simulator にアクセスします。
2. [新規作成] をクリックし、[Bubble] または [Carousel] を選択してコンテナのレイアウトを選択します。[サンプル] をクリックすると、サンプルに提供されたレイアウトから選択できます。
3. ツリービューエリアからコンテナの header / hero / footer 選択し、[+] をクリックしてオブジェクトを追加します。
4. オブジェクトをクリックし、画面右側のプロパティエリアでプロパティを指定します。
5. レイアウトが完成されるまで 3 〜 4 を繰り返します。
6. 画面上部の [JSON で表示] をクリックします。
7. [コピー] をクリックします。
8. メッセージ送信 API の request bodyを下記のように作成し、content.contents {} の中に貼り付けます。

{  "content": {    "type": "flex",    "altText": "トークルームリストとプッシュ通知で表示される代替テキスト。",    "contents": {           ここに貼り付けます。        }  }}