Headline
Alexaのヘッドラインテンプレート(AlexaHeadline
)は、短い情報のテキスト文字列を画面に表示します。このテンプレートは全画面対応のため、Header、Footer、Backgroundを含めることができます。
alexa-layoutsパッケージを読み込む
AlexaHeadline
を使用するには、alexa-layoutsパッケージを読み込みます。
alexa-layouts
パッケージの最新バージョンは1.1.0
です。AlexaHeadline
はバージョン1.1.0
で導入されました。
AlexaHeadlineパラメーター
type
以外のパラメーターはすべてオプションです。
名前 | 型 | デフォルト | 説明 | 追加されたバージョン |
---|---|---|---|---|
|
文字列 |
|
背景画像または背景ビデオの配置を指定します。デフォルトはcenterです。 |
1.1.0 |
|
ブール値 |
|
trueの場合、背景画像にぼかしが入ります。 |
1.1.0 |
|
ブール値 |
|
trueの場合、背景にレイヤーが適用されます。画像やビデオで、項目の上に表示されるテキストが読み取りやすくなります。デフォルトはfalseです。 |
1.1.0 |
|
なし |
背景色として使用する色です。 |
1.1.0 |
|
|
文字列 |
なし |
背景画像ソースのURLです。 |
1.1.0 |
|
ブール値 |
|
trueの場合、背景にグラデーションが適用されます。 |
1.1.0 |
|
文字列 |
|
背景画像または背景ビデオのサイズを調整する方法を指定します。デフォルトは |
1.1.0 |
|
文字列 |
|
ビデオを再生する際に流すオーディオトラックです。 |
1.1.0 |
|
ブール値 |
|
trueの場合、ドキュメントがデバイスに表示されるとビデオが自動的に再生されます。 |
1.1.0 |
|
なし |
背景ビデオのソースです。Videoコンポーネントの |
1.1.0 |
|
|
文字列 |
なし |
Footerに表示するヒントテキストです。正しいウェイクワードをヒントに追加するには、 |
1.0.0 |
|
文字列 |
なし |
アトリビューションの画像ソースのURLです。 |
1.0.0 |
|
ブール値 |
true |
画面サイズにより1つの要素しか表示できないデバイスでは、アトリビューションが優先されます。 |
1.0.0 |
|
文字列 |
なし |
Headerで表示するアトリビューションのテキストです。 |
1.0.0 |
|
文字列 |
なし |
スクリーンリーダーを使用するユーザーに、戻るボタンについて説明するアクセシビリティラベルです。 |
1.1.0 |
|
|
ユーザーが戻るボタンを選択したときに実行するコマンドです。デフォルトは、「GoBack」引数の付いた |
1.1.0 |
|
|
ブール値 |
|
戻るボタンの表示を切り替えます。デフォルトは |
1.0.0 |
|
文字列 |
|
Headerの背景色として使用するオプションの色の値です。デフォルトは |
1.0.0 |
|
ブール値 |
|
切り替えてヘッダーの下部に区切り線を表示し、下のコンテンツと区別します。デフォルトはfalseです。 |
1.1.0 |
|
文字列 |
なし |
Headerで表示する第2テキストです。 |
1.0.0 |
|
文字列 |
なし |
Headerで表示する第1テキストです。 |
1.0.0 |
|
文字列 |
最大2行で表示する第1テキストです。テキストは2行に収まるように切り詰められます。 |
1.1.0 |
|
|
文字列 |
1行で表示する第2テキストです。第1テキストの下に表示されます。テキストは1行に収まるように切り詰められます。 |
1.1.0 |
|
|
文字列 |
dark |
指定したテーマ(lightまたはdark)に応じて色が切り替わります。デフォルトのテーマはdarkです。 |
1.1.0 |
|
文字列 |
なし |
常に |
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"
}