レイアウト
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 データに書くコンポーネントの順序を変更してください。