レイアウト

Flexible Template は、CSS Flexible Box(CSS Flexbox)の基礎知識を使って、複雑なレイアウトのメッセージを構築できます。CSS Flexbox の Flex ボックスが Flexible Template のボックスに相当し、CSS Flexbox の Flex アイテムがFlexible Template のコンポーネントに相当します。

ここでは、全体のレイアウトを調整する方法と、ボックスに含まれているコンポーネント(子要素)のサイズと順番を調整する方法について説明します。JSON スキーマについて詳しくは、『Flexible Template API』の「Flexible Template」を参照してください。

コンポーネントを配置する方向
- 使用できるコンポーネント
- ベースラインボックス(baseline box)の特徴
コンポーネントの幅と高さ
- 水平ボックス(horizontal box)内のコンポーネントの幅
- 垂直ボックス(vertical box)内のコンポーネントの高さ
- ボックスの幅
- ボックスの高さ
- その他のコンポーネントのサイズ
コンポーネントの配置
- 水平方向の配置
- 垂直方向の配置
- ボックスのパディング
- ボックスの spacing プロパティ
- コンポーネントの margin プロパティ
- オフセット
描画順序について

コンポーネントを配置する方向

ボックスの主軸方向を決めることで、子要素の配置を決めることができます。子要素をボックスに配置するには3つのレイアウトタイプがあります。

子要素の配置方向はボックスのlayoutプロパティで指定します。

レイアウトタイプ (`layout`プロパティの値)	説明
horizontal	子要素を水平に配置します。子要素を配置する方向は、バブルの`direction`プロパティで指定します。このようなレイアウトタイプのボックスを水平ボックス(`horizontal box`)といいます。
vertical	子要素を上から下に垂直に配置します。このようなレイアウトタイプのボックスを垂直ボックス(`vertical box`)といいます。
baseline	子要素を水平ボックスと同じ方法で配置します。水平ボックスとの違いについて詳しくは、「ベースラインボックスの特徴」を参照してください。このようなレイアウトタイプのボックスをベースラインボックス(`baseline box`)といいます。

使用できるコンポーネント

ボックスのタイプによって、子要素として使用できるコンポーネントが異なります。

	水平ボックス (horizontal box)	垂直ボックス (vertical box)	ベースラインボックス (baseline box)
ボックス (box)	O	O	X
ボタン (button)	O	O	X
画像 (image)	O	O	X
アイコン (icon)	X	X	O
テキスト (text)	O	O	O
スパン (span) ※ 子要素またはテキストとして使用できます。	X	X	X
セパレータ (separator)	O	O	X
フィラー (filler)	O	O	O
スペーサー (spacer) ※ 未推奨	O	O	O

ベースラインボックス (baseline box) の特徴

ベースラインボックスは水平ボックスと同様に動作します。ただし、以下の点において水平ボックスとは動作が異なります。

垂直方向の配置

垂直方向の配置位置がテキストのベースラインに固定されます。さまざまな文字サイズのテキストが混在しても、ベースラインが揃うように垂直位置が調整されます。

アイコンのベースラインは、アイコン画像の底辺です。

使用できないプロパティ

ベースラインボックスでは、以下のプロパティは使用できません。

gravityプロパティ
offsetBottomプロパティ(今後、使用可能になる予定)

コンポーネントの幅と高さ

positionプロパティを relative に設定したコンポーネントの幅または高さは、各コンポーネントのflexプロパティで決定されます。

水平ボックス (horizontal box) 内のコンポーネントの幅

水平ボックスでは、コンポーネントのflexプロパティを 1 以上の値に設定した場合、その値を基準にコンポーネント間で余白を分配します。水平ボックス内のコンポーネントでは、flexプロパティのデフォルト値は 1 です。

例えば、水平ボックス内に2つのコンポーネントがあり、flexプロパティの値が 2 と 3 の場合、余白(以下の例では、ボックスの幅)は 2:3 の比率で分割され、各コンポーネントに割り当てられます。

上の Flexible Template を表現するには以下のような JSON データを指定します。


{
  "type": "bubble",
  "body": {
    "type": "box",
    "layout": "horizontal",
    "contents": [
      {
        "type": "text",
        "text": "The work site begins to move; the work site is coming in sight; the work is going on. Expand business communications with us!",
        "wrap": true,
        "color": "#ff0000",
        "flex": 2
      },
      {
        "type": "text",
        "text": "The work site begins to move; the work site is coming in sight; the work is going on. Expand business communications with us!",
        "wrap": true,
        "color": "#0000ff",
        "flex": 3
      }
    ]
  }
}

flexプロパティの値に 0 を指定した場合、コンポーネントの幅がコンテンツ全体のサイズに拡大されます。ただし、ボックス幅を超える部分は表示されません。

以下の例では、ボックス内に3つのコンポーネントがあり、flexプロパティの値は 0、 2、 3 になっています。1番目のコンポーネントはflexプロパティの値が 0 であるため、含まれるテキスト「Hello」を表示できる幅が確保されます。そして余白(以下の例では、ボックスの幅から1番目のコンポーネントの幅を除いた部分)が 2:3 の比率で分割され、2番目、3番目のコンポーネントに割り当てられます。

上のFlexible Templateを表現するには以下のようなJSONデータを指定します。


{
  "type": "bubble",
  "body": {
    "type": "box",
    "layout": "horizontal",
    "contents": [
      {
        "type": "text",
        "text": "Hello",
        "color": "#00ff00",
        "flex": 0
      },
      {
        "type": "text",
        "text": "The work site begins to move; the work site is coming in sight; the work is going on. Expand business communications with us!",
        "wrap": true,
        "color": "#ff0000",
        "flex": 2
      },
      {
        "type": "text",
        "text": "The work site begins to move; the work site is coming in sight; the work is going on. Expand business communications with us!",
        "wrap": true,
        "color": "#0000ff",
        "flex": 3
      }
    ]
  }
}

CSS Flexboxのflexとの対応

水平ボックス内のコンポーネントのflexプロパティは、CSS Flexboxのflexに、以下のように対応します。

flex = 0の場合：CSS Flexboxのflex: 0 0 auto;と同等のレイアウト

flex = 0以上の場合：CSS Flexboxのflex: X 0 0;と同等のレイアウト (Xはflexプロパティで指定した値)

垂直ボックス (vertical box) 内のコンポーネントの高さ

垂直ボックスでは、コンポーネントのflexプロパティを 1 以上の値に設定した場合、その値を基準にコンポーネント間で余白を分配します。垂直ボックス内のコンポーネントでは、flexプロパティのデフォルト値は 0 です。

各コンポーネントは次のようなルールでレイアウトされています。

左側の垂直ボックスの高さが5行分であるため、右側の垂直ボックスも同じ高さになります。
右側の垂直ボックスには、2つのテキスト(各1行)と3つのセパレータだけでは埋められない余白が発生します。
余白は2つのテキストのflexプロパティの値(2 と 3)を基準に 2:3 で分割され、各コンポーネントに割り当てられます。

上の Flexible Template を表現するには以下のような JSON データを指定します。


{
  "type": "bubble",
  "body": {
    "type": "box",
    "layout": "horizontal",
    "contents": [
      {
        "type": "box",
        "layout": "vertical",
        "contents": [
          {
            "type": "text",
            "wrap": true,
            "text": "TEXT\nTEXT\nTEXT\nTEXT\nTEXT"
          }
        ],
        "backgroundColor": "#c0c0c0"
      },
      {
        "type": "box",
        "layout": "vertical",
        "contents": [
          {
            "type": "separator",
            "color": "#ff0000"
          },
          {
            "type": "text",
            "text": "flex=2",
            "flex": 2
          },
          {
            "type": "separator",
            "color": "#ff0000"
          },
          {
            "type": "text",
            "text": "flex=3",
            "flex": 3
          },
          {
            "type": "separator",
            "color": "#ff0000"
          }
        ]
      }
    ]
  }
}

CSS Flexbox の flex との対応

垂直ボックス内のコンポーネントのflexプロパティは、CSS Flexboxのflexに、以下のように対応します。

flex = 0の場合：CSS Flexboxのflex: 0 0 auto;と同等のレイアウト

flex = 0以上の場合：CSS Flexboxのflex: X 0 auto;と同等のレイアウト (Xはflexプロパティで指定した値)

ボックスの幅

ボックスの幅は、widthプロパティで指定できます。%(親要素の幅を基準とした割合)またはピクセルで指定します。

なお、水平ボックスまたはベースラインボックスでwidthプロパティを指定すると、flexプロパティは 0 に設定されます。

widthプロパティをピクセルで指定する場合

バブルの幅は、バブルを表示する端末の画面サイズによって異なります。バブル全体のレイアウトを調整するためにwidthプロパティをピクセルで指定すると、受信した端末によっては、予期せぬレイアウトになることがあります。画面サイズの影響を抑えるためにはflexプロパティを使用してください。

ボックスの高さ

ボックスの高さは、heightプロパティで指定できます。%(親要素の高さを基準とした割合)またはピクセルで指定します。

なお、垂直ボックスでheightプロパティを指定すると、flexプロパティは 0 に設定されます。

その他のコンポーネントのサイズ

ボタンや画像などのコンポーネントのサイズは、flexプロパティと異なるプロパティで指定することができます。JSON スキーマについて詳しくは、『Flexible Template API』の「Flexible Template」を参照してください。

コンポーネントの配置

ボックスに余白がある場合、水平方向と垂直方向の配置位置をコンポーネントごとに指定できます。

水平方向の配置

水平方向の配置位置をalignプロパティで指定できます。 alignプロパティは親要素のボックスに関係なく、常に水平方向（左右）の位置に影響します。以下のいずれかの値を指定します。

start : 左揃え (デフォルト値)
end : 右揃え
center : 中央揃え

上の Flexible Template を表現するには以下のような JSON データを指定します。


{
  "type": "bubble",
  "body": {
    "type": "box",
    "layout": "vertical",
    "contents": [
      {
        "type": "text",
        "text": "align=start",
        "align": "start"
      },
      {
        "type": "separator",
        "color": "#ff0000"
      },
      {
        "type": "text",
        "text": "align=center",
        "align": "center"
      },
      {
        "type": "separator",
        "color": "#ff0000"
      },
      {
        "type": "text",
        "text": "align=end",
        "align": "end"
      }
    ]
  }
}

垂直方向の配置

垂直方向の配置位置をgravityプロパティで指定できます。 gravityプロパティは親要素のボックスに関係なく、常に垂直方向（上下）の位置に影響します。以下のいずれかの値を指定します。

top : 上揃え（デフォルト値）
bottom : 아래쪽 정렬
center : 가운데 정렬

参考

このプロパティはベースラインボックスには適用されません。

上の Flexible Template を表現するには以下のような JSON データを指定します。


{
  "type": "bubble",
  "body": {
    "type": "box",
    "layout": "horizontal",
    "contents": [
      {
        "type": "box",
        "layout": "vertical",
        "contents": [
          {
            "type": "text",
            "wrap": true,
            "text": "TEXT\nTEXT\nTEXT\nTEXT\nTEXT"
          }
        ],
        "backgroundColor": "#c0c0c0"
      },
      {
        "type": "text",
        "text": "top",
        "gravity": "top"
      },
      {
        "type": "text",
        "text": "center",
        "gravity": "center"
      },
      {
        "type": "text",
        "text": "bottom",
        "gravity": "bottom"
      }
    ]
  }
}

ボックスのパディング

ボックスのパディングは、paddingAll、paddingTop、paddingBottom、paddingStart、paddingEndプロパティで指定します。ボックスのパディングとは、ボックスの境界線と子要素の間にある余白のサイズを表します。値は%(ボックスの幅を基準とした割合)またはピクセルで指定するか、none、xs、sm、md、lg、xl、xxl のいずれかの値を指定できます。none の場合はスペースが設定されず、それ以外は列挙した順に余白のサイズが大きくなります。

paddingAllプロパティのほかに、paddingTop、paddingBottom、paddingStart、paddingEndプロパティを設定した場合、paddingAllの設定が上書きされます。

上の Flexible Template を表現するには以下のような JSON データを指定します。


{
  "type": "bubble",
  "body": {
    "type": "box",
    "layout": "horizontal",
    "contents": [
      {
        "type": "box",
        "layout": "horizontal",
        "contents": [
          {
            "type": "text",
            "text": "hello, world"
          }
        ],
        "backgroundColor": "#ffffff"
      }
    ],
    "backgroundColor": "#ffd2d2",
    "paddingTop": "20px",
    "paddingAll": "80px",
    "paddingStart": "40px"
  }
}

なお、上の Flexible Template のテキストを変更すると、以下のようにレイアウトされます。

ボックスの spacing プロパティ

コンポーネント間の最小スペースは、コンポーネントを含むボックス(親要素)のspacingプロパティで指定します。spacingプロパティは、none、xs、sm、md、lg、xl、xxl のいずれかの値を指定できます。none の場合はスペースが設定されず、それ以外は列挙した順に余白のサイズが大きくなります。

以下の Flexible Template には、水平ボックスに3つの垂直ボックスが等間隔 (md) で配置されています。

上の Flexible Template を表現するには以下のような JSON データを指定します。


{
  "type": "bubble",
  "body": {
    "type": "box",
    "layout": "horizontal",
    "spacing": "md",
    "contents": [
      {
        "type": "box",
        "layout": "vertical",
        "contents": [
          {
            "type": "text",
            "text": "TEXT1"
          }
        ],
        "backgroundColor": "#80ffff"
      },
      {
        "type": "box",
        "layout": "vertical",
        "contents": [
          {
            "type": "text",
            "text": "TEXT2"
          }
        ],
        "backgroundColor": "#80ffff"
      },
      {
        "type": "box",
        "layout": "vertical",
        "contents": [
          {
            "type": "text",
            "text": "TEXT3"
          }
        ],
        "backgroundColor": "#80ffff"
      }
    ]
  }
}

※ 特定のコンポーネントについてこの設定を上書きするには、そのコンポーネントでmarginプロパティを設定します。

コンポーネントの margin プロパティ

親要素内での、このコンポーネントの前に挿入する余白の最小サイズは、marginプロパティで指定します。 marginプロパティは、none、xs、sm、md、lg、xl、xxl のいずれかの値を指定できます。none の場合はスペースが設定されず、それ以外は列挙した順に余白のサイズが大きくなります。

参考

marginプロパティは、親要素のspacingプロパティより優先されます。また、ボックス内の先頭に挿入されたコンポーネントでmarginプロパティを指定した場合、スペースはレイアウトに反映されません。

以下の Flexible Template には、水平ボックスに3つのの垂直ボックスが配置されています。水平ボックスのspacingプロパティは md に設定されており、3つ目の垂直ボックスのmarginプロパティが xxl に設定されています。

上の Flexible Template を表現するには以下のような JSON データを指定します。


{
  "type": "bubble",
  "body": {
    "type": "box",
    "layout": "horizontal",
    "spacing": "md",
    "contents": [
      {
        "type": "box",
        "layout": "vertical",
        "contents": [
          {
            "type": "text",
            "text": "TEXT1"
          }
        ],
        "backgroundColor": "#80ffff"
      },
      {
        "type": "box",
        "layout": "vertical",
        "contents": [
          {
            "type": "text",
            "text": "TEXT2"
          }
        ],
        "backgroundColor": "#80ffff"
      },
      {
        "type": "box",
        "layout": "vertical",
        "contents": [
          {
            "type": "text",
            "text": "TEXT3"
          }
        ],
        "backgroundColor": "#80ffff",
        "margin": "xxl"
      }
    ]
  }
}

オフセット

コンポーネントの配置は、以下のプロパティを指定することによっても調整できます。

positionプロパティ
- オフセットの効果は、positionプロパティの設定によって異なります。ただし、ブロックの直下にあるボックスでは、absolute を指定することはできません。
offsetTopプロパティ、offsetBottomプロパティ、offsetStartプロパティ、offsetEndプロパティ
- 値は%(ボックスの幅を基準とした割合)またはピクセルで指定するか、none、xs、sm、md、lg、xl、xxl のいずれかの値を指定できます。

ここでは、オフセットの効果を説明するために、以下の Flexible Template を基準にして、「TARGET」と表示されている水平ボックスの設定を変更して説明します。

上の Flexible Template を表現するには以下のような JSON データを指定します。


{
  "type": "bubble",
  "body": {
    "type": "box",
    "layout": "vertical",
    "contents": [
      {
        "type": "box",
        "layout": "horizontal",
        "contents": [
          {
            "type": "text",
            "text": "REFERENCE BOX\n1\n2\n3",
            "align": "center",
            "wrap": true
          }
        ],
        "backgroundColor": "#80ffff"
      },
      {
        "type": "box",
        "layout": "horizontal",
        "contents": [
          {
            "type": "text",
            "text": "TARGET"
          }
        ],
        "backgroundColor": "#ff8080"
      }
    ]
  }
}

`position`プロパティの値が `relative` の場合

本来のコンポーネントの位置を基準として配置する場合は、positionプロパティを relative に指定してから、以下側のオフセットプロパティを指定します。CSS Positioned Layout Module Level 3 の「Relative positioning」と同様の考え方で位置を決定できます。

プロパティ	説明
`offsetBottom`	通常の位置から上に移動する量を指定します。
`offsetStart`	通常の位置から下に移動する量を指定します。
`offsetEnd`	通常の位置から左に移動する量を指定します。
`offsetTop`	通常の位置から右に移動する量を指定します。

ここで、「TARGET」と表示されている水平ボックスの設定を以下のように変更した例を紹介します。

プロパティ	値
`position`	`relative`
`offsetTop`	`10px`
`offsetBottom`	-
`offsetStart`	`40px`
`offsetEnd`	-

1つ目のバブルは設定変更前、2つ目のバブルは設定変更後です。

`position`プロパティの値が `absolute` の場合

コンポーネントを親要素の境界線を基準として配置する場合は、positionプロパティを absolute に指定してから、以下側のオフセットプロパティを指定します。CSS Positioned Layout Module Level 3 の「Absolute positioning」と同様の方法でレイアウトできます。

プロパティ	説明
`offsetTop`	親要素の上端からコンポーネントの上端までの相対位置を指定します。
`offsetBottom`	親要素の下端からコンポーネントの下端までの相対位置を指定します。
`offsetStart`	親要素の左端からコンポーネントの左端までの相対位置を指定します。
`offsetEnd`	親要素の右端からコンポーネントの右端までの相対位置を指定します。

参考

offsetプロパティを指定しない場合、コンポーネントの位置が画面によって異なる場合があります。そのため、オフセットを垂直方向 (offsetTopまたはoffsetBottom) および水平方向 (offsetStartまたはoffsetEnd) で明確に指定することを推奨します。

ここで、「TARGET」と表示されているボックスの位置をオフセットの設定変更によって以下のように変更した例を紹介します。

プロパティ	値
`position`	`absolute`
`offsetTop`	`10px`
`offsetBottom`	`20px`
`offsetStart`	`40px`
`offsetEnd`	`80px`

1つ目のバブルは設定変更前、2つ目のバブルは設定変更後です。

親要素とコンポーネントのサイズ

positionプロパティの値が absolute に設定されたボックスは、親要素のサイズに影響を与えなくなり、さらに親要素の影響を受けなくなります。そのため、コンポーネントのサイズが親要素より大きい場合、コンポーネントの一部は表示されません。親要素(余白)の影響によりコンポーネントのサイズが大きくなっていた場合は、元のサイズに戻ります。

ここで、「REFERENCE BOX」と表示されている水平ボックスの設定を以下のように変更した例を紹介します。

プロパティ	値
`position`	`absolute`

1つ目のバブルは設定変更前、2つ目のバブルは設定変更後です。

「REFERENCE BOX」のサイズは親要素(垂直ボックス)のサイズに影響を与えなくなり、さらに親要素の影響を受けなくなります。そのため、親要素より大きい部分( 「2」行と「3」が表示されてる行)は表示されません。また、親要素(余白)の影響で大きくなっていた左右の余白部分は、元のサイズ(テキスト「REFERENCE BOX」の幅)に戻ります。

描画順序について

コンポーネントは、JSON データの順に描画されます。つまり、JSON データで先頭に書いたコンポーネントがバブルの最背面に描画され、最後に書いたコンポーネントはバブルの最前面に描画されます。

描画される順序を変更するには、JSON データに書くコンポーネントの順序を変更してください。

LINE WORKS Developers