Background



Background

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

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

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

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

AlexaBackgroundパラメーター

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

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

backgroundAlign

文字列

center

背景画像または背景ビデオの配置を指定します。デフォルトはcenterです。

1.1.0

backgroundBlur

ブール値

false

trueの場合、背景画像にぼかしが入ります。backgroundImageSourceを設定している場合にのみ適用します。デフォルトはfalseです。

1.1.0

backgroundColor

なし

背景色として使用する色です。backgroundImageSourcebackgroundVideoSourceのいずれも指定していない場合に使用します。

1.1.0

backgroundImageSource

文字列

なし

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

1.1.0

backgroundScale

文字列

best-fill

背景画像または背景ビデオのサイズを調整する方法を指定します。デフォルトはbest-fillです。

1.1.0

backgroundVideoSource

ビデオソース

なし

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

1.1.0

colorOverlay

ブール値

false

trueの場合、背景にレイヤーが適用されます。画像やビデオで、項目の上に表示されるテキストが読み取りやすくなります。デフォルトはfalseです。

1.1.0

overlayGradient

ブール値

false

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

1.1.0

type

文字列

なし

常にAlexaBackgroundに設定されます。

1.1.0

videoAudioTrack

文字列

foreground

ビデオを再生する際に流すオーディオトラックです。foregroundbackgroundnoneのいずれかを指定できます。デフォルトはforegroundです。

1.1.0

videoAutoPlay

ブール値

false

trueの場合、ドキュメントがデバイスに表示されるとビデオが自動的に再生されます。backgroundVideoSourceを設定している場合に適用します。デフォルトはfalseです。

1.1.0

背景ソースの優先順位

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

  • backgroundVideoSource
  • backgroundImageSource
  • backgroundColor

上記のいずれにも値を指定しない場合、デフォルトの背景が使用されます。

背景に対して他のコンポーネントを配置する

他のコンテンツの背後にviewport全体にわたって背景を表示するには、一番上のContainerにまずAlexaBackgroundレイアウトを配置し、Containerの高さと幅をそれぞれ100vhと100vwに設定します。

たとえば、次のContainerには3つの項目があります。 AlexaBackgroundAlexaHeaderTextコンポーネントです。単色の赤色の背景が画面全体に表示されます。ヘッダーテキストは背景の上部に表示され、テキスト文字列は画面のさらに下に表示されます。

{
  "type": "Container",
  "width": "100%",
  "height": "100%",
  "items": [
    {
      "type": "AlexaBackground",
      "backgroundColor": "red"
    },
    {
      "type": "AlexaHeader",
      "headerBackButton": true,
      "headerBackButtonAccessibilityLabel": "back",
      "headerBackgroundColor": "transparent",
      "headerTitle": "Header title",
      "headerSubtitle": "Header subtitle",
      "headerAttributionText": "Attribution",
      "headerAttributionImage": "https://d2o906d8ln7ui1.cloudfront.net/images/cheeseskillicon.png",
      "headerAttributionPrimacy": true,
      "headerDivider": false
    },
    {
      "type": "Text",
      "textAlign": "center",
      "paddingLeft": "@spacingSmall",
      "paddingTop": "@spacingLarge",
      "paddingRight": "@spacingSmall",
      "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"
}

以下の例では、ビデオではなく画像を表示します。

{
  "type": "AlexaBackground",
  "backgroundImageSource": "https://d2o906d8ln7ui1.cloudfront.net/images/MollyforBT7.png",
  "coverOverlay": true
}