Headline



Headline

Alexaのヘッドラインテンプレート(AlexaHeadline)は、短い情報のテキスト文字列を画面に表示します。このテンプレートは全画面対応のため、Header、Footer、Backgroundを含めることができます。

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

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

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

AlexaHeadlineパラメーター

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

headerAttributionImage

文字列

なし

アトリビューションの画像ソースのURLです。headerAttributionPrimacyがtrueの場合、またはタイトル/サブタイトルとアトリビューションの両方を表示するデバイスにのみ表示されます。

1.0.0

headerAttributionPrimacy

ブール値

true

画面サイズにより1つの要素しか表示できないデバイスでは、アトリビューションが優先されます。falseに設定すると、タイトルとサブタイトルが表示されます。デフォルトはtrueです。

1.0.0

headerAttributionText

文字列

なし

Headerで表示するアトリビューションのテキストです。headerAttributionTextの値は、headerAttributionImageが指定されておらず、かつ、headerAttributionPrimacytrueの場合、または、デバイスがタイトル/サブタイトルとアトリビューションの両方を表示する場合のみ表示されます。

1.0.0

headerBackButtonAccessibilityLabel

文字列

なし

スクリーンリーダーを使用するユーザーに、戻るボタンについて説明するアクセシビリティラベルです。

1.1.0

headerBackButtonCommand

コマンド

{"type":"SendEvent","arguments":["goBack"]}

ユーザーが戻るボタンを選択した際に実行するコマンドです。デフォルトは、「GoBack」引数の付いたSendEventです。

1.1.0

headerBackButton

ブール値

false

戻るボタンの表示を切り替えます。デフォルトはfalseです。

1.0.0

headerBackgroundColor

文字列

transparent

Headerの背景色として使用するオプションの色の値です。デフォルトはtransparentです。

1.0.0

headerDivider

ブール値

false

Headerとその下のコンテンツとを区別する区切り線の表示を切り替えます。デフォルトはfalseです。

1.1.0

headerSubtitle

文字列

なし

Headerで表示する第2テキストです。

1.0.0

headerTitle

文字列

なし

Headerで表示する第1テキストです。

1.0.0

hintText

文字列

なし

Footerに表示するヒントテキストです。正しいウェイクワードをヒントに追加するには、textToHintを使用します。

1.0.0

overlayGradient

ブール値

false

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

1.1.0

primaryText

文字列

最大2行で表示する第1テキストです。テキストは2行に収まるように切り詰められます。

1.1.0

secondaryText

文字列

1行で表示する第2テキストです。第1テキストの下に表示されます。テキストは1行に収まるように切り詰められます。

1.1.0

theme

文字列

dark

指定したテーマ(lightまたはdark)に応じて色が切り替わります。デフォルトのテーマはdarkです。

1.1.0

type

文字列

なし

常にAlexaHeadlineに設定されます。

1.1.0

videoAudioTrack

文字列

foreground

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

1.1.0

videoAutoPlay

ブール値

false

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

1.1.0

AlexaHeadlineの例

{
  "type": "AlexaHeadline",
  "primaryText": "これは第1ヘッドラインテキストです。2行に制限されるため、長い場合はテキストが切り詰められます。",
  "secondaryText": "これは第2テキストです。1行に制限されるため、長い場合はテキストが切り詰められます。",
  "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": true,
  "footerHintText": "ヒントです",
  "theme": "dark",
  "backgroundColor": "red"
}