Background

Background

Backgroundレスポンシブ対応コンポーネント（AlexaBackground）は、コンテンツの背後にビデオ、画像、色を表示します。

alexa-layoutsパッケージを読み込む

AlexaBackgroundを使用するには、alexa-layoutsパッケージを読み込みます。

alexa-layoutsパッケージの最新バージョンは1.5.0です。AlexaBackgroundはバージョン1.1.0で導入されました。

AlexaBackgroundパラメーター

type以外のパラメーターはすべてオプションです。

名前 型 デフォルト 説明 追加されたバージョン

backgroundAlign

文字列

center

背景画像または背景ビデオの配置を指定します。

1.1.0

backgroundBlur

ブール値

false

trueの場合、指定された背景画像にぼかしを入れて表示します。backgroundImageSourceに値が指定された場合にのみ適用されます。

1.1.0

backgroundColor

色

なし

背景色として使用する色です。backgroundImageSourceとbackgroundVideoSourceのいずれにも値が含まれない場合に使用します。

1.1.0

backgroundImageSource

文字列

なし

背景画像ソースのURLです。backgroundVideoSourceを指定していない場合に使用します。

1.1.0

backgroundScale

文字列

best-fill

背景画像または背景ビデオのサイズを調整する方法を指定します。

1.1.0

backgroundVideoSource

ビデオソース

なし

背景ビデオのソースです。Videoコンポーネントのsourceプロパティと同様の形式でソースを指定します。

1.1.0

colorOverlay

ブール値

false

trueの場合、背景にレイヤーを適用して、画像やビデオ上のテキストを読みやすくします。

1.1.0

entities

配列

[]

このコンポーネントにバインドするentityデータの配列です。

1.2.0

overlayGradient

ブール値

false

trueの場合、背景にグラデーションを適用します。

1.1.0

overlayNoise

ブール値

false

trueの場合、背景にノイズフィルターを適用します。

1.1.0

type

文字列

なし

常にAlexaBackgroundに設定されます。

1.1.0

videoAudioTrack

文字列

foreground

ビデオを再生する際に流すオーディオトラックです。foreground、background、noneのいずれかです。

1.1.0

videoAutoPlay

ブール値

false

trueの場合、ドキュメントがデバイスに表示されるとビデオが自動的に再生されます。backgroundVideoSourceに値が指定された場合に適用します。

1.1.0

背景ソースの優先順位

複数の背景ソース（ビデオ、画像、色）を指定できます。Alexaでは、この優先順位に基づいて表示する背景を選択します。

  • backgroundVideoSource
  • 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"
}

次の例では、ビデオではなく画像を背景に表示します。

最終更新日: 2022 年 10 月 27 日