Footer Action Button（ウィジェット）

Footer Action Button（ウィジェット）

Alexa Footer Action Buttonレスポンシブ対応コンポーネント（AlexaFooterActionButton）は、ユーザーが選択できるボタンを表示します。ボタンに表示されるテキスト、ボタンの外観、ボタンを選択したときに実行されるコマンドを設定できます。このコンポーネントは、AlexaButtonのウィジェット向けのバリエーションです。

互換性

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

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

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

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

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

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

AlexaFooterActionButtonのパラメーター

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

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

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

accessibilityLabel

文字列

accessibilityLabel

ボタンを説明する文字列です。ユーザーがボタンを選択すると、ボイスオーバーでこの文字列が読み上げられます。

中

1.5.0

buttonStyle

文字列

contained

ボタンのスタイルです。containedまたはingressに設定します。どのスタイルを使用すればよいかの詳細については、ボタンの外観を参照してください。ボタンの色はthemeによって決まります。

中

1.5.0

buttonText

文字列

buttonText

ボタンに表示するテキストです。このテキストはボタンの目的を示している必要があります。

中

1.5.0

entities

配列

—

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

中

1.5.0

lang

文字列

${environment.lang}

ボタンに表示されるテキストの言語です。この言語によって、ボタンに使用されるデフォルトのフォントと書式が決まります。たとえば、ar-SAに設定すると、コンポーネントはデバイスでアラビア語フォントが利用可能であれば使用し、さらにタッチ前提と音声対応のスタイルに別々の書式を使用して、両者を区別できるようにします。この値はBCP-47文字列に設定します。

レスポンシブ対応コンポーネントの言語固有のフォントの詳細については、コンポーネントとテンプレートでの言語固有のフォントを参照してください。

中

1.5.0

primaryAction

コマンドの配列

—

ユーザーがボタンを選択したときにトリガーするアクションです。

中

1.5.0

theme

文字列

dark

色のテーマをダークまたはライトに設定します。選択されたテーマによってコンポーネントの色が制御されます。

中

1.5.0

touchForward

ブール値

false

trueの場合、ボタンテキストに「タッチ前提」テキストスタイルを使用します。このスタイルは、ボタンテキストを斜体にせずに表示します。falseの場合、デフォルトのテキストスタイルを使用します。AlexaFooterActionButtonのスタイル設定の詳細については、ボタンの外観を参照してください。

中

1.5.0

type

文字列

—

常にAlexaFooterActionButtonに設定します。

中

1.5.0

ボタンの外観

ボタンの外観は、buttonStyleプロパティとtouchForwardプロパティを使用して設定します。定義済みのスタイルにより、全体的なAlexaの視覚デザインと一貫性のある書式がボタンに適用されます。

「contained」スタイルのAlexaFooterActionButton
「ingress」スタイルのAlexaFooterActionButton

buttonStyle

ボタンのスタイルを設定するには、buttonStyleプロパティを次のいずれかの値に設定します。

  • contained - このスタイルは、ユーザーに実行させるメインアクションに使用します。このスタイルを適用すると、ボタンが半透明の背景色で塗りつぶされます。
  • ingress - このスタイルは、「確認」、「はい」、「次へ」などのアクションに使用します。 このスタイルでは、containedと同様に単色が使用されますが、色スキーマは異なります。

touchForward

ボタンのフォントスタイルを設定するには、touchForwardオプションを次の値に設定します。

  • 「音声対応」スタイル（ほとんどの言語では斜体のテキスト）を使用するには、touchForwardをfalseに設定します。
  • 「タッチ前提」スタイル（ほとんどの言語ではプレーンテキスト）を使用するには、touchForwardをtrueに設定します。

AlexaFooterActionButtonの例

以下の例では、2つのボタンを表示します。一方にはcontainedスタイルが設定され、もう一方にはingressスタイルが設定されています。ユーザーがボタンを選択すると、ボタンはSendEventコマンドを実行してスキルにUserEventを送信します。これにより、ウィジェットからスキルの完全なエクスペリエンスが起動します。SendEventコマンドをテストするには、この例をスキルにコピーしてください。

追従ボタンと非追従ボタンの例

絶対位置指定を使用すると、AlexaFooterActionButtonをウィジェットの下部に固定し、ウィジェットコンテンツの上に重ねて表示できます。次の例は、スクロールするウィジェットコンテンツの後に、追従ボタンを配置した場合と非追従ボタンを配置した場合の違いを示しています。

絶対位置指定を使用する追従ボタン

相対位置指定によってウィジェットコンテンツの後に表示される非追従ボタン

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

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