ボックス

    子要素のレイアウトを定義するコンポーネントです。ボックスにボックスを含めることもできます。

    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 "box"
    layout string Y このボックス内のコンポーネントを配置する方向。
    詳しくは、『Flexible Template ドキュメント』の「レイアウト」の「コンポーネントを配置する方向」を参照してください。
    contents array of objects Y このボックス内のコンポーネント。以下のコンポーネントを指定できます。

    layoutプロパティが horizontal または vertical の場合:
    ボックス, ボタン, 画像, テキスト, セパレータ, フィラー, スペーサー(未推奨)
    layoutプロパティが baseline の場合:
    アイコン, テキスト, フィラー, スペーサー(未推奨))

    コンポーネントは配列に書かれた順序に従って描画されます。
    backgroundColor string N ボックスの背景色。RGBカラー以外にアルファチャンネル(透明度)も設定できます。16進数カラーコードで設定します。(例:#RRGGBBAA)

    デフォルト値は#00000000です。
    borderColor string N ボックスの枠線の色。16進数カラーコードで設定します。
    borderWidth string N ボックスの枠線の太さ。値はピクセルで指定するか、または nonelightnormalmediumsemi-boldbold のいずれかの値を指定できます。

    none の場合は枠線が表示されず、それ以外は列挙した順に枠線が太くなります。
    cornerRadius string N 枠線の角を丸くする時の半径。値はピクセルで指定するか、または nonexssmmdlgxlxxl のいずれかの値を指定できます。

    none の場合は角が丸くならず、それ以外は列挙した順に半径が大きくなります。
    width string N ボックスの幅。詳しくは、『Flexible Template ドキュメント』の「レイアウト」の「ボックスの幅」を参照してください。
    height string N ボックスの高さ。詳しくは、『Flexible Template ドキュメント』の「レイアウト」の「ボックスの高さ」を参照してください。
    flex number N 親要素内における、このコンポーネントの幅または高さの比率。詳しくは、『Flexible Template ドキュメント』の「レイアウト」の「コンポーネントの幅と高さ」を参照してください。
    spacing string N ボックス内におけるコンポーネント間の最小スペース。デフォルト値は none です。詳しくは、『Flexible Template ドキュメント』の「レイアウト」の「ボックスの spacing プロパティ」を参照してください。
    margin string N 親要素内での、特定のコンポーネントとその前のコンポーネントとの間に挿入される余白の最小サイズ。詳しくは、『Flexible Template ドキュメント』の「レイアウト」の「コンポーネントの margin プロパティ」を参照してください。
    paddingAll string N ボックスの境界線と子要素との間にある余白のサイズ。詳しくは、『Flexible Template ドキュメント』の「レイアウト」の「ボックスのパディング」を参照してください。
    paddingTop string N ボックスの上の境界線と子要素の上の境界線との間にある余白のサイズ 。詳しくは、『Flexible Template ドキュメント』の「レイアウト」の「ボックスのパディング」を参照してください。
    paddingBottom string N ボックスの下の境界線と子要素の下の境界線との間にある余白のサイズ。詳しくは、『Flexible Template ドキュメント』の「レイアウト」の「ボックスのパディング」を参照してください。
    paddingStart string N ボックスの左の境界線と子要素の左の境界線との間にある余白のサイズ。詳しくは、『Flexible Template ドキュメント』の「レイアウト」の「ボックスのパディング」を参照してください。
    paddingEnd string N ボックスの右の境界線と子要素の右の境界線との間にある余白のサイズ。 詳しくは、『Flexible Template ドキュメント』の「レイアウト」の「ボックスのパディング」を参照してください。
    position string N このボックスを配置するときの基準となる位置。以下のいずれかの値を指定します。

    relative : 直前のボックスを基準とします。
    absolute : 親要素の左上を基準とします。

    デフォルト値は relative です。 詳しくは、『Flexible Template ドキュメント』の「レイアウト」の「オフセット」を参照してください。
    offsetTop string N 上側のオフセット。詳しくは、『Flexible Template ドキュメント』の「レイアウト」の「オフセット」を参照してください。
    offsetBottom string N 下側のオフセット。詳しくは、『Flexible Template ドキュメント』の「レイアウト」の「オフセット」を参照してください。
    offsetStart string N 左側のオフセット。詳しくは、『Flexible Template ドキュメント』の「レイアウト」の「オフセット」を参照してください。
    offsetEnd string N 右側のオフセット。詳しくは、『Flexible Template ドキュメント』の「レイアウト」の「オフセット」を参照してください。
    action object N ボックスをタップするとアクションが実行されます。Action Objectを指定します。

    Request Example

    
    {
      "type": "bubble",
      "size": "kilo",
      "body": {
        "type": "box",
        "layout": "vertical",
        "contents": [
          {
            "type": "text",
            "text": "Welcome to the team!",
            "color": "#222222",
            "weight": "bold",
            "size": "md",
            "align": "center"
          },
          {
            "type": "box",
            "layout": "vertical",
            "contents": [
              {
                "type": "image",
                "url": "https://i.ibb.co/26nhYVF/06-thomas-business-hr-staff.png",
                "size": "sm",
                "aspectMode": "cover",
                "align": "center"
              }
            ],
            "margin": "xxl",
            "cornerRadius": "50px",
            "borderWidth": "1px",
            "borderColor": "#22222220",
            "height": "60px",
            "width": "60px",
            "offsetStart": "85px",
            "offsetEnd": "85px"
          },
          {
            "type": "text",
            "text": "Kyle Baron",
            "weight": "bold",
            "size": "lg",
            "margin": "md",
            "align": "center"
          },
          {
            "type": "box",
            "layout": "baseline",
            "contents": [
              {
                "type": "text",
                "text": "kylebaron@designer.com",
                "size": "sm",
                "color": "#666666",
                "wrap": true,
                "align": "center"
              }
            ]
          },
          {
            "type": "text",
            "text": "Please edit your detail information.",
            "color": "#aaaaaa",
            "size": "sm",
            "wrap": true,
            "align": "center",
            "margin": "lg"
          }
        ]
      },
      "footer": {
        "type": "box",
        "layout": "vertical",
        "spacing": "sm",
        "contents": [
          {
            "type": "button",
            "style": "primary",
            "height": "sm",
            "action": {
              "type": "uri",
              "label": "Edit Profile",
              "uri": "https://worksmobile.com"
            },
            "color": "#2432AB"
          }
        ],
        "flex": 0
      }
    }