Header

Header

Alexa Headerレスポンシブ対応コンポーネント（AlexaHeader）は、タイトル、サブタイトル、戻るボタンなどの一般的なヘッダー情報を表示します。

互換性

AlexaHeaderは、次のViewportプロファイルで動作するように設計されています。

  • alexa-viewport-profilesパッケージの以下のウィジェットviewportプロファイル：
    • ウィジェット、中（@hubWidgetMedium）
  • alexa-viewport-profilesパッケージのすべての標準viewportプロファイル：
    • すべての円形デバイスプロファイル
    • すべての横長デバイスプロファイル
    • すべての縦長デバイスプロファイル
    • すべてのモバイルプロファイル
    • すべてのテレビプロファイル

viewportプロファイルの詳細については、Viewportプロファイルを参照してください。

サポートされていないViewportでAlexaHeaderを使用すると、予期しない結果になることがあります。

ウィジェットでの相違点

AlexaHeaderをウィジェット内で使用すると、小さいウィジェットサイズに合わせて簡略化されたヘッダーが表示されます。このヘッダーには次のような特徴があります。

  • ヘッダータイトルテキストは表示されますが、アトリビューションテキスト、アトリビューション画像、サブタイトルは表示されません。
  • 戻るボタンはサポートされません。

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

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

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

AlexaHeaderパラメーター

以下の表は、AlexaHeaderで設定できるパラメーターを示しています。特に記載のない限り、標準viewportプロファイルはすべてのパラメーターをサポートします。「ウィジェットのサポート」列は、各パラメーターをサポートするウィジェットviewportプロファイルを示しています。viewportプロファイルの詳細については、Viewportプロファイルを参照してください。

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

名前 型 デフォルト 説明 ウィジェットのサポート 追加されたバージョン

entities

配列

—

このコンポーネントにバインドするentityデータの配列です。

中

1.2.0

headerAttributionImage

文字列

—

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

サポートされません

1.0.0

headerAttributionOpacity

数値

0.8

attributionテキストとattribution画像のopacityです。0と1の間の数値を設定します。

サポートされません

1.3.0

headerAttributionPrimacy

ブール値

true

trueの場合、画面サイズの制約のために1つの要素しか表示されないデバイスでは、headerAttributionImageを表示します。falseの場合、headerTitleとheaderSubtitleを表示します。

サポートされません

1.0.0

headerAttributionText

文字列

—

ヘッダーで表示するアトリビューションのテキストです。headerAttributionImageに値が含まれず、かつheaderAttributionPrimacyがtrueの場合、またはデバイスがタイトル／サブタイトルとアトリビューションの両方を表示する場合に表示されます。

サポートされません

1.0.0

headerBackButton

ブール値

false

trueの場合、戻るボタンをヘッダーに表示します。

サポートされません

1.0.0

headerBackButtonAccessibilityLabel

文字列

Back

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

サポートされません

1.1.0

headerBackButtonCommand

コマンド

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

ユーザーが戻るボタンを選択したときに実行するコマンドです。

サポートされません

1.1.0

headerBackgroundColor

文字列

transparent

ヘッダーの背景色として使用するオプションの色の値です。

中

1.0.0

headerDivider

ブール値

false

trueの場合、ヘッダーの下に区切り線を表示してコンテンツと区別できるようにします。

サポートされません

1.1.0

headerHorizontalAlignmentCentered

ブール値

false

trueの場合、ヘッダーの内容を左右の中央に配置します。

中

1.6.0

headerSubtitle

文字列

—

ヘッダーに表示する第2テキストです。

サポートされません

1.0.0

headerTitle

文字列

—

ヘッダーに表示する第1テキストです。

中

1.0.0

headerTitleCanUseTwoLines

ブール値

false

trueの場合、ウィジェット内の長いheaderTitleテキストを必要に応じて2行に折り返します。ウィジェットViewportプロファイルにのみ適用されます。標準のAPL Viewportに表示されている場合は無視されます。

中

1.5.0

layoutDirection

文字列

${environment.layoutDirection}

コンテンツのレイアウト方向を指定します。このプロパティは、LTR（左から右）またはRTL（右から左）に設定します。このプロパティには、コンポーネントの親コンテナーのlayoutDirectionは継承されません。このため、必要に応じて明示的にこのプロパティを設定してください。

レスポンシブ対応コンポーネントでの右から左に記述する言語のサポートの詳細については、右から左に記述する言語のサポートを参照してください。

中

1.4.0

theme

文字列

dark

色のテーマをダークまたはライトに設定します。テーマを選択することでコンポーネントの色を制御します。

中

1.1.0

type

文字列

—

常にAlexaHeaderに設定されます。

中

1.0.0

タイトル／サブタイトルプロパティとアトリビューションプロパティの両方が指定され、headerHorizontalAlignmentCenteredがtrueに設定されている場合は、次のようになります。

  • headerAttributionPrimacyがtrueに設定されている場合、アトリビューションだけが表示されます。
  • headerAttributionPrimacyがfalseに設定されている場合、タイトル／サブタイトルだけが表示されます。

AlexaHeaderの例

{
  "type": "AlexaHeader",
  "headerBackgroundColor": "red",
  "headerTitle": "これはヘッダータイトルです。",
  "headerSubtitle": "これはヘッダーのサブタイトルです",
  "headerAttributionText": "Attribution text"
}

次のAlexaHeaderの例では、ウィジェット専用のheaderTitleCanUseTwoLinesプロパティを使用して、ウィジェットに長いヘッダーを表示します。

{
  "type": "AlexaHeader",
  "headerBackgroundColor": "red",
  "headerTitle": "ウィジェットで2行に表示される長いheaderTitleテキスト",
  "headerTitleCanUseTwoLines": true
}

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

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