Flex Messageのレイアウト

Flex Messageのボックスコンポーネントの子要素は、ボックスコンポーネントと子要素のプロパティで指定された方式に従って配置されます。

ここでは、配置形式を決定するプロパティや、子要素のサイズと配置スタイルを調整する方法について説明します。

ボックスレイアウトの種類

ボックス内でコンポーネントを配置する方式は3つあり、layoutプロパティで指定します。

layoutプロパティの値 説明
horizontal コンポーネントを書字方向に従って水平に配置します。このレイアウト方式が指定されたボックスを水平ボックスと呼びます。書字方向については「書字方向を定義する」を参照してください。
vertical コンポーネントを上から下へ垂直に配置します。このレイアウト方式が指定されたボックスを垂直ボックスと呼びます。
baseline horizontalを指定した場合と同様にコンポーネントを配置します。このレイアウト方式が指定されたボックスをベースラインボックスと呼びます。特別な記載がない限り、水平ボックスの説明はベースラインボックスにも当てはまります。

ベースラインボックスの特徴

ベースラインボックスは、垂直方向の揃え位置がテキストコンポーネントのベースラインに固定される特別な水平ボックスです。さまざまなフォントサイズのテキストが混在しても、ベースラインが揃うように垂直位置が調整されます。

なお、アイコンコンポーネントはベースラインボックスにのみ配置できます。アイコンコンポーネントのベースラインはアイコン画像の底辺です。

ベースラインボックス

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

水平ボックス内のコンポーネントの幅と垂直ボックス内のコンポーネントの高さは、各コンポーネントのflexプロパティで決定されます。水平ボックスと垂直ボックスでflexプロパティの効果が異なる点に注意してください。

水平ボックス内のコンポーネントの幅

水平ボックス内のコンポーネントの幅はflexプロパティで指定します。

flexプロパティに1以上の値を指定した場合、ボックスの幅のうち、そのコンポーネントが占める幅の比率を表します。

たとえば、幅が100の水平ボックスに2つのコンポーネントがありflexプロパティの値が23であるとき、それぞれの幅は40と60になります。

flexプロパティの例1

上の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プロパティの値は023になっています。1番目のコンポーネントはflexプロパティの値が0であるため、含まれるテキスト「Hello」を表示できる幅が確保されます。そして、ボックスの幅から1番目のコンポーネントの幅を除いた空間が2:3に分割され、2番目、3番目のコンポーネントに割り当てられます。

flexプロパティの例2

上の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プロパティを指定して余白を各コンポーネントに分配できます。

以下のFlex Messageを例に説明します。左右どちらのバブルも、右半分に2つのテキストコンポーネントを含むボックスを持ちます。テキストコンポーネントはセパレータコンポーネントで分割されています。

左のバブルでは、2つのテキストコンポーネントのflexプロパティの値はどちらもデフォルトの0です。この場合、テキストコンポーネントはそれら自体の高さで表示され、残りの部分に余白が表示されます。

右のバブルでは、2つのテキストコンポーネントのflexプロパティの値は1です。この場合、余白は1:1に分割され、各テキストコンポーネントに分配されます。さらに、gravityプロパティをcenterに設定することで、テキストを垂直方向の中央揃えに配置しています。

flexプロパティの例3

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

{
  "type": "bubble",
  "body": {
    "type": "box",
    "layout": "horizontal",
    "contents": [
      {
        "type": "box",
        "layout": "vertical",
        "contents": [
          {
            "type": "image",
            "url": "https://example.com/flex/images/gray.jpg",
            "aspectRatio": "1:2"
          }
        ]
      },
      {
        "type": "box",
        "layout": "vertical",
        "contents": [
          {
            "type": "text",
            "text": "flex=1",
            "flex": 1,
            "gravity": "center"
          },
          {
            "type": "separator"
          },
          {
            "type": "text",
            "text": "flex=1",
            "flex": 1,
            "gravity": "center"
          }
        ]
      }
    ]
  }
}

コンポーネントの配置スタイル

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

水平方向の配置スタイル

水平方向の配置スタイルはalignプロパティで指定します。

alignプロパティの例

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

{
  "type": "bubble",
  "body": {
    "type": "box",
    "layout": "vertical",
    "contents": [
      {
        "type": "image",
        "url": "https://example.com/flex/images/image.jpg",
        "align": "start"
      },
      {
        "type": "image",
        "url": "https://example.com/flex/images/image.jpg",
        "align": "center"
      },
      {
        "type": "image",
        "url": "https://example.com/flex/images/image.jpg",
        "align": "end"
      }
    ]
  }
}

垂直方向の配置スタイル

垂直方向の配置スタイルはgravityプロパティで指定します。ただし、ベースラインボックスではこの設定は無視されます。

gravityプロパティの例

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

{
  "type": "bubble",
  "body": {
    "type": "box",
    "layout": "horizontal",
    "contents": [
      {
        "type": "image",
        "url": "https://example.com/flex/images/image.jpg"
      },
      {
        "type": "text",
        "text": "top",
        "gravity": "top"
      },
      {
        "type": "text",
        "text": "center",
        "gravity": "center"
      },
      {
        "type": "text",
        "text": "bottom",
        "gravity": "bottom"
      }
    ]
  }
}

コンポーネントの間隔

spacingプロパティ

ボックス内のコンポーネントの間の最小スペースは、ボックスコンポーネントのspacingプロパティで指定します。

以下のFlex Messageには、ボックスコンポーネントに3つの画像コンポーネントが等間隔で配置されています。

spacingプロパティの例

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

{
  "type": "bubble",
  "body": {
    "type": "box",
    "layout": "horizontal",
    "spacing": "md",
    "contents": [
      {
        "type": "image",
        "url": "https://example.com/flex/images/image.jpg"
      },
      {
        "type": "image",
        "url": "https://example.com/flex/images/image.jpg"
      },
      {
        "type": "image",
        "url": "https://example.com/flex/images/image.jpg"
      }
    ]
  }
}

marginプロパティ

コンポーネントにmarginプロパティを設定すると、そのコンポーネントとその前のコンポーネントの間の最小スペースを指定できます。

marginプロパティは、親ボックスのspacingプロパティより優先されます。

以下のFlex Messageには、ボックスコンポーネントに3つの画像コンポーネントが配置されています。ボックスコンポーネントのspacingプロパティがxsに、3番目の画像コンポーネントのmarginプロパティがxlに設定されているため、1番目と2番目の画像コンポーネントの間のスペースは狭く、2番目と3番目の画像コンポーネントの間のスペースは広くなっています。

marginプロパティの例

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

{
  "type": "bubble",
  "body": {
    "type": "box",
    "layout": "horizontal",
    "spacing": "xs",
    "contents": [
      {
        "type": "image",
        "url": "https://example.com/flex/images/image.jpg"
      },
      {
        "type": "image",
        "url": "https://example.com/flex/images/image.jpg"
      },
      {
        "type": "image",
        "url": "https://example.com/flex/images/image.jpg",
        "margin": "xl"
      }
    ]
  }
}

関連ページ