# Flex Messageを送信する
Flex Messageは、通常のLINEメッセージに比べ、より豊かでインタラクティブなレイアウトが可能なメッセージです。通常のLINEメッセージでは、テキスト、画像、動画など1種類のソースしか配信されません。しかし、Flex Messageでは、CSS Flexible Box(CSS Flexbox) (opens new window)の仕様に基づいて、レイアウトを自由にカスタマイズできます。
Flex Messageの構成要素は、コンテナ、ブロック、コンポーネントです。各Flex Messageは、メッセージバブルを含むコンテナという単一の最上位構造を持ちます。コンテナには複数のメッセージバブルを含めることができます。バブルはブロックで構成され、ブロックはコンポーネントで構成されています。
Flex Messageでは、テキストの書字方向を左から右(左横書き)、または右から左(右横書き)に指定できます。
受信端末の環境によって、同じFlex Messageでも描画結果が異なる可能性があります。描画に影響を与える要素には、OS、LINEのバージョン、端末の解像度、言語設定、フォントなどがあります。
他のメッセージタイプと同様に、Flex MessageはJSON形式で記述します。Flex Messageについて詳しくは、以下のページを参照してください。
- Flex Messageの要素
- Flex Messageのレイアウト
- Flex Message(Messaging APIリファレンス)
# 動作環境
Flex Messageは、すべてのバージョンのLINEでサポートされます。なお、以下の機能は、LINEの特定のバージョンのみサポートしています。
機能 | iOS版LINE Android版LINE | PC版LINE (macOS版、Windows版) |
---|---|---|
11.22.0以上 | 7.7.0以上 | |
13.6.0以上 | 7.17.0以上 |
※1 動画をサポートしていないLINEのバージョンにおいてもコンテンツを適切に表示するには、altContent
プロパティを指定します。このプロパティで指定した画像が動画の代わりに表示されます。
※2 LINEのバージョンがdeca
とhecto
をサポートするバージョンに満たない場合、バブルのサイズはkilo
として表示されます。
# Flex Message Simulator
Flex Message Simulatorを使うと、メッセージを実際に送信しなくても、描画された状態を確認できます。
Flex Message Simulatorについて詳しくは、チュートリアルを参照してください。
# 「Hello, World!」メッセージを送る
Flex Messageを始めるにあたり、「Hello, World!」をFlex Messageとして送信してみましょう。まず、Flex MessageをJSONで定義し、Messaging APIを呼び出してメッセージを送信します。
# JSONでFlex Messageを定義する
Messaging APIを呼び出してFlex Messageを送信する前に、Flex MessageをJSONで定義します。以下は、JSONでFlex Messageを定義する方法で、"Hello, World!"というメッセージを作ります。このFlex Messageにはメッセージバブルが1つあればよいので、バブルコンテナを使用します。
{
"type": "bubble", // 1
"body": {
// 2
"type": "box", // 3
"layout": "horizontal", // 4
"contents": [
// 5
{
"type": "text", // 6
"text": "Hello,"
},
{
"type": "text", // 6
"text": "World!"
}
]
}
}
1~6の説明は以下のとおりです。
dummy | dummy |
---|---|
1 | 単体のメッセージバブルのコンテナを作成します。このように、コンテナの種類を"bubble" にします。 |
2 | バブルの内容を保持するバブルを指定します。メッセージの表示に必要なブロックは、ボディ1点です。 |
3 | ボディに、ボックスを設定します。 |
4 | ボディの方向を水平に設定します。ボックス内の子コンポーネントが水平に配置されます。 |
5 | ボックス内に配置するコンポーネントを指定します。 |
6 | 「Hello,」と「World!」の2つのテキストを挿入します。 |
# Messaging APIで送信する
Flex Messsageは、「メッセージを送信する」のいずれの方法でも送信できます。メッセージリクエストのリクエストボディで、message.contents
プロパティにFlex Messageオブジェクトの定義を設定します。
以下は、プッシュメッセージを送信するリクエストの例です。
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!"
}
]
}
}
}
]
}'