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 の記述形式

    他のメッセージ形式と同様に、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を生成

    1. https://flex-simulator.worksmobile.com/ にアクセスします。
    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": {
              ここに貼り付けます。
           }
      }
      }