Flex Messageの要素

ここでは、Flex Messageの要素について例を挙げて説明します。

Flex Messageには以下のタイプの構成要素があります。

コンテナ

コンテナはFlex Messageの最上位の構造です。以下のタイプのコンテナを利用できます。

バブル

バブルは1つのメッセージバブルを構成するコンテナです。

バブルの例

バブルコンテナのJSONスキーマについて詳しくは、『APIリファレンス』の「バブルコンテナ」を参照してください。

書字方向を定義する

テキストの書字方向および水平ボックス内のコンポーネントの並び順は、バブルコンテナのdirectionプロパティで指定します。

directionプロパティの値 コンポーネントの配置方向 文字列の扱い
ltr 左から右 左横書き
rtl 右から左 右横書き

カルーセル

カルーセルは子要素として1つ以上のバブルを持つコンテナです。カルーセル内のバブルは横にスクロールして順番に表示できます。

バブルコンテナにボディブロックがある場合は、そのバブルコンテナがカルーセルで最大の高さを持つバブルコンテナと同じ高さになるように、ボディブロックが伸長します。

カルーセルの例

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

{
  "type": "carousel",
  "contents": [
    {
      "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
          }
        ]
      },
      "footer": {
        "type": "box",
        "layout": "horizontal",
        "contents": [
          {
            "type": "button",
            "style": "primary",
            "action": {
              "type": "uri",
              "label": "Go",
              "uri": "https://example.com"
            }
          }
        ]
      }
    },
    {
      "type": "bubble",
      "body": {
        "type": "box",
        "layout": "horizontal",
        "contents": [
          {
            "type": "text",
            "text": "Hello, World!",
            "wrap": true
          }
        ]
      },
      "footer": {
        "type": "box",
        "layout": "horizontal",
        "contents": [
          {
            "type": "button",
            "style": "primary",
            "action": {
              "type": "uri",
              "label": "Go",
              "uri": "https://example.com"
            }
          }
        ]
      }
    }
  ]
}

カルーセルコンテナのJSONスキーマについて詳しくは、『APIリファレンス』の「カルーセルコンテナ」を参照してください。

ブロック

ブロックはバブルコンテナを構成する構造です。以下のタイプのブロックを利用できます。

タイプ 説明
ヘッダー メッセージの件名や見出しを表示するブロック。ボックスコンポーネントを配置します。
ヒーロー 主要な画像コンテンツを表示するブロック。画像コンポーネントを配置します。
ボディ 主要なメッセージコンテンツを表示するブロック。ボックスコンポーネントを配置します。
フッター ボタンや補足情報を表示するブロック。ボックスコンポーネントを配置します。

どのブロックもバブルコンテナ内で1つだけ指定可能で、省略することもできます。ヘッダー、ヒーロー、ボディ、フッターの順に上から表示されます。

ブロックの例

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

{
  "type": "bubble",
  "header": {
    "type": "box",
    "layout": "vertical",
    "contents": [
      {
        "type": "text",
        "text": "header"
      }
    ]
  },
  "hero": {
    "type": "image",
    "url": "https://example.com/flex/images/image.jpg",
    "size": "full",
    "aspectRatio": "2:1"
  },
  "body": {
    "type": "box",
    "layout": "vertical",
    "contents": [
      {
        "type": "text",
        "text": "body"
      }
    ]
  },
  "footer": {
    "type": "box",
    "layout": "vertical",
    "contents": [
      {
        "type": "text",
        "text": "footer"
      }
    ]
  }
}

ブロックのJSONスキーマについて詳しくは、『APIリファレンス』の「バブルコンテナ」を参照してください。

ブロックのスタイルを定義する

各ブロックのスタイルは、バブルコンテナのstylesプロパティを使ってカスタマイズできます。

カスタマイズできる項目は、ブロックの間にセパレータを表示するかどうかと、ブロックの背景色です。

ブロックスタイルの例

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

{
  "type": "bubble",
  "styles": {
    "header": {
      "backgroundColor": "#ffaaaa"
    },
    "body": {
      "backgroundColor": "#aaffaa"
    },
    "footer": {
      "backgroundColor": "#aaaaff"
    }
  },
  "header": {
    "type": "box",
    "layout": "vertical",
    "contents": [
      {
        "type": "text",
        "text": "header"
      }
    ]
  },
  "hero": {
    "type": "image",
    "url": "https://example.com/flex/images/image.jpg",
    "size": "full",
    "aspectRatio": "2:1"
  },
  "body": {
    "type": "box",
    "layout": "vertical",
    "contents": [
      {
        "type": "text",
        "text": "body"
      }
    ]
  },
  "footer": {
    "type": "box",
    "layout": "vertical",
    "contents": [
      {
        "type": "text",
        "text": "footer"
      }
    ]
  }
}

stylesプロパティについて詳しくは、『APIリファレンス』の「バブルコンテナ」を参照してください。

コンポーネント

コンポーネントはFlex Messageのブロックを構成するオブジェクトです。以下のタイプのコンポーネントを利用できます。

ボックス

メッセージのレイアウトを定義するコンポーネントで、子要素として他のコンポーネントやボックスを含むことができます。

子要素はボックスコンポーネントのプロパティで指定された方式に従って配置されます。子要素の配置について詳しくは、「Flex Messageのレイアウト」を参照してください。

ボタン

ボタンを描画するコンポーネントです。

ユーザーがタップするとアクションが実行されます。指定できるアクションについては、「アクション」を参照してください。

ボタンコンポーネントには3つのスタイルがあり、それぞれ色を変更できます。

ボタンの例

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

{
  "type": "bubble",
  "body": {
    "type": "box",
    "layout": "vertical",
    "spacing": "md",
    "contents": [
      {
        "type": "button",
        "style": "primary",
        "action": {
          "type": "uri",
          "label": "Primary style button",
          "uri": "https://example.com"
        }
      },
      {
        "type": "button",
        "style": "secondary",
        "action": {
          "type": "uri",
          "label": "Secondary style button",
          "uri": "https://example.com"
        }
      },
      {
        "type": "button",
        "style": "link",
        "action": {
          "type": "uri",
          "label": "Link style button",
          "uri": "https://example.com"
        }
      }
    ]
  }
}

ボタンコンポーネントのJSONスキーマについて詳しくは、『APIリファレンス』の「ボタンコンポーネント」を参照してください。

フィラー

ボックス内のコンポーネント位置を調整するために使用する不可視のコンポーネントです。

ボックス内の任意の位置に挿入することで、コンポーネントの間に空間を作ったり、他のコンポーネントを一方向に寄せたりできます。

フィラーのflexプロパティの値は、1に固定されます。これを利用して、空間の幅または高さを相対的に調整できます。

以下の例では、画像の間に空間を作るためにフィラーを挿入しています。

フィラーの例

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

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

フィラーコンポーネントのJSONスキーマについて詳しくは、『APIリファレンス』の「フィラーコンポーネント」を参照してください。

アイコン

隣接するテキストを装飾するアイコンを描画するコンポーネントです。

ベースラインボックス内でのみ使用できます。

アイコンの例

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

{
  "type": "bubble",
  "body": {
    "type": "box",
    "layout": "vertical",
    "contents": [
      {
        "type": "box",
        "layout": "baseline",
        "contents": [
          {
            "type": "icon",
            "url": "https://example.com/flex/images/icon.png",
            "size": "md"
          },
          {
            "type": "text",
            "text": "The quick brown fox jumps over the lazy dog",
            "size": "md"
          }
        ]
      },
      {
        "type": "box",
        "layout": "baseline",
        "contents": [
          {
            "type": "icon",
            "url": "https://example.com/flex/images/icon.png",
            "size": "lg"
          },
          {
            "type": "text",
            "text": "The quick brown fox jumps over the lazy dog",
            "size": "lg"
          }
        ]
      },
      {
        "type": "box",
        "layout": "baseline",
        "contents": [
          {
            "type": "icon",
            "url": "https://example.com/flex/images/icon.png",
            "size": "xl"
          },
          {
            "type": "text",
            "text": "The quick brown fox jumps over the lazy dog",
            "size": "xl"
          }
        ]
      },
      {
        "type": "box",
        "layout": "baseline",
        "contents": [
          {
            "type": "icon",
            "url": "https://example.com/flex/images/icon.png",
            "size": "xxl"
          },
          {
            "type": "text",
            "text": "The quick brown fox jumps over the lazy dog",
            "size": "xxl"
          }
        ]
      },
      {
        "type": "box",
        "layout": "baseline",
        "contents": [
          {
            "type": "icon",
            "url": "https://example.com/flex/images/icon.png",
            "size": "3xl"
          },
          {
            "type": "text",
            "text": "The quick brown fox jumps over the lazy dog",
            "size": "3xl"
          }
        ]
      }
    ]
  }
}

アイコンコンポーネントのJSONスキーマについて詳しくは、『APIリファレンス』の「アイコンコンポーネント」を参照してください。

画像

画像を描画するコンポーネントです。JPEGまたはPNGの画像を指定できます。

画像の例

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

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

画像コンポーネントのJSONスキーマについて詳しくは、『APIリファレンス』の「画像コンポーネント」を参照してください。

画像のサイズを指定する

アスペクト比

sizeプロパティで画像の最大の幅を指定し、aspectRatioプロパティで画像のアスペクト比(横:縦の比率)を指定します。sizeプロパティとaspectRatioプロパティから決定される矩形の領域を、描画領域と呼びます。

画像のアスペクト比とaspectRatioプロパティで指定されるアスペクト比が一致しない場合、aspectModeプロパティに基づいて画像がスケールされます。次の「表示形式」を参照してください。

表示形式

aspectModeプロパティで、画像の表示形式を指定します。

  • aspectMode=coverの場合:描画領域全体に画像を表示します。描画領域に収まらない部分は切り詰められます。
  • aspectMode=fitの場合:描画領域に画像全体を表示します。縦長の画像では左右に、横長の画像では上下に背景が表示されます。
画像の幅と画像コンポーネントの幅

sizeプロパティで指定された画像の幅がflexプロパティによって算出されたコンポーネントの幅よりも広い場合、描画領域の幅はコンポーネントの幅に縮小されます。

セパレータ

ボックス内に境界線を描画するコンポーネントです。水平ボックスでは垂直線、垂直ボックスでは水平線が描画されます。

セパレータの例

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

{
  "type": "bubble",
  "body": {
    "type": "box",
    "layout": "vertical",
    "spacing": "md",
    "contents": [
      {
        "type": "box",
        "layout": "horizontal",
        "spacing": "md",
        "contents": [
          {
            "type": "text",
            "text": "orange"
          },
          {
            "type": "separator"
          },
          {
            "type": "text",
            "text": "apple"
          }
        ]
      },
      {
        "type": "separator"
      },
      {
        "type": "box",
        "layout": "horizontal",
        "spacing": "md",
        "contents": [
          {
            "type": "text",
            "text": "grape"
          },
          {
            "type": "separator"
          },
          {
            "type": "text",
            "text": "lemon"
          }
        ]
      }
    ]
  }
}

セパレータコンポーネントについて詳しくは、『APIリファレンス』の「セパレータコンポーネント」を参照してください。

スペーサー

ボックス内の先頭または末尾に固定サイズのスペースを配置する不可視のコンポーネントです。ブロックの前後のスペースを拡張するために使用します。

ヒント:コンポーネントの間隔を調整するにはspacingプロパティおよびmarginプロパティを使用します。詳しくは、「コンポーネントの間隔」を参照してください。

以下の例では、スペーサーコンポーネントを使ってボディブロックとフッターブロックの間のスペースを拡張しています。

スペーサーの例

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

{
 "type": "bubble",
 "body": {
   "type": "box",
   "layout": "vertical",
   "contents": [
     {
       "type": "image",
       "url": "https://example.com/flex/images/image.jpg",
       "size": "full"
     }
   ]
 },
 "footer": {
   "type": "box",
   "layout": "vertical",
   "contents": [
     {
       "type": "spacer",
       "size": "xl"
     },
     {
       "type": "button",
       "action": {
         "type": "uri",
         "label": "Tap me",
         "uri": "https://example.com"
       },
       "style": "primary",
       "color": "#0000ff"
     }
   ]
 }
}

スペーサーコンポーネントについて詳しくは、『APIリファレンス』の「スペーサーコンポーネント」を参照してください。

テキスト

文字列を描画するコンポーネントです。色、サイズ、および、太さを指定できます。

テキストの例

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

{
  "type": "bubble",
  "body": {
    "type": "box",
    "layout": "vertical",
    "contents": [
      {
        "type": "text",
        "text": "Closing the distance",
        "size": "md",
        "align": "center",
        "color": "#ff0000"
      },
      {
        "type": "text",
        "text": "Closing the distance",
        "size": "lg",
        "align": "center",
        "color": "#00ff00"
      },
      {
        "type": "text",
        "text": "Closing the distance",
        "size": "xl",
        "align": "center",
        "weight": "bold",
        "color": "#0000ff"
      }
    ]
  }
}

テキストコンポーネントについて詳しくは、『APIリファレンス』の「テキストコンポーネント」を参照してください。

テキストを折り返す

デフォルトでは、テキストコンポーネントの幅を超える部分は省略記号に置き換えられます。

折り返しなしの例

上の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を指定すると、テキストコンポーネントの幅を超える部分は折り返して表示されます。また、改行文字(\n)を使って改行できます。

折り返しありの例

上の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\n tempor incididunt ut labore et dolore magna aliqua.",
        "wrap": true
      }
    ]
  }
}

関連ページ