日本語

# Flex Messageの要素

Flex Messageは、コンテナ、ブロック（ヘッダー、ヒーロー、ボディ、フッター）、コンポーネントの3層のデータ構造から構成されます。ここでは、Flex Messageを構成する要素について例を挙げて説明します。

Flex Messageの構造

# コンテナ

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

タイプ 説明
バブル 単体のメッセージバブルを表示するコンテナ
カルーセル 複数のメッセージバブルを横に並べて表示するコンテナ

# バブル

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

バブルの例

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

カルーセルは、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スキーマについて詳しくは、『Messaging APIリファレンス』の「カルーセル」を参照してください。

# ブロック

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

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

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

ブロックスタイルの例

上の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"
      }
    ]
  }
}

JSONスキーマについて詳しくは、『Messaging APIリファレンス』の「バブル」のheaderプロパティ、heroプロパティ、bodyプロパティ、footerプロパティを参照してください。

# コンポーネント

コンポーネントは、ブロックを構成する要素です。以下のタイプのコンポーネントを利用できます。

タイプ 説明
ボックス コンポーネントのレイアウトを定義するコンポーネント
ボタン ボタンを表すコンポーネント。ユーザーがタップすると、指定したアクションが実行されます。
画像 画像を描画するコンポーネント
動画 動画を描画するコンポーネント
アイコン アイコンを描画するコンポーネント
テキスト 1行の文字列を描画するコンポーネント。色、サイズ、および太さを指定できます。
スパン 1行に、デザインが異なる複数の文字列を描画するコンポーネント。色、サイズ、太さ、および装飾を指定できます。
セパレータ 分割線を描画するコンポーネント
フィラー（非推奨） スペースを作るためのコンポーネント

# ボックス

メッセージのレイアウトを定義するためのコンポーネントです。

他のコンポーネント（ボックス、ボタン、画像など）を含めることができます。ボックスに含めたコンポーネント（子要素）は、ボックスのプロパティと、子要素のプロパティに従ってレイアウトされます。レイアウトについて詳しくは、「Flex Messageのレイアウト」を参照してください。

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

# ボタン

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

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

ボタンには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スキーマについて詳しくは、『Messaging APIリファレンス』の「ボタン」を参照してください。

# 画像

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

画像の例

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

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

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

# 動画

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

動画の例

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

{
  "type": "bubble",
  "size": "mega",
  "hero": {
    "type": "video",
    "url": "https://example.com/video.mp4",
    "previewUrl": "https://example.com/video_preview.jpg",
    "altContent": {
      "type": "image",
      "size": "full",
      "aspectRatio": "20:13",
      "aspectMode": "cover",
      "url": "https://example.com/image.jpg"
    },
    "aspectRatio": "20:13"
  }
}

動画について詳しくは、「動画を含むFlex Messageを作成する」と『Messaging 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スキーマについて詳しくは、『Messaging APIリファレンス』の「アイコン」を参照してください。

# テキスト

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

テキストの例

上の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"
      }
    ]
  }
}

# テキストを折り返す

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

折り返しなしの例

上の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）を使って改行できます。

折り返しありの例

注意

テキストの最後に改行文字（\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
      }
    ]
  }
}
# テキスト内の行間を広げる

折り返したテキストにlineSpacingプロパティを指定すると、テキスト内の行間を広げることができます。

テキスト内の行間を広げた例

上の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,
        "lineSpacing": "20px"
      }
    ]
  }
}
lineSpacingプロパティは開始行の上部と最終行の下部には適用されません

lineSpacingプロパティは、テキスト内の行間にのみ適用されます。そのため、開始行の上部と最終行の下部には適用されません。

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

# スパン

1行に、デザインが異なる複数の文字列を描画するコンポーネントです。色、サイズ、太さ、および装飾を指定できます。スパンは、テキストのcontentsプロパティに設定します。

スパンの例

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

{
  "type": "bubble",
  "body": {
    "type": "box",
    "layout": "horizontal",
    "contents": [
      {
        "type": "text",
        "text": "hello, world",
        "contents": [
          {
            "type": "span",
            "text": "Hello, world!",
            "decoration": "line-through"
          },
          {
            "type": "span",
            "text": "\nClosing",
            "color": "#ff0000",
            "size": "sm",
            "weight": "bold",
            "decoration": "none"
          },
          {
            "type": "span",
            "text": " "
          },
          {
            "type": "span",
            "text": "the",
            "size": "lg",
            "color": "#00ff00",
            "decoration": "underline",
            "weight": "bold"
          },
          {
            "type": "span",
            "text": " "
          },
          {
            "type": "span",
            "text": "distance",
            "color": "#0000ff",
            "weight": "bold",
            "size": "xxl"
          }
        ],
        "wrap": true,
        "align": "center"
      }
    ]
  }
}

JSONスキーマについて詳しくは、『Messaging APIリファレンス』の「スパン」を参照してください。

# セパレータ

ボックス内に分割線を描画するコンポーネントです。水平ボックスに含めた場合は垂直線、垂直ボックスに含めた場合は水平線が描画されます。

セパレータの例

上の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"
          }
        ]
      }
    ]
  }
}

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

# フィラー

フィラーは非推奨のコンポーネントです

コンポーネントのサイズや位置の調整には、フィラーの代わりに各コンポーネントのプロパティを使用してください。詳しくは、「コンポーネントの位置」を参照してください。

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

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

フィラーの例

上の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"
      }
    ]
  }
}

フィラーについて詳しくは、『Messaging APIリファレンス』の「フィラー」を参照してください。