# 動画を含むFlex Messageを作成する
ここでは、動画を含むFlex Messageを作成する方法について説明します。作成したFlex Messageを送る方法について詳しくは、「Flex Messageを送信する」を参照してください。
# 概要
Flex Messageの動画コンポーネントを使うと、ヒーローのブロックに動画を表示できます。
上の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を表現するには以下のようなJSONデータを指定します。
{
"type": "bubble",
"size": "mega",
"hero": {
"type": "video",
"url": "https://example.com/video.mp4",
"previewUrl": "https://example.com/video_preview.png",
"altContent": {
"type": "image",
"size": "full",
"aspectRatio": "20:13",
"aspectMode": "cover",
"url": "https://example.com/image.png"
},
"action": {
"type": "uri",
"label": "詳細はこちら",
"uri": "http://linecorp.com/"
},
"aspectRatio": "20:13"
},
"body": {
"type": "box",
"layout": "vertical",
"contents": [
{
"type": "text",
"text": "Brown Cafe",
"weight": "bold",
"size": "xl"
},
{
"type": "box",
"layout": "baseline",
"margin": "md",
"contents": [
{
"type": "icon",
"size": "sm",
"url": "https://example.com/star.png"
},
{
"type": "icon",
"size": "sm",
"url": "https://example.com/star.png"
},
{
"type": "icon",
"size": "sm",
"url": "https://example.com/star.png"
},
{
"type": "icon",
"size": "sm",
"url": "https://example.com/star.png"
},
{
"type": "icon",
"size": "sm",
"url": "https://example.com/gray_star.png"
},
{
"type": "text",
"text": "4.0",
"size": "sm",
"color": "#999999",
"margin": "md",
"flex": 0
}
]
},
{
"type": "box",
"layout": "vertical",
"margin": "lg",
"spacing": "sm",
"contents": [
{
"type": "box",
"layout": "baseline",
"spacing": "sm",
"contents": [
{
"type": "text",
"text": "Place",
"color": "#aaaaaa",
"size": "sm",
"flex": 1
},
{
"type": "text",
"text": "YOTSUYA TOWER, 1-6-1 Yotsuya, Tokyo",
"wrap": true,
"color": "#666666",
"size": "sm",
"flex": 5
}
]
},
{
"type": "box",
"layout": "baseline",
"spacing": "sm",
"contents": [
{
"type": "text",
"text": "Time",
"color": "#aaaaaa",
"size": "sm",
"flex": 1
},
{
"type": "text",
"text": "10:00 - 23:00",
"wrap": true,
"color": "#666666",
"size": "sm",
"flex": 5
}
]
}
]
}
]
},
"footer": {
"type": "box",
"layout": "vertical",
"spacing": "sm",
"contents": [
{
"type": "button",
"style": "link",
"height": "sm",
"action": {
"type": "uri",
"label": "CALL",
"uri": "https://linecorp.com"
}
},
{
"type": "button",
"style": "link",
"height": "sm",
"action": {
"type": "uri",
"label": "WEBSITE",
"uri": "https://linecorp.com"
}
},
{
"type": "box",
"layout": "vertical",
"contents": [],
"margin": "sm"
}
],
"flex": 0
}
}
# 動画コンポーネントの使用条件
動画コンポーネントを使うには、以下の条件をすべて満たす必要があります。
- 動画コンポーネントをヒーローのブロック直下に指定する
- バブルの
sizeプロパティにkilomegagigaのいずれかを指定する - バブルがカルーセルの子要素ではない
# 動画のアスペクト比
一定以上に縦長・横長の動画を送信した場合、一部の環境では動画の一部が欠けて表示される場合があります。
また、urlプロパティで指定する動画のアスペクト比と、以下の2つのアスペクト比は一致させてください。アスペクト比が異なると、予期せぬレイアウトになることがあります。
aspectRatioプロパティで指定するアスペクト比previewUrlプロパティで指定するプレビュー画像のアスペクト比
# URIアクション
動画コンポーネントのactionプロパティを使うと、URIアクションを指定できます。URIアクションのラベルは以下の3箇所で表示されます。
URIアクションを指定すると、ラベルのタップ時にLINE内ブラウザで指定のURLを開いたり、通話アプリで指定の電話番号に電話をかけたりできます。
URIアクションについて詳しくは、『Messaging APIリファレンス』の「URIアクション」を参照してください。
# 動画の再生方法
動画が正しく再生できない場合、動画が再生可能なファイル形式であることと、動画をホストしているHTTPサーバーが、HTTPの範囲リクエスト（Range request）に対応していることを確認してください。再生可能なファイル形式について詳しくは、『Messaging APIリファレンス』の「動画」を参照してください。
動画は以下の2つの方法で再生されます。
# トークルーム上での自動再生
トークルーム上で動画が自動再生されるかどうかは、LINEの［設定］ > ［写真と動画］ > ［動画自動再生］で確認できます。
| ［動画自動再生］の設定 | 自動再生 |
|---|---|
| ［モバイルデータ通信とWi-Fi］ | 動画が自動再生される |
| ［Wi-Fiのみ］ | Wi-Fi接続時のみ動画が自動再生される |
| ［自動再生しない］ | 動画が自動再生されない |
なお、macOS版LINEとWindows版LINEでは動画は自動再生されません。
# 動画再生終了時の画面
動画再生終了時には、動画の上に［再生］と［詳細はこちら］が表示されます。
［再生］をタップすると、動画プレーヤーを開き、もう一度動画を再生します。詳しくは「動画プレーヤー上での手動再生」を参照してください。
［詳細はこちら］は、動画コンポーネントに指定したURIアクションのラベルです。任意のラベルを指定できます。URIアクションを未指定の場合は表示されません。詳しくは、「URIアクション」を参照してください。
# 動画プレーヤー上での手動再生
トークルーム上の動画をタップすると、動画プレーヤー上で動画が再生されます。
# 動画再生時の画面
動画再生時には、動画プレーヤー上部に［完了］と［詳細はこちら］が表示されます。
［完了］をタップすると、動画プレーヤーを閉じ、トークルームに戻ります。このとき、動画の自動再生の条件を満たす場合は、トークルーム上で動画の続きが再生されます。詳しくは、「トークルーム上での自動再生」を参照してください。
［詳細はこちら］は、動画コンポーネントに指定したURIアクションのラベルです。任意のラベルを指定できます。URIアクションを未指定の場合は表示されません。詳しくは、「URIアクション」を参照してください。
# 動画再生終了時の画面
動画再生終了時には、動画の上に［リプレイ］と［詳細はこちら］が表示されます。
［リプレイ］をタップすると、動画プレーヤー上で動画をもう一度再生します。
［詳細はこちら］は、動画コンポーネントに指定したURIアクションのラベルです。任意のラベルを指定できます。URIアクションを未指定の場合は表示されません。詳しくは、「URIアクション」を参照してください。
# 動画コンポーネントをサポートするバージョン未満のLINEでの表示
LINEのバージョンが動画コンポーネントをサポートするバージョンに満たない場合、動画コンポーネントのaltContentプロパティに指定したコンポーネントが代替コンテンツとして表示されます。altContentプロパティにはボックスか画像を指定します。
# Flex Message Simulatorでの表示
Flex Message Simulatorでは動画のプレビューはできません。Flex Message Simulatorのプレビューエリアでは、「動画コンポーネントをサポートするバージョン未満のLINEでの表示」と同様に、代替コンテンツが表示されます。
Flex Message Simulatorで作成したメッセージに含まれる動画を確認するには、テストメッセージを送信し、LINE上で確認してください。テストメッセージは、Flex Message Simulatorの右上の［Send...］から送信できます。
