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": { ここに貼り付けます。 } } }