Headline

---

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

互換性

AlexaHeadlineは、alexa-viewport-profilesパッケージのすべての標準Viewportプロファイルで動作するように設計されています。次のプロファイルに対応しています。

• すべての円形デバイスプロファイル
• すべての横長デバイスプロファイル
• すべての縦長デバイスプロファイル
• すべてのモバイルプロファイル
• すべてのテレビプロファイル

サポートされていないViewportでAlexaHeadlineを使用すると、予期しない結果になることがあります。Viewportプロファイルの詳細については、Viewportプロファイルを参照してください。

alexa-layoutsパッケージをインポートする

AlexaHeadlineを使用するには、alexa-layoutsパッケージをインポートします。

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

AlexaHeadlineパラメーター

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

名前	型	デフォルト	説明	ウィジェットのサポート	追加されたバージョン
backgroundAlign	文字列	center	背景画像または背景ビデオの配置を指定します。デフォルトはcenterです。	サポートされません	1.1.0
backgroundBlur	ブール値	false	trueの場合、指定された背景画像にぼかしを入れて表示します。backgroundImageSourceに値が指定された場合にのみ適用されます。デフォルトはfalseです。	サポートされません	1.1.0
backgroundColor	色	—	背景色として使用する色です。backgroundImageSourceとbackgroundVideoSourceのいずれにも値が含まれない場合に使用します。	サポートされません	1.1.0
backgroundColorOverlay	ブール値	false	trueの場合、背景にレイヤーを適用して、画像やビデオ上のテキストを読みやすくします。	サポートされません	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
entities	配列	—	このテンプレートにバインドするentityデータの配列です。	サポートされません	1.2.0
footerHintText	文字列	—	フッターに表示するヒントテキストです。正しいウェイクワードをヒントに追加するには、textToHintを使用します。	サポートされません	1.1.0
headerAttributionImage	文字列	—	アトリビューションの画像ソースのURLです。headerAttributionPrimacyがtrueの場合、またはタイトル／サブタイトルとアトリビューションの両方を表示するデバイスの場合に表示されます。	サポートされません	1.1.0
headerAttributionOpacity	数値	小型の円形デバイスでは1、それ以外では@opacitySecondary	アトリビューションテキストとアトリビューション画像の不透明度です。	サポートされません	1.3.0
headerAttributionPrimacy	ブール値	true	trueの場合、画面サイズの制約のために1つの要素しか表示されないデバイスでは、headerAttributionImageを表示します。falseの場合、headerTitleとheaderSubtitleを表示します。デフォルトはtrueです。	サポートされません	1.1.0
headerAttributionText	文字列	—	ヘッダーで表示するアトリビューションのテキストです。headerAttributionImageに値が含まれず、かつheaderAttributionPrimacyがtrueの場合、またはデバイスがタイトル／サブタイトルとアトリビューションの両方を表示する場合に表示されます。	サポートされません	1.1.0
headerBackButton	ブール値	false	trueの場合、戻るボタンをヘッダーに表示します。	サポートされません	1.1.0
headerBackButtonAccessibilityLabel	文字列	Back	スクリーンリーダーを使用するユーザーに、戻るボタンについて説明するアクセシビリティラベルです。	サポートされません	1.1.0
headerBackButtonCommand	コマンド	{"type":"SendEvent","arguments":["goBack"]}	ユーザーが戻るボタンを選択したときに実行するコマンドです。デフォルトは、「GoBack」引数が指定されたSendEventです。	サポートされません	1.1.0
headerBackgroundColor	文字列	transparent	Headerの背景色として使用するオプションの色の値です。デフォルトはtransparentです。	サポートされません	1.1.0
headerDivider	ブール値	false	切り替えてヘッダーの下部に区切り線を表示し、下のコンテンツと区別します。デフォルトはfalseです。	サポートされません	1.1.0
headerSubtitle	文字列	—	ヘッダーに表示する第2テキストです。	サポートされません	1.1.0
headerTitle	文字列	—	ヘッダーに表示する第1テキストです。	サポートされません	1.1.0
lang	文字列	${environment.lang}	テンプレートに表示されるテキストの言語です。この言語によって、テキストに使用されるデフォルトのフォントが決まります。たとえば、ar-SAに設定すると、コンポーネントはデバイスでアラビア語フォントが利用可能であれば使用します。BCP-47文字列に設定します。 レスポンシブ対応コンポーネントの言語固有のフォントの詳細については、コンポーネントとテンプレートでの言語固有のフォントを参照してください。	サポートされません	1.4.0
layoutDirection	文字列	${environment.layoutDirection}	コンテンツのレイアウト方向を指定します。このプロパティは、LTR（左から右）またはRTL（右から左）に設定します。このプロパティには、コンポーネントの親コンテナーのlayoutDirectionは継承されません。このため、必要に応じて明示的にこのプロパティを設定してください。 レスポンシブ対応コンポーネントでの右から左に記述する言語のサポートの詳細については、右から左に記述する言語のサポートを参照してください。	サポートされません	1.4.0
primaryText	文字列	—	表示する第1テキストです。テキストはViewportのサイズに応じて切り詰められます。たとえば、大型デバイスでは最大4行のテキストが表示されますが、小型デバイスでの表示は2行になります。	サポートされません	1.3.0
secondaryText	文字列	—	1行で表示する第2テキストです。第1テキストの下に表示されます。テキストは1行に収まるように切り詰められます。	サポートされません	1.1.0
theme	文字列	dark	色のテーマをダークまたはライトに設定します。テーマを選択することでテンプレートの色を制御します。	サポートされません	1.1.0
type	文字列	—	常にAlexaHeadlineに設定されます。	サポートされません	1.1.0

AlexaHeadlineの例

---

関連トピック

• APL向けAlexa Design System
• レスポンシブ対応コンポーネントとテンプレート
• Alexaデザインガイド： レスポンシブ対応テンプレート

---

---

最終更新日: 2025 年 09 月 29 日