# Flex Messageを送信する
Flex Messageは、レイアウトをカスタマイズできるメッセージです。CSS Flexible Box(CSS Flexbox) (opens new window)の基礎知識を使って、レイアウトを自由にカスタマイズできます。
FlexコンテナがFlex Messageのボックスに対応しています。また、FlexアイテムがFlex Messageのコンポーネントに対応しています。
# Flex Message Simulatorで動作を確認する
Flex Message Simulatorを使うと、メッセージを実際に送信しなくてもレイアウトを確認できます。
# 動作環境
Flex MessageをサポートするLINEのバージョンは以下のとおりです。
- iOS版とAndroid版のLINE:すべてのバージョン
- macOS版とWindows版のLINE:5.17.0以降
以下の機能は、LINEの特定のバージョンのみサポートしています。
機能 | iOS版とAndroid版のLINE | macOS版とWindows版のLINE |
---|---|---|
すべてのバージョン | 6.2.0以上 | |
11.22.0以上 | 7.7.0以上 |
※ LINEのバージョンが動画をサポートするバージョンに満たない場合、動画のaltContent
プロパティに指定したコンポーネントが代替コンテンツとして表示されます。
詳しくは、『Messaging APIリファレンス』の「Flex Message」を参照してください。
# 特徴
- CSS Flexible Box(CSS Flexbox) (opens new window)の基礎知識を使って、複雑なレイアウトのメッセージを構築できます。
- 単体のメッセージバブルだけでなく、複数のメッセージバブルをカルーセル形式で表示できます。カルーセル形式のメッセージバブルは、横にスクロールして閲覧できます。
- 書字方向を左横書きまたは右横書きに指定できます。
# Flex Messageの記述形式
他のメッセージタイプと同様に、Flex MessageはJSON形式で記述します。Flex Messageを使ったボットを開発するには、以下のページも参照してください。
- Flex Messageの要素
- Flex Messageのレイアウト
- Flex Message(Messaging APIリファレンス)
受信端末の環境によって、同じFlex Messageでも描画結果が異なる可能性があります。描画に影響を与える要素には、OS、LINEのバージョン、端末の解像度、言語設定、フォントなどがあります。
# 「Hello, World!」メッセージを送る
最初のステップとして、「Hello, World!」メッセージを作成してみましょう。
# JSONデータを用意する
「Hello, World!」メッセージ用のJSONデータを用意します。
{
"type": "bubble", // ①
"body": { // ②
"type": "box", // ③
"layout": "horizontal", // ④
"contents": [ // ⑤
{
"type": "text", // ⑥
"text": "Hello,"
},
{
"type": "text", // ⑥
"text": "World!"
}
]
}
}
①~⑥の意味は以下のとおりです。
dummy | dummy |
---|---|
① | 単体のメッセージバブルを表すバブルを作成します。 |
② | ①のバブルの内容を設定するボディを指定します。 ①のバブルには、「Hello, World!」を描画するためのボディのみを含めます。 |
③ | ボディには、ボックスのみを指定できます。 |
④ | ボックスのlayout プロパティにhorizontal を指定します。ボックス内のコンポーネントは水平に配置されます。 |
⑤ | ボックスのcontents プロパティに、ボックスに含めるコンポーネントを配列で指定します。 |
⑥ | 「Hello,」と「World!」の2つのテキストを挿入します。 |
# Messaging APIで送信する
Flex Messsageは、「メッセージを送信する」の方法で送信できます。Flex Messageオブジェクトのcontents
プロパティに、送信するJSONデータ(Flex Messageのコンテナ)を指定してください。
以下は、先に挙げたJSONデータをプッシュメッセージとして送信するcurlコマンドです。
curl -v -X POST https://api.line.me/v2/bot/message/push \
-H 'Content-Type: application/json' \
-H 'Authorization: Bearer {channel access token}' \
-d '{
"to": "U4af4980629...",
"messages": [
{
"type": "flex",
"altText": "This is a Flex Message",
"contents": {
"type": "bubble",
"body": {
"type": "box",
"layout": "horizontal",
"contents": [
{
"type": "text",
"text": "Hello,"
},
{
"type": "text",
"text": "World!"
}
]
}
}
}
]
}'