コンテナ

    コンテナは、Flexible Template 構造の最上位である要素です。以下のタイプのコンテナを利用できます。

    • バブル (bubble)
    • カルーセル (carousel)

    コンテナの用途および JSON データサンプルについては、『Flexible Template ドキュメント』の「要素」を参照してください。

    バブル

    1つのメッセージバブルを構成されたコンテナです。ヘッダーヒーローボディフッターという4つのブロックを含めることができます。各ブロックの用途について詳しくは、Flexible Templateの『要素』の「ブロック」を参照してください。

    バブルを定義する JSON データの最大サイズは 30KB です。

    API の種類

    サーバー API

    Request URL

    https://apis.worksmobile.com/r/{API ID}/message/v1/bot/{botNo}/message/push

    HTTP Method

    POST(Content-Type: application/json; charset=UTF-8)

    Request Content

    パラメータ タイプ 必須 説明
    type string Y "bubble"
    size string N バブルのサイズ nanomicrokilomegagiga のいずれかの値を指定できます。

    デフォルト値は mega です。
    direction string N テキストの方向および水平ボックスでコンポーネントを配置する方向。以下のいずれかの値を指定します。

    ltr: テキスト・コンポーネントを左から右に表記・配置
    rtl: テキスト・コンポーネントを右から左に表記・配置

    デフォルト値は ltr. です。
    header object N ヘッダーのブロック。ボックスを指定します。
    hero object N ヒーローのブロック。ボックスまたは画像を指定します。
    body object N ボディのブロック。ボックスを指定します。
    footer object N フッターのブロック。ボックスを指定します。
    styles object N ブロックのスタイル。バブルスタイルは以下を指定します。
    action object N 画像をタップした時に実行されるアクション。Action Objectを指定します。

    ブロックのスタイルを定義するオブジェクト

    バブル内のブロックのスタイルは以下の2つのオブジェクトを使って定義します。

    バブルスタイル

    パラメータ タイプ 必須 説明
    header object N ヘッダーのスタイル。以下のブロックスタイルを指定します。
    hero object N ヒーローのスタイル。以下のブロックスタイルを指定します。
    body object N ボディのスタイル。以下のブロックスタイルを指定します。
    footer object N フッターのスタイル。以下のブロックスタイルを指定します。

    ブロックスタイル

    パラメータ タイプ 必須 説明
    backgroundColor string N ブロックの背景色。16進数カラーコードで設定します。
    separator boolean N ブロック上にセパレータを配置する場合は true を指定します。デフォルト値は false です。
    separatorColor string N セパレータのカラー。16進数カラーコードで設定します。

    参考

    • セパレータは、先頭のブロックの上には配置できません。

    Request Example

    
    {
      "type": "bubble",
      "header": {
        "type": "box",
        "layout": "vertical",
        "contents": [
          {
            "type": "text",
            "text": "Text Component",
            "weight": "bold"
          }
        ],
        "paddingAll": "10px",
        "paddingStart": "15px"
      },
      "hero": {
        "type": "image",
        "url": "https://i.ibb.co/RbvxLhg/Image-Component.png",
        "size": "full",
        "aspectMode": "cover",
        "aspectRatio": "2:1"
      },
      "body": {
        "type": "box",
        "layout": "vertical",
        "contents": [
          {
            "type": "box",
            "layout": "horizontal",
            "contents": [
              {
                "type": "box",
                "layout": "vertical",
                "contents": [
                  {
                    "type": "image",
                    "url": "https://i.ibb.co/4dTjScT/Image.png",
                    "size": "lg"
                  }
                ],
                "borderWidth": "2px",
                "borderColor": "#90909050",
                "width": "93px",
                "height": "93px"
              },
              {
                "type": "box",
                "layout": "vertical",
                "contents": [
                  {
                    "type": "separator",
                    "color": "#909090"
                  },
                  {
                    "type": "text",
                    "text": "Text Component 01"
                  },
                  {
                    "type": "separator",
                    "color": "#909090"
                  },
                  {
                    "type": "text",
                    "text": "Text Component 02"
                  },
                  {
                    "type": "separator",
                    "color": "#909090"
                  }
                ],
                "height": "100px",
                "margin": "md",
                "spacing": "lg"
              }
            ]
          },
          {
            "type": "box",
            "layout": "horizontal",
            "contents": [
              {
                "type": "box",
                "layout": "vertical",
                "contents": [
                  {
                    "type": "image",
                    "url": "https://i.ibb.co/4dTjScT/Image.png",
                    "size": "lg"
                  }
                ],
                "borderWidth": "2px",
                "borderColor": "#90909050",
                "width": "93px",
                "height": "93px"
              },
              {
                "type": "box",
                "layout": "vertical",
                "contents": [
                  {
                    "type": "separator",
                    "color": "#909090"
                  },
                  {
                    "type": "text",
                    "text": "Text Component 03"
                  },
                  {
                    "type": "separator",
                    "color": "#909090"
                  },
                  {
                    "type": "text",
                    "text": "Text Component 04"
                  },
                  {
                    "type": "separator",
                    "color": "#909090"
                  }
                ],
                "height": "100px",
                "margin": "md",
                "spacing": "lg"
              }
            ],
            "margin": "md"
          }
        ]
      },
      "footer": {
        "type": "box",
        "layout": "vertical",
        "contents": [
          {
            "type": "button",
            "action": {
              "type": "uri",
              "label": "Button Component",
              "uri": "http://linecorp.com/"
            },
            "height": "sm",
            "style": "link"
          }
        ]
      }
    }
    

    Response

    呼び出しに成功すると HTTP 200 コードを返します。

    Error Code

    呼び出しに失敗するとエラーコードとエラーメッセージを返します。
    エラーコードはトーク Bot REST API エラーコードを参照してください。