# Flex Messageのレイアウト
Flex Messageは、CSS Flexible Box(CSS Flexbox) (opens new window)の基礎知識を使って、複雑なレイアウトのメッセージを構築します。CSS FlexboxのFlexボックスがFlex Messageのボックスに相当し、CSS FlexboxのFlexアイテムがFlex Messageのコンポーネントに相当します。
ここでは、レイアウトを調整するためのプロパティや、ボックスに含めたコンポーネント(子要素)のサイズと位置合わせを調整する方法の概要を説明します。JSONスキーマについて詳しくは、『Messaging APIリファレンス』の「Flex Message」を参照してください。
# ボックスの種類と主軸の向き
ボックスの種類は3種類あります。ボックスの種類によって主軸の向きが変わります。ボックスの種類は、ボックスのlayout
プロパティで指定します。
ボックスの種類 | layout プロパティ | 説明 |
---|---|---|
水平ボックス | horizontal | 主軸の向きは水平です。子要素を水平に配置します。交差軸の向きは垂直です。 |
垂直ボックス | vertical | 主軸の向きは垂直です。子要素を上から下へ垂直に配置します。交差軸の向きは水平です。 |
ベースラインボックス | baseline | 主軸の向きは水平ボックスと同じです。 水平ボックスとの違いは、「ベースラインボックスの特徴」を参照してください。 |
交差軸とは、主軸に対して直角に交わる軸です。
# ベースラインボックスの特徴
ベースラインボックスは水平ボックスと同様に動作します。ただし、水平ボックスとは、以下の点で動作が異なります。
# 垂直方向の揃え位置
垂直方向の揃え位置がテキストのベースラインに固定されます。さまざまなフォントサイズのテキストが混在しても、ベースラインが揃うように垂直位置が調整されます。
なお、アイコンのベースラインは、アイコン画像の底辺です。
# 使用できるコンポーネント
ボックスの種類によって、子要素として使用できるコンポーネントが異なります。
ベースラインボックス | 水平ボックス/垂直ボックス | |
---|---|---|
ボックス | ❌ | ✅ |
ボタン | ❌ | ✅ |
画像 | ❌ | ✅ |
アイコン | ✅ | ❌ |
テキスト | ✅ | ✅ |
スパン(テキストの子要素として使用できます) | ❌ | ❌ |
セパレータ | ❌ | ✅ |
フィラー(非推奨) | ✅ | ✅ |
✅:ボックスの子要素として使用できる、❌:ボックスの子要素として使用できない
# 使用できないプロパティ
ベースラインボックスの子要素では、以下のプロパティは使用できません。
gravity
プロパティoffsetBottom
プロパティ
# コンポーネントの幅と高さ
position
プロパティをrelative
に設定したコンポーネントの幅または高さは、各コンポーネントのflex
プロパティで決定されます。
# 水平ボックス内のコンポーネントの幅
水平ボックスでは、コンポーネントのflex
プロパティに1
以上の値を指定した場合は、その値をもとに、コンポーネントに余白が分配されます。水平ボックス内のコンポーネントでは、flex
プロパティのデフォルト値は1
です。
たとえば、水平ボックスに2つのコンポーネントがありflex
プロパティの値が2
と3
であるとき、余白(以下の例では、ボックスの幅)が2:3に分割され、各コンポーネントに割り当てられます。
上のFlex Messageを表現するには以下のようなJSONデータを指定します。
{
"type": "bubble",
"body": {
"type": "box",
"layout": "horizontal",
"contents": [
{
"type": "text",
"text": "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.",
"wrap": true,
"color": "#ff0000",
"flex": 2
},
{
"type": "text",
"text": "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.",
"wrap": true,
"color": "#0000ff",
"flex": 3
}
]
}
}
flex
プロパティに0
を指定した場合は、そのコンポーネントの幅が維持されます。ただし、ボックスの幅を超える部分は表示されません。
以下の例では、ボックス内に3つのコンポーネントがあり、flex
プロパティの値は0
、2
、3
になっています。1番目のコンポーネントはflex
プロパティの値が0
であるため、含まれるテキスト「Hello」を表示できる幅が確保されます。そして、余白(以下の例では、ボックスの幅から1番目のコンポーネントの幅を除いた部分)が2:3に分割され、2番目、3番目のコンポーネントに割り当てられます。
上のFlex Messageを表現するには以下のようなJSONデータを指定します。
{
"type": "bubble",
"body": {
"type": "box",
"layout": "horizontal",
"contents": [
{
"type": "text",
"text": "Hello",
"color": "#00ff00",
"flex": 0
},
{
"type": "text",
"text": "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.",
"wrap": true,
"color": "#ff0000",
"flex": 2
},
{
"type": "text",
"text": "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.",
"wrap": true,
"color": "#0000ff",
"flex": 3
}
]
}
}
水平ボックス内のコンポーネントのflex
プロパティと、CSS Flexboxのflex
は、以下のように対応しています。
flex
プロパティに0
を指定した場合:CSS Flexboxのflex: 0 0 auto;
と同等のレイアウトflex
プロパティに0
以上を指定した場合:CSS Flexboxのflex: X 0 0;
と同等のレイアウト(Xはflex
プロパティで指定した値)
# 垂直ボックス内のコンポーネントの高さ
垂直ボックスでは、コンポーネントのflex
プロパティに1
以上の値を指定した場合は、その値をもとに、コンポーネントに余白が分配されます。垂直ボックス内のコンポーネントでは、flex
プロパティのデフォルト値は0
です。
以下のFlex Messageでは、水平ボックスの中に2つの垂直ボックスが配置されています。さらに、左側の垂直ボックスには1つのテキストが配置され、右側の垂直ボックスに2つのテキストと3つのセパレータが配置されています。
このとき、各コンポーネントは次のようなルールでレイアウトされています。
- 左側の垂直ボックスが5行分の高さがあるため、右側の垂直ボックスも同じ高さになります。
- 右側の垂直ボックスには、2つのテキスト(各1行)と3つのセパレータだけでは埋められない余白が発生します。
- 2つのテキストの
flex
プロパティの値(2
と3
)をもとに、余白が2:3に分割され、各コンポーネントに割り当てられます。
上のFlex Messageを表現するには以下のような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"
}
]
}
]
}
}
垂直ボックス内のコンポーネントの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
プロパティをピクセルで指定すると、受信した端末によっては、予期せぬレイアウトになることがあります。画面サイズの影響を抑えるためにはflex
プロパティを使用してください。
# ボックスの最大幅
ボックスの場合は、maxWidth
プロパティで最大幅を指定できます。%(親要素の幅を基準にした割合)またはピクセルで指定します。
width
プロパティから算出されるボックスの幅が、maxWidth
プロパティから算出されるボックスの幅よりも大きい場合、ボックスの幅はmaxWidth
プロパティで指定した値に縮小されます。
# ボックスの高さ
ボックスの場合は、height
プロパティで高さを指定できます。%(親要素の高さを基準にした割合)またはピクセルで指定します。
なお、垂直ボックス内のボックスにheight
プロパティを指定すると、flex
プロパティは0
に設定されます。
# ボックスの最大高
ボックスの場合は、maxHeight
プロパティで最大高を指定できます。%(親要素の高さを基準にした割合)またはピクセルで指定します。
height
プロパティから算出されるボックスの高さが、maxHeight
プロパティから算出されるボックスの高さよりも大きい場合、ボックスの高さはmaxHeight
プロパティで指定した値に縮小されます。
# 画像のサイズ
Flex Messageの画像コンポーネントでは、size
プロパティを用いて画像の幅をパーセンテージ、ピクセル、またはキーワードで指定できます。高さはaspectRatio
プロパティで指定された縦横比を維持した状態で自動調整されます。
単位 | 説明 |
---|---|
パーセンテージ | 画像の幅を基準にした割合。0より大きい整数または小数を% で指定します。例:50% 、23.5% 。 |
ピクセル | 0より大きい整数または小数をpx で指定します。例:50px 、23.5px 。 |
キーワード | xxs 、xs 、sm 、md 、lg 、xl 、xxl 、3xl 、4xl 、5xl 、full のいずれかの値を指定できます。列挙した順にサイズが大きくなります。デフォルト値はmd です。 |
# アイコン、テキスト、スパンのサイズ
Flex Messageのアイコン、テキスト、スパンのコンポーネントでは、size
プロパティを以下の単位で指定できます。これらのコンポーネントでは、size
プロパティはパーセンテージでは指定できません。
単位 | 説明 |
---|---|
ピクセル | 0より大きい整数または小数をpx で指定します。例:50px 、23.5px 。 |
キーワード | xxs 、xs 、sm 、md 、lg 、xl 、xxl 、3xl 、4xl 、5xl のいずれかの値を指定できます。列挙した順にサイズが大きくなります。デフォルト値はmd です。 |
各コンポーネントのJSONオブジェクトの書き方については、『Messaging APIリファレンス』の「Flex Message」を参照してください。
# その他のコンポーネントのサイズ
ボタンや画像などのコンポーネントでは、flex
プロパティとは異なるプロパティでサイズを指定できます。JSONスキーマについて詳しくは、『Messaging APIリファレンス』の「Flex Message」を参照してください。
# フォントサイズの自動縮小
Flex Messageのボタン、テキストのコンポーネントでは、adjustMode
プロパティでshrink-to-fit
を指定すると、テキストのフォントサイズが自動縮小されます。 adjustMode
プロパティはベストエフォートで機能しますので、プラットフォームによって動作が異なる、あるいは動作しないことがあります。
# コンポーネントの位置
ボックス内に余白がある場合、水平方向と垂直方向の位置合わせをコンポーネントごとに指定できます。
# 水平方向の位置合わせ
水平方向の位置合わせ方式をalign
プロパティで指定できます。 align
プロパティは親要素のボックスに関係なく、常に水平方向(左右)の位置に影響します。以下のいずれかの値を指定します。
start
:左揃えend
:右揃えcenter
:中央揃え(デフォルト値)
上のFlex Messageを表現するには以下のような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
:中央揃え
ベースラインボックスの子要素ではこの設定は無視されます。
上のFlex Messageを表現するには以下のような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": "separator",
"color": "#ff0000"
},
{
"type": "text",
"text": "center",
"gravity": "center"
},
{
"type": "separator",
"color": "#ff0000"
},
{
"type": "text",
"text": "bottom",
"gravity": "bottom"
},
{
"type": "separator",
"color": "#ff0000"
}
]
}
}
# ボックスのパディング
ボックスのパディングは、paddingAll
、paddingTop
、paddingBottom
、paddingStart
、paddingEnd
プロパティで指定します。ボックスのパディングは、ボックスの境界線と、子要素の間の余白のサイズを表します。サイズには、%(ボックスの横幅を基準にした割合)、ピクセル、またはnone
、xs
、sm
、md
、lg
、xl
、xxl
のいずれかの値を指定できます。none
ではスペースが設定されず、それ以外は列挙した順にサイズが大きくなります。
なお、paddingAll
のほかに、paddingTop
、paddingBottom
、paddingStart
、paddingEnd
も設定すると、paddingAll
の設定が上書きされます。
上のFlex Messageを表現するには以下のような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"
}
}
なお、上のFlex Messageのテキストを変更すると、以下のようにレイアウトされます。
# ボックスの子要素と余白の配置
Flex Messageのボックスコンポーネントでは、子要素と余白の配置を以下のプロパティで指定できます。
justifyContent
プロパティは主軸に、alignItems
プロパティは交差軸に沿った子要素の配置を指定します。親要素のボックスによって、主軸と交差軸の向きは変わってきます。
一方で書字方向(LTR
またはRTL
)は、親要素のボックスに関係なく常に水平の向きにのみ影響を及ぼす、という点に注意が必要です。
# 主軸に沿った配置を指定するjustifyContent
プロパティ
justifyContent
プロパティでは、子要素と余白の主軸に沿った配置を指定します。親要素が水平ボックスの場合、主軸の向きは水平です。親要素が垂直ボックスの場合、主軸の向きは垂直です。
flex-start
:水平ボックスでは子要素を書字方向の始まり側に寄せます。垂直ボックスではボックスの上に寄せます。center
:子要素をボックスの中心にまとめて配置します。flex-end
:水平ボックスでは子要素を書字方向の終わり側に寄せます。垂直ボックスではボックスの下に寄せます。space-between
:子要素をボックスに均等に配置します。最初と最後の子要素は両端に配置します。余白は子要素と子要素の間に均等に配置されます。space-around
:子要素をボックスに均等に配置します。余白はすべての子要素の左右に半分ずつ配置されます。space-evenly
:子要素をボックスに均等に配置します。余白はすべての子要素の左右に均等に配置されます。
- 親要素のボックスコンポーネントが水平ボックスである。
- 書字方向がLTRである。
たとえば上記のflex-start
のFlex Messageを表現するには、以下のようなJSONデータを指定します。
{
"type": "bubble",
"direction": "ltr",
"body": {
"type": "box",
"layout": "horizontal",
"contents": [
{
"type": "box",
"layout": "vertical",
"contents": [],
"width": "40px",
"height": "30px",
"backgroundColor": "#00aaff",
"flex": 0
},
{
"type": "box",
"layout": "vertical",
"contents": [],
"width": "20px",
"height": "30px",
"backgroundColor": "#00aaff",
"flex": 0
},
{
"type": "box",
"layout": "vertical",
"contents": [],
"height": "30px",
"width": "50px",
"backgroundColor": "#00aaff",
"flex": 0
}
],
"justifyContent": "flex-start",
"spacing": "5px"
}
}
justifyContent
プロパティを用いた、主軸に沿った配置の指定は、親のボックス内に余白がある場合のみ動作します。子要素のflex
プロパティが0より大きい場合、子要素が親のボックスに合わせて自動的に伸縮して余白が存在しなくなるため、親要素でjustifyContent
プロパティを指定しても余白は配置されません。親が水平ボックスの場合、子要素でflex
プロパティを指定しないと、デフォルトが1になっているため注意が必要です。
# 交差軸に沿った配置を指定するalignItems
プロパティ
alignItems
プロパティでは、子要素と余白の交差軸に沿った配置を指定します。親要素が水平ボックスの場合、交差軸の向きは垂直です。親要素が垂直ボックスの場合、交差軸の向きは水平です。
flex-start
:水平ボックスでは子要素をボックスの上に寄せます。垂直ボックスでは書字方向の始まり側に寄せます。center
:子要素をボックスの中心にまとめて配置します。flex-end
:水平ボックスでは子要素をボックスの下に寄せます。垂直ボックスでは書字方向の終わり側に寄せます。
- 親要素のボックスコンポーネントが水平ボックスである。
- 書字方向がLTRである。(水平ボックスの場合は影響なし)
たとえば上記のflex-start
のFlex Messageを表現するには、以下のようなJSONデータを指定します。
{
"type": "bubble",
"direction": "ltr",
"body": {
"type": "box",
"layout": "horizontal",
"contents": [
{
"type": "box",
"layout": "vertical",
"contents": [],
"height": "100px",
"backgroundColor": "#00aaff",
"flex": 0,
"width": "85px"
},
{
"type": "box",
"layout": "vertical",
"contents": [],
"height": "30px",
"backgroundColor": "#00aaff",
"flex": 0,
"width": "85px"
},
{
"type": "box",
"layout": "vertical",
"contents": [],
"height": "60px",
"backgroundColor": "#00aaff",
"flex": 0,
"width": "85px"
}
],
"spacing": "5px",
"alignItems": "flex-start",
"height": "200px"
}
}
# ボックスのspacing
プロパティ
コンポーネント間の最小スペースは、コンポーネントを含むボックス(親要素)のspacing
プロパティで指定します。 spacing
プロパティは以下の単位で指定できます。 spacing
プロパティはパーセンテージでは指定できません。
単位 | 説明 |
---|---|
ピクセル | 0より大きい整数または小数をpx で指定します。例:50px 、23.5px 。 |
キーワード | none 、 xs 、 sm 、 md 、 lg 、 xl 、 xxl のいずれかの値を指定できます。none ではスペースが設定されず、それ以外は列挙した順にサイズが大きくなります。 |
以下のFlex Messageには、水平ボックスに3つの垂直ボックスが等間隔(md
)で配置されています。
上のFlex Messageを表現するには以下のような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
プロパティはパーセンテージでは指定できません。
単位 | 説明 |
---|---|
ピクセル | 0より大きい整数または小数をpx で指定します。例:50px 、23.5px 。 |
キーワード | none 、 xs 、 sm 、 md 、 lg 、 xl 、 xxl のいずれかの値を指定できます。none ではスペースが設定されず、それ以外は列挙した順にサイズが大きくなります。 |
margin
プロパティは、ボックスのspacing
プロパティより優先されます。また、ボックス内の先頭にあるコンポーネントでmargin
プロパティを指定した場合、コンポーネントの手前にスペースが入ります。
以下のFlex Messageには、水平ボックスに3つの垂直ボックスが配置されています。水平ボックスのspacing
プロパティがmd
に、3番目の垂直ボックスのmargin
プロパティがxxl
に設定されています。
上のFlex Messageを表現するには以下のような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
のいずれかの値を指定できます。
ここでは、オフセットの効果を説明するために、以下のFlex Messageを基準にして、「TARGET」と表示されている水平ボックスの設定を変更して説明します。
上のFlex Messageを表現するには以下のようなJSONデータを指定します。
{
"type": "bubble",
"direction": "ltr",
"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 (opens new window)」と同様の考えかたで位置を決定できます。
プロパティ | 説明 | |
---|---|---|
offsetTop | 通常の位置に対して要素の上端が移動する量を指定します。 | |
offsetBottom | 通常の位置に対して要素の下端が移動する量を指定します。 | |
offsetStart | バブルの書字方向がLTRの場合 | 通常の位置に対して要素の左端が移動する量を指定します。 |
バブルの書字方向がRTLの場合 | 通常の位置に対して要素の右端が移動する量を指定します。 | |
offsetEnd | バブルの書字方向がLTRの場合 | 通常の位置に対して要素の右端が移動する量を指定します。 |
バブルの書字方向がRTLの場合 | 通常の位置に対して要素の左端が移動する量を指定します。 |
ここで、「TARGET」と表示されている水平ボックスの設定を以下のように変更した例を紹介します。
プロパティ | 値 |
---|---|
position | relative |
offsetTop | 10px |
offsetBottom | - |
offsetStart | 40px |
offsetEnd | - |
1つ目のバブルは設定変更前、2つ目のバブルは設定変更後です。
上の2番目のFlex Messageを表現するには以下のようなJSONデータを指定します。
{
"type": "bubble",
"direction": "ltr",
"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",
"offsetTop": "10px",
"offsetStart": "40px",
"position": "relative"
}
]
}
}
# position
プロパティがabsolute
の場合
コンポーネントを、親要素の外枠を基準に配置するには、position
プロパティにabsolute
を指定して、以下のオフセットプロパティを指定します。CSS Positioned Layout Module Level 3の「Absolute positioning (opens new window)」と同様の方法でレイアウトできます。
プロパティ | 説明 | |
---|---|---|
offsetTop | 親要素の上端からコンポーネントの上端までの相対位置を指定します。 | |
offsetBottom | 親要素の下端からコンポーネントの下端までの相対位置を指定します。 | |
offsetStart | バブルの書字方向がLTRの場合 | 親要素の左端からコンポーネントの左端までの相対位置を指定します。 |
バブルの書字方向がRTLの場合 | 親要素の右端からコンポーネントの右端までの相対位置を指定します。 | |
offsetEnd | バブルの書字方向がLTRの場合 | 親要素の右端からコンポーネントの右端までの相対位置を指定します。 |
バブルの書字方向がRTLの場合 | 親要素の左端からコンポーネントの左端までの相対位置を指定します。 |
オフセットプロパティを指定しない場合のコンポーネントの位置は、端末によって異なる可能性があります。そのため、縦方向(offsetTop
またはoffsetBottom
)および横方向(offsetStart
またはoffsetEnd
)のオフセットプロパティを明示的に指定することを推奨します。
ここで、「TARGET」と表示されている水平ボックスの設定を以下のように変更した例を紹介します。
プロパティ | 値 |
---|---|
position | absolute |
offsetTop | 10px |
offsetBottom | 20px |
offsetStart | 40px |
offsetEnd | 80px |
1つ目のバブルは設定変更前、2つ目のバブルは設定変更後です。
上の2番目のFlex Messageを表現するには以下のようなJSONデータを指定します。
{
"type": "bubble",
"direction": "ltr",
"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": "absolute",
"offsetStart": "40px",
"offsetEnd": "80px",
"offsetTop": "10px",
"offsetBottom": "20px"
}
]
}
}
# 親要素とコンポーネントの大きさについて
position
プロパティにabsolute
を指定したボックスは、親要素の大きさに影響を与えなくなり、さらに親要素の影響を受けなくなります。そのため、親要素よりも大きいコンポーネントの場合は、コンポーネントの一部が表示されません。また、親要素(余白)の影響で大きくなっていた場合は、元の大きさに戻ります。
ここで、「REFERENCE BOX」と表示されている水平ボックスの設定を以下のように変更した例を紹介します。
プロパティ | 値 |
---|---|
position | absolute |
1つ目のバブルは設定変更前、2つ目のバブルは設定変更後です。
「REFERENCE BOX」の大きさは、親要素(垂直ボックス)の大きさに影響を与えなくなり、さらに親要素の影響を受けなくなります。そのため、親要素よりも大きい部分(「2」と「3」の行)は表示されていません。また、親要素(余白)の影響で大きくなっていた左右の余白部分は、元の大きさ(テキスト「REFERENCE BOX」の幅)に戻ります。
# 線形グラデーション背景
Flex Messageのボックスコンポーネントでは、background.type
プロパティにlinearGradient
を指定することで、背景を線形グラデーションにできます。
グラデーションの方向は、親要素の書字方向(LTR
またはRTL
)の影響を受けません。
# 線形グラデーション背景の角度
線形グラデーションの勾配の角度は、0度以上、360度未満の範囲で、90度なら90deg
、23.5度なら23.5deg
のように整数または小数で指定します。 0deg
は下から上、45deg
は左下から右上、90deg
は左から右、180deg
は上から下のように数字が増えると時計回りで角度が変わります。
0度(下から上)の線形グラデーション
上のFlex Messageを表現するには以下のようなJSONデータを指定します。
{ "type": "bubble", "body": { "type": "box", "layout": "vertical", "contents": [], "background": { "type": "linearGradient", "angle": "0deg", "startColor": "#ff0000", "endColor": "#0000ff" }, "height": "200px" } }
45度(左下から右上)の線形グラデーション
90度(左から右)の線形グラデーション
180度(上から下)の線形グラデーション
詳しくは、『Messaging APIリファレンス』の「ボックス」コンポーネントを参照してください。
# グラデーションの中間色
centerColor
プロパティでグラデーションの中間色を指定すると、3色のグラデーションになります。 centerPosition
プロパティで中間色の位置を指定できます。
開始点から10%の位置に中間色を置いた場合
上のFlex Messageを表現するには以下のようなJSONデータを指定します。
{ "type": "bubble", "body": { "type": "box", "layout": "vertical", "contents": [], "background": { "type": "linearGradient", "angle": "0deg", "startColor": "#ff0000", "centerColor": "#0000ff", "endColor": "#00ff00", "centerPosition": "10%" }, "height": "200px" } }
開始点から50%の位置に中間色を置いた場合
開始点から90%の位置に中間色を置いた場合
# 描画順序について
JSONデータの順に、コンポーネントが描画されます。つまり、JSONデータの最初に書いたコンポーネントが最背面に描画され、最後に書いたコンポーネントがバブルの最前面に描画されます。
描画順序を変更するには、JSONデータに書く順序を変更してください。
# 関連ページ
- Flex Messageを送信する
- Flex Messageの要素
- Flex Message(Messaging APIリファレンス)