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

backgroundColorOverlay

ブール値

false

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

1.1.0

backgroundColor

色

なし

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

1.1.0

backgroundImageSource

文字列

なし

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

1.1.0

backgroundOverlayGradient

ブール値

false

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

1.1.0

backgroundScale

文字列

best-fill

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

1.1.0

backgroundVideoAudioTrack

文字列

foreground

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

1.1.0

backgroundVideoAutoPlay

ブール値

false

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

1.1.0

backgroundVideoSource

ビデオソース

なし

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

1.1.0

footerHintText

文字列

なし

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

1.0.0

headerAttributionImage

文字列

なし

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

1.0.0

headerAttributionPrimacy

ブール値

true

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

1.0.0

headerAttributionText

文字列

なし

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

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

切り替えてヘッダーの下部に区切り線を表示し、下のコンテンツと区別します。デフォルトはfalseです。

1.1.0

headerSubtitle

文字列

なし

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

1.0.0

headerTitle

文字列

なし

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

1.0.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

AlexaHeadlineの例

クリップボードにコピーされました。

{
  "type": "AlexaHeadline",
  "primaryText": "これは第1ヘッドラインテキストです。2行に制限されるため、長い場合はテキストが切り詰められます。",
  "secondaryText": "これは第2テキストです。1行に制限されるため、長い場合はテキストが切り詰められます。",
  "backgroundColor": "red",
  "footerHintText": "ヒントです",
  "headerAttributionImage": "https://d2o906d8ln7ui1.cloudfront.net/images/cheeseskillicon.png",
  "headerAttributionPrimacy": true,
  "headerAttributionText": "Attribution",
  "headerBackButton": true,
  "headerBackButtonAccessibilityLabel": "back",
  "headerBackgroundColor": "transparent",
  "headerDivider": true,
  "headerSubtitle": "Header subtitle",
  "headerTitle": "Header title",
  "theme": "dark"
}

このページは役に立ちましたか？