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 は LINE 社の Flex Message (Update 1) と一部互換性があります。

Flexible Template の記述形式

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

Request Content

パラメータ	タイプ	必須	説明
type	string	Y	"`flex`"
altText	string	Y	トークルームリストとプッシュ通知で表示される代替テキスト。最大 400 字。
contents	object	Y	Flexible Template コンテナ

multi language

パラメータ	タイプ	必須	説明
i18nAltTexts[]	array	N	多言語の代替テキストリスト
i18nAltTexts[].language	string	Y	言語コード ●ja_JP ●ko_KR ●zh_CN ●zh_TW ●en_US
i18nAltTexts[].altText	string	Y	代替テキストの内容。最大 400 字。

Request Example

Flexible Template structure


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


{
  "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 で動作を確認する

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

Flexible Templateの機能

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

Flexible Template Simulatorの構造

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

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

Flex Message SimulatorでFlex Messageを生成

https://flex-simulator.worksmobile.com/ にアクセスします。
[新規作成] をクリックし、[Bubble] または [Carousel] を選択してコンテナのレイアウトを選択します。[サンプル] をクリックすると、サンプルに提供されたレイアウトから選択することができます。
ツリービューエリアからコンテナの header / hero / footer 選択し、[+] をクリックしてオブジェクトを追加します。
オブジェクトをクリックし、画面右側のプロパティエリアでプロパティを指定します。
レイアウトが完成されるまで 3-4 を繰り返します。
画面上部の [JSONで表示] をクリックします。
[コピー] をクリックします。

メッセージ送信 API の request bodyを下記のように作成し、content.contents {} 以下に貼り付けます。

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

LINE WORKS Developers