Press State（ウィジェット）

Alexa Press Stateレスポンシブ対応コンポーネント（AlexaPressState）は、ウィジェット全体の上にユーザーがタップできる領域を作成します。コンポーネントがタップされると軽微なアニメーションを表示して、ユーザーにフィードバックを提供します。AlexaPressStateは、ウィジェットのビューポート全体を覆うように設定するか、ヘッダーやフッターのスペースを残すように設定できます。

タップ時のフィードバック以外、AlexaPressState自体は何も視覚コンポーネントを表示しません。AlexaPressStateは、コンテンツを表示する独自のデザインやテンプレートと併せて使用します。

互換性

AlexaPressStateは、alexa-viewport-profilesパッケージの次のウィジェットビューポートプロファイルで動作するように設計されています。

• ウィジェット、中（@hubWidgetMedium）

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

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

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

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

AlexaPressStateのパラメーター

次の表は、ウィジェットビューポートプロファイルで機能するAlexaPressStateのプロパティの一覧です。すべてのパラメーターがすべてのビューポートプロファイルに適用されるわけではありません。「ウィジェットのサポート」列は、各パラメーターをサポートするウィジェットビューポートプロファイルを示しています。ビューポートプロファイルの詳細については、ビューポートプロファイルを参照してください。

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

名前	型	デフォルト	説明	ウィジェットのサポート	追加されたバージョン
hasFooterButton	ブール値	false	trueの場合、タップターゲットの下部にAlexaFooterActionButtonコンポーネント用のスペースを残します。itemsに値が設定されている場合は無視されます。詳細については、AlexaFooterActionButtonと組み合わせるを参照してください。	中	1.5.0
hasHeader	ブール値	true	trueの場合、タップターゲットのサイズを小さくして、ヘッダーがPress Stateのタップターゲットに含まれないようにします。headerTitleとheaderTitleCanUseTwoLinesには、AlexaHeaderコンポーネントに指定した値と同じ値を設定します。AlexaPressStateコンポーネントは、スペースの量を正しく計算するためにこれらの値を使用します。itemsに値が設定されている場合は無視されます。	中	1.5.0
headerTitle	文字列	—	hasHeaderがtrueの場合に適用されます。タップターゲットのサイズを小さくして、ヘッダーがPress Stateのタップターゲットに含まれないようにするために使用されます。AlexaHeaderコンポーネントのheaderTitleプロパティに指定したものと同じ文字列を設定します。 注： このプロパティに設定した文字列をAlexaPressStateが表示するわけではありません。	中	1.5.0
headerTitleCanUseTwoLines	ブール値	false	hasHeaderがtrueの場合に適用されます。タップターゲットのサイズを小さくして、ヘッダーがPress Stateのタップターゲットに含まれないようにするために使用されます。AlexaHeaderコンポーネントのheaderTitleCanUseTwoLinesプロパティに指定した値と同じ値を設定します。	中	1.5.0
items	配列	—	表示する子コンポーネントまたはレイアウトの配列です。配列に複数の項目が含まれる場合、AlexaPressStateは、whenがtrueに評価される最初の項目を表示します。itemsに含まれる値が1つだけの場合、hasFooterButtonとhasHeaderの各パラメーターは無視され、AlexaPressStateは、ユーザーがタップできる領域をウィジェット全体にかぶせるように作成します。詳細については、AlexaPressStateの配置を参照してください。	中	1.5.0
primaryAction	コマンドの配列	—	ユーザーがウィジェットをタップしたときにトリガーするアクションです。	中	1.5.0
theme	文字列	dark	色のテーマをダークまたはライトに設定します。選択されたテーマによってコンポーネントの色が制御されます。	中	1.5.0
type	文字列	—	常にAlexaPressStateに設定します。	中	1.5.0

AlexaPressStateの配置

ドキュメントにAlexaPressStateを配置したら、次の手順のいずれかを実行します。

• AlexaPressStateに独自のレイアウトを入れ子にする。
• AlexaPressStateを独自のレイアウトの後に配置する。

AlexaPressStateに独自のレイアウトを入れ子にする

AlexaPressStateをmainTemplateのトップレベルコンポーネントとして配置するか、トップレベルのContainerの下に配置し、そのitemsプロパティに独自のデザインのコンポーネントを渡します。AlexaPressStateは独自のコンポーネントをラップし、ユーザーがタップできる領域をレイアウト全体にかぶせて作成します。

次の例は、AlexaPressStateをトップレベルコンポーネントとして配置した構造を示しています。

次の例は、AlexaPressStateをトップレベルのContainerの下に配置した構造を示しています。

AlexaPressStateは、単一の子コンポーネントを表示します。レイアウトに複数の子コンポーネントが必要な場合は、Containerを使用してください。

AlexaPressStateを独自のレイアウトの後に配置する

AlexaPressStateを、独自のデザインを構成するほかのコンポーネントの後に配置します。AlexaPressStateは、先行するコンポーネントを覆うオーバーレイとしてユーザーがタップできる領域を作成します。

この方法では、hasHeaderとhasFooterButtonの各プロパティを使用して、ユーザーがタップできる領域のサイズを制限できます。これにより、ヘッダーまたはフッターボタンをユーザーがタップ可能な別個の領域として定義して、タップ時に異なるコマンドを呼び出すことができます。

次の例は、ほかのコンポーネントの後にAlexaPressStateを配置した構造を示しています。

AlexaFooterActionButtonと組み合わせる

AlexaPressStateにAlexaFooterActionButtonを組み合わせると、ウィジェットに複数のタップターゲットを作成できます。この方法は、AlexaPhotoなど、AlexaFooterActionButtonが組み込まれたテンプレートを使用する場合にも機能します。

AlexaFooterActionButtonをAlexaPressStateと組み合わせて使用するには

1. デザイン内のすべてのコンポーネントの後にAlexaPressStateを配置します。
2. AlexaPressStateに次のプロパティを定義します。
   • primaryAction - メインのタップターゲットで実行するコマンドです。
   • hasFooterButton - trueに設定します。
3. AlexaFooterActionButtonをデザインの一部として含めます。
4. AlexaFooterActionButtonのprimaryActionに、ユーザーがフッターボタンをタップしたときに実行するコマンドを設定します。

AlexaPressStateの例

以下は、ユーザーがタップできる領域が2つあるウィジェットの例です。この例では、AlexaPhotoを使用してテキスト付きの写真を表示します。AlexaPhotoでは、buttonTextとprimaryActionを設定してフッターアクションボタンを含めます。hasHeaderがtrueに設定されているため、ヘッダー領域はPress State領域から除外されます。

---

以下は、同様のウィジェットを表示する例ですが、ユーザーがタップできる領域は1つだけです。この例では、AlexaPhotoを使用してヘッダーを表示します。ウィジェットの任意の場所をタップすると、AlexaPressStateコマンドがアクティブ化されます。

---

関連トピック

• レスポンシブ対応コンポーネントとテンプレート
• AlexaHeader
• AlexaFooterActionButton（ウィジェット）
• TouchWrapper

---

---

最終更新日: 2025 年 12 月 23 日