Background
Backgroundレスポンシブ対応コンポーネント（AlexaBackground）は、コンテンツの背後にビデオ、画像、色を表示します。
互換性
AlexaBackgroundは、以下のviewportプロファイルで動作するようデザインされています。
alexa-viewport-profilesパッケージの以下のウィジェットviewportプロファイル：- ウィジェット、中（
@hubWidgetMedium）
- ウィジェット、中（
alexa-viewport-profilesパッケージのすべての標準viewportプロファイル：- すべての円形デバイスプロファイル
- すべての横長デバイスプロファイル
- すべての縦長デバイスプロファイル
- すべてのモバイルプロファイル
- すべてのテレビプロファイル
viewportプロファイルの詳細については、Viewportプロファイルを参照してください。
ウィジェットの相違点
ウィジェットは、ビデオの再生に対応していないため、ウィジェットの使用中はAlexaBackgroundでビデオ背景の使用をサポートしません。
alexa-layoutsパッケージを読み込む
AlexaBackgroundを使用するには、alexa-layoutsパッケージを読み込みます。
alexa-layoutsパッケージの最新バージョンは1.7.0です。AlexaBackgroundはバージョン1.1.0で導入されました。
AlexaBackgroundパラメーター
以下の表は、AlexaBackgroundで設定できるパラメーターを示しています。特に記載のない限り、標準viewportプロファイルはすべてのパラメーターをサポートします。「ウィジェットのサポート」列は、各パラメーターをサポートするウィジェットviewportプロファイルを示しています。viewportプロファイルの詳細については、Viewportプロファイルを参照してください。
type以外のパラメーターはすべてオプションです。
| 名前 | 型 | デフォルト | 説明 | ウィジェットのサポート | 追加されたバージョン |
|---|---|---|---|---|---|
|
|
文字列 |
|
背景画像または背景ビデオの配置を指定します。 |
中 |
1.1.0 |
|
|
ブール値 |
|
|
中 |
1.1.0 |
|
|
— |
背景色として使用する色です。 |
中 |
1.1.0 | |
|
|
文字列 |
— |
背景画像ソースのURLです。 |
中 |
1.1.0 |
|
|
文字列 |
|
背景画像または背景ビデオのサイズを調整する方法を指定します。 |
中 |
1.1.0 |
|
|
— |
背景ビデオのソースです。Videoコンポーネントの |
サポートされません |
1.1.0 | |
|
|
ブール値 |
|
|
中 |
1.1.0 |
|
|
配列 |
— |
このコンポーネントにバインドするentityデータの配列です。 |
中 |
1.2.0 |
|
|
ブール値 |
|
|
中 |
1.1.0 |
|
|
ブール値 |
|
|
中 |
1.1.0 |
|
|
文字列 |
— |
常に |
中 |
1.1.0 |
|
|
文字列 |
|
ビデオを再生する際に流すオーディオトラックです。 |
サポートされません |
1.1.0 |
|
|
ブール値 |
|
|
サポートされません |
1.1.0 |
背景ソースの優先順位
複数の背景ソース（ビデオ、画像、色）を指定できます。Alexaでは、この優先順位に基づいて表示する背景を選択します。
- 値が指定されている場合、
backgroundVideoSourceを表示します。 backgroundVideoSourceが指定されていない場合、backgroundImageSourceを表示します。backgroundVideoSource、backgroundImageSourceがいずれも指定されていない場合、backgroundColorを表示します。backgroundVideoSource、backgroundImageSource、backgroundColorがいずれも指定されていない場合、デフォルトの背景を使用します。
ウィジェットはビデオに対応していません。このため、Alexaは、同じ優先順位でbackgroundImageSource、backgroundColor、デフォルトの背景のいずれかを選択します。
背景に対して他のコンポーネントを配置する
他のコンテンツの背後にviewport全体にわたって背景を表示するには、一番上のContainerにまずAlexaBackgroundレイアウトを最上位で配置し、Containerの高さと幅を100%に設定します。
たとえば、次のContainerには3つの項目があります。 AlexaBackground、AlexaHeader、Textコンポーネントです。単色の濃い赤色の背景が画面全体に表示されます。ヘッダーテキストは背景の上部に表示され、テキスト文字列は画面のさらに下に表示されます。
AlexaBackgroundの例
次の例では、背景にビデオを表示します。デバイスがドキュメントをレンダリングすると、ビデオの再生が自動的に始まり、2回（repeatCount）再生されます。（この例では、backgroundVideoSourceに仮の値を指定しています。実際に表示するビデオのURLに置き換えてください）。
{
"type": "AlexaBackground",
"backgroundVideoSource": [
{
"url": "https://example.com/fictitious-video-urls/background-video.mp4",
"repeatCount": 2
}
],
"videoAutoPlay": true,
"videoAudioTrack": "none"
}
次の例では、ビデオではなく画像を背景に表示します。
以下は、ウィジェットに画像の背景を表示する例です。
関連トピック
最終更新日: 2023 年 12 月 18 日