レイアウト

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

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

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

コンポーネントを配置する方向 {#component-placement-direction}

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

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

使用できるコンポーネント {#available-component}

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

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

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

垂直方向の配置 {#baseline-diff-vertical}

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

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

使用できないプロパティ {#unavailable-property-with-baseline}

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

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

コンポーネントの幅と高さ {#component-height-width}

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

水平ボックス (horizontal box) 内のコンポーネントの幅 {#width-in-horizontal}

水平ボックスでは、コンポーネントの 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) 内のコンポーネントの高さ {#hight-in-vertical}

垂直ボックスでは、コンポーネントの 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 プロパティで指定した値)

ボックスの幅 {#box-width}

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

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

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

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

ボックスの高さ {#box-height}

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

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

その他のコンポーネントのサイズ {#other-component-size}

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

コンポーネントの配置 {#component-location}

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

水平方向の配置 {#horizontal-align}

水平方向の配置位置を 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"      }    ]  }}

垂直方向の配置 {#vertical-gravity}

垂直方向の配置位置を 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"      }    ]  }}

ボックスのパディング {#padding}

ボックスのパディングは、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 プロパティで指定します。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 プロパティで指定します。 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"      }    ]  }}

オフセット {#offset}

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

• 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 の場合 {#relative-position}

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

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

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

position プロパティの値が absolute の場合 {#absolute-position}

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

参考

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

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

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

親要素とコンポーネントのサイズ {#component-size}

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

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

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

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

描画順序について {#drawing-layer}

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

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