Button

Button

Alexa Buttonレスポンシブ対応コンポーネント（AlexaButton）は、ユーザーがタッチパネルやコントローラーで選択できるボタンを表示します。ボタンに表示されるテキスト、ボタンの外観、ボタンを選択したときに実行されるコマンドを設定できます。

互換性

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

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

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

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

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

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

AlexaButtonのパラメーター

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

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

accessibilityLabel

文字列

buttonText

ボタンを説明する文字列です。ユーザーがボタンを押したときに、この文字列が読み上げられます。

サポートされません

1.1.0

buttonIconName

文字列

—

alexa-iconパッケージからボタンに表示するアイコンの名前です。有効なアイコン名の一覧については、Alexaアイコンライブラリリファレンスを参照してください。

buttonIconSourceとbuttonIconNameの両方を設定しないようにしてください。両方のプロパティを設定すると、ボタンにアイコンが表示されなくなります。

サポートされません

1.6.0

buttonIconSource

文字列

—

ボタンに表示するカスタムAVGアイコンの名前です。指定するAVGは、ドキュメント内またはインポートされたパッケージ内で定義されている必要があります。

buttonIconSourceとbuttonIconNameの両方を設定しないようにしてください。両方のプロパティを設定すると、ボタンにアイコンが表示されなくなります。

サポートされません

1.6.0

buttonIconStyle

文字列

—

buttonIconSourceに値が指定されている場合に適用されます。カスタムアイコンソースに渡すベクターグラフィックのスタイルを指定します。

サポートされません

1.6.0

buttonStyle

文字列

contained

ボタンのスタイルです。設定できる値は、contained、outlined、ingress、egress、borderlessのいずれかです。

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

サポートされません

1.2.0

buttonText

文字列

—

ボタンに表示されるテキストです。ボタンの目的を示します。

サポートされません

1.1.0

entities

配列

—

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

サポートされません

1.2.0

lang

文字列

${environment.lang}

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

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

サポートされません

1.4.0

layoutDirection

文字列

inherit

ボタンのレイアウト方向を指定します。このプロパティは、LTR（左から右）またはRTL（右から左）に設定します。設定しない場合、親コンポーネントに指定されたlayoutDirectionが継承されます。

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

サポートされません

1.4.0

primaryAction

コマンド

—

ユーザーがボタンを選択したときに実行されるアクションです。

サポートされません

1.1.0

theme

文字列

dark

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

サポートされません

1.1.0

touchForward

ブール値

false

trueの場合、ボタンテキストに「タッチ前提」テキストスタイルが適用されます。このスタイルは、ボタンテキストを斜体にせずに表示します。falseの場合、ボタンは音声で操作されると想定され、デフォルトの「音声対応」テキストスタイルが適用されます。AlexaButtonのスタイル設定の詳細については、ボタンの外観を参照してください。

サポートされません

1.2.0

type

文字列

—

常にAlexaButtonに設定されます。

サポートされません

1.1.0

アクセシビリティ

AlexaButtonコンポーネントは、ボタンとして構成されたタッチ可能なコンポーネントです。VoiceViewスクリーンリーダーが有効になっているデバイスでは、ユーザーはコンポーネントをタップして選択し、画面をダブルタップしてボタンをアクティブにすることができます。

スクリーンリーダーは、accessibilityLabel文字列を読み上げてAlexaButtonコンポーネントを説明します。accessibilityLabelは、デフォルトでbuttonTextプロパティの値になります。buttonTextを設定せずにアイコンのみのボタンを作成する場合は、必ずaccessibilityLabelプロパティにボタンの目的を説明する文字列を設定してください。

アクセシビリティとAPLの詳細については、APLアクセシビリティガイドを参照してください。

ボタンの外観

ボタンの外観は、buttonStyleプロパティとtouchForwardプロパティを使用して設定します。指定されたスタイルによって、Alexaの視覚要素デザイン全体で一貫した外観が適用されます。

buttonStyle

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

  • contained - このスタイルは、ユーザーに実行させるメインアクションに使用します。このスタイルを適用すると、ボタンが半透明の背景色で塗りつぶされます。
  • outlined - このスタイルは、第2アクションに使用します。このスタイルを適用すると、ボタンの枠線が単色で描画されますが、本体は透明になります。
  • ingress - このスタイルは、「確認」、「はい」、「次へ」などのアクションに使用します。このスタイルでは、containedと同様に単色が使用されますが、色スキーマは異なります。
  • egress - このスタイルは、「拒否」、「いいえ」、「戻る」などのアクションに使用します。このスタイルは枠線を表示しますが、本体は透明です。
  • borderless - このスタイルは、通常の状態では輪郭も色もないボタンを表示します。pressedやfocusedの状態になると、ボタンの輪郭が表示されます。

touchForward

touchForwardオプションを使用すると、ユーザーにどのようなボタン操作を想定するかに応じて、ボタンのフォントスタイルを設定できます。

  • 音声対話によるボタン操作を想定する場合は、touchForwardをfalseに設定します。この設定がデフォルトです。ユーザーが音声でボタンを選択できるように対話モデルを設計してください。
    • タッチだけでなく音声でもボタンをトリガーできることをユーザーに伝えるために、ボタンのテキストは「音声対応」スタイルで表示されます。
    • デフォルトの音声対応スタイルでは、テキストは斜体フォントで表示されます。
    • 言語固有のフォントによっては、斜体のテキストがサポートされない場合があります。このような言語では、ボタンテキストはプレーンテキストで表示されます。言語固有のフォントを使用するには、langプロパティに言語またはロケール文字列を設定します。たとえば、langプロパティがarまたはar-SA（アラビア語）の場合、ボタンテキストは斜体ではなくプレーンテキストで表示されます（APL 1.7およびalexa-layouts 1.4.0以降）。
  • 音声ではなく主にタッチによるボタン操作を想定する場合は、touchForwardをtrueに設定します。
    • ボタンのテキストは「タッチ前提」スタイルで表示され、ボタンが「音声対応」でないことを示します。
    • デフォルトのタッチ前提スタイルでは、テキストが斜体ではなくプレーンテキストで表示されます。
    • 斜体がサポートされない言語の場合は、音声対応スタイルと区別するために、ボタンテキストが自動的に引用符で囲まれます。たとえば、langプロパティがarまたはar-SA（アラビア語）の場合、ボタンテキストは引用符で囲まれます（APL 1.7およびalexa-layouts 1.4.0以降）。

buttonStyleオプションとtouchForwardオプションの例については、AlexaButtonの例を参照してください。

ボタンのアイコン

AlexaButtonにはアイコンを表示できます。表示するアイコンはAlexa Vector Graphic（AVG）であることが必要です。Amazonから提供されるアイコンライブラリのアイコンを使用することも、独自のアイコンを使用することもできます。

アイコンとbuttonTextの両方を指定すると、テキストの前にアイコンが表示されます。アイコンを指定してbuttonTextを指定しない場合、ボタンは小さくなり、テキストの代わりにアイコンが表示されます。buttonTextを指定しない場合は、必ずaccessibilityLabelプロパティにボタンの目的を説明する文字列を設定してください。

アイコンライブラリのアイコンを使用する

Alexaアイコンパッケージ（alexa-icon）は、AVG形式で定義されたアイコンのセットを提供します。使用可能なアイコンの一覧については、Alexaアイコンライブラリリファレンスを参照してください。ライブラリからアイコンを表示するには、パッケージをインポートし、buttonIconNameにアイコンの名前を設定する必要があります。

アイコンライブラリからアイコンを表示するには

  1. alexa-iconとalexa-layoutsの両方のパッケージをインポートします。 
     {
   "import": [
     {
       "name": "alexa-layouts",
       "version": "1.7.0"
     },
     {
       "name": "alexa-icon",
       "version": "1.0.0"
     }
   ]
 }
  2. ドキュメントにAlexaButtonを追加し、buttonIconNameにアイコンの名前を設定します。Alexaアイコンライブラリリファレンスに示されている名前を正確に入力してください。 
     {
   "type": "AlexaButton",
   "buttonText": "このボタンにはカレンダーアイコンが表示されます",
   "buttonIconName": "ic_calendar"
 }

次の例では、ボタンが並んだ行を2つ表示します。一方の行のボタンにはbuttonTextとbuttonIconNameを設定し、もう一方にはbuttonIconNameだけを設定します。2行目では、AlexaButtonコンポーネントにaccessibilityLabelを設定します。どちらの例でも、アイコン名とボタンテキストはデータソースから取得されます。

カスタムアイコンを使用する

カスタムアイコンを表示するには、buttonIconSourceプロパティに表示するAVGの名前を設定します。グラフィックは、ドキュメント内または外部パッケージで定義できます。

次の例では、カスタムアイコンのあるAlexaButtonを2つ表示します。

AlexaButtonの例

次の例では、buttonStyleの5つのオプションとtouchForwardの2つの設定を示すボタンを表示します。ユーザーがボタンを選択すると、ボタンはSetValueコマンドを実行してTextコンポーネント内のメッセージを更新します。

次の例では、langをar-saに設定し、layoutDirectionをRTLに設定して、同じ5つのボタンスタイルを表示します。

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

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