Button

Button

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

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

AlexaButtonを使用するには、alexa-layoutsパッケージを読み込みます。

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

このページの上部にあるその他のバージョンオプションをクリックすると、別のバージョンのAlexaButtonドキュメントが表示されます。パラメーターの表に、各パラメーターが追加されたalexa-layoutsのバージョンが記載されています。

AlexaButtonのパラメーター

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

名前 型 デフォルト 説明 追加または更新されたバージョン

accessibilityLabel

文字列

なし

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

1.1.0

buttonStyle

文字列

contained

ボタンのスタイルです。contained、outlined、ingress、egressのいずれかに設定します。どのスタイルを適用するかについては、ボタンの外観を参照してください。themeによってボタンの色が決まります。

1.2.0

buttonText

文字列

"buttonText"

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

1.1.0

entities

配列

[]

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

1.2.0

primaryAction

コマンド

なし

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

1.1.0

theme

文字列

dark

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

1.1.0

touchForward

ブール値

false

trueの場合、ボタンのテキストにtouch-forwardテキストスタイルを使用します。このスタイルではボタンのテキストに斜体が適用されません。falseの場合、ユーザーが音声でボタンを操作していると想定され、デフォルトのvoice-enabledテキストスタイルが使用されます。AlexaButtonのスタイル設定については、ボタンの外観を参照してください。

1.2.0

type

文字列

なし

常にAlexaButtonに設定されます。

1.1.0

ボタンの外観

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

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

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

touchForwardの切り替えにより、ユーザーが行うと想定されるボタン操作に応じて、ボタンのフォントスタイルを設定できます。

  • 音声対話でのボタン操作を想定する場合は、touchForwardをfalseに設定します。この設定がデフォルトです。ボタンのbuttonTextを斜体フォントで表示することで、ユーザーがタッチだけでなく音声でもボタンをトリガーできることを表します。対話モデルでユーザーが音声でボタンを選択できるようにしてください。
  • タッチでのボタン操作を想定する場合は、touchForwardをtrueに設定します。ボタンのbuttonTextを通常フォントで表示することで、音声ではボタンを操作できないことを表します。
音声ファーストとタッチファーストのバリエーションによる4つのボタンスタイル
音声ファーストとタッチファーストのバリエーションによる4つのボタンスタイル

AlexaButtonのデザインガイダンスについては、Buttonを参照してください。

AlexaButtonの例

以下は、デフォルトのcontainedと音声ファースト設定を使った例です。ユーザーがボタンを選択すると、ボタンはSendEventコマンドを実行してスキルにUserEventを送信します。

{
  "type": "AlexaButton",
  "buttonText": "デフォルト設定のボタン",
  "id": "idForThisButton",
  "primaryAction": {
    "type": "SendEvent",
    "arguments": [
      "AlexaButton"
    ]
  }
}

以下は、buttonStyleの4つのオプションとtouchForwardの2つの設定を表示するドキュメント全体とデータソースの例です。

このドキュメントの結果の画像については、前述したボタンの外観を参照してください。

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

最終更新日: 2020 年 11 月 20 日