Button
Buttonレスポンシブ対応コンポーネント(AlexaButton
)は、タッチパネルやコントローラーで選択できるボタンを表示します。ボタンに表示されるテキスト、ボタンの外観、ボタンを選択したときに実行されるコマンドを設定できます。
alexa-layoutsパッケージを読み込む
AlexaButton
を使用するには、alexa-layoutsパッケージを読み込みます。
alexa-layouts
パッケージの最新バージョンは1.2.0
です。AlexaButton
はバージョン1.1.0
で導入されました。
このページの上部にあるその他のバージョンオプションをクリックすると、別のバージョンのAlexaButton
ドキュメントが表示されます。パラメーターの表に、各パラメーターが追加されたalexa-layouts
のバージョンが記載されています。
AlexaButtonのパラメーター
type
以外のパラメーターはすべてオプションです。
名前 | 型 | デフォルト | 説明 | 追加または更新されたバージョン |
---|---|---|---|---|
|
文字列 |
なし |
ボタンを説明する文字列です。ユーザーがボタンを押したときに、この文字列が読み上げられます。 |
1.1.0 |
|
文字列 |
contained |
ボタンのスタイルです。 |
1.2.0 |
|
文字列 |
"buttonText" |
ボタンに表示されるテキストです。ボタンの目的を示します。 |
1.1.0 |
|
配列 |
[] |
このコンポーネントにバインドするentityデータの配列です。 |
1.2.0 |
|
なし |
ユーザーがボタンを選択したときに実行されるアクションです。 |
1.1.0 |
|
|
文字列 |
dark |
色のテーマをダークまたはライトに設定します。テーマを選択することでコンポーネントの色を制御します。 |
1.1.0 |
|
ブール値 |
false |
trueの場合、ボタンのテキストにtouch-forwardテキストスタイルを使用します。このスタイルではボタンのテキストに斜体が適用されません。falseの場合、ユーザーが音声でボタンを操作していると想定され、デフォルトのvoice-enabledテキストスタイルが使用されます。 |
1.2.0 |
|
文字列 |
なし |
常に |
1.1.0 |
ボタンの外観
ボタンの外観は、buttonStyle
、touchForward
の各プロパティを使って設定します。指定されたスタイルによって、Alexaの視覚要素デザイン全体で一貫した外観が適用されます。
ボタンのスタイルを設定するには、buttonStyle
プロパティを次のいずれかの値に設定します。
contained
– このスタイルはユーザーに取らせたいメインのアクションに使用します。このスタイルを適用すると、ボタンが半透明の背景色で塗りつぶされます。outlined
– このスタイルは第2アクションに使用します。このスタイルを適用すると、ボタンの枠線が単色で描画されますが、本体は透明になります。ingress
– このスタイルは「確認」、「はい」、「次へ」などのアクションに使用します。このスタイルはcontained
と同様、単色を使用しますが、色スキーマは異なります。egress
– このスタイルは「拒否」、「いいえ」、「戻る」などのアクションに使用します。このスタイルは枠線を表示しますが、本体は透明です。
touchForward
の切り替えにより、ユーザーが行うと想定されるボタン操作に応じて、ボタンのフォントスタイルを設定できます。
- 音声対話でのボタン操作を想定する場合は、
touchForward
をfalse
に設定します。この設定がデフォルトです。ボタンのbuttonText
を斜体フォントで表示することで、ユーザーがタッチだけでなく音声でもボタンをトリガーできることを表します。対話モデルでユーザーが音声でボタンを選択できるようにしてください。 - タッチでのボタン操作を想定する場合は、
touchForward
をtrue
に設定します。ボタンのbuttonText
を通常フォントで表示することで、音声ではボタンを操作できないことを表します。
AlexaButton
のデザインガイダンスについては、Buttonを参照してください。
AlexaButtonの例
以下は、デフォルトのcontained
と音声ファースト設定を使った例です。ユーザーがボタンを選択すると、ボタンはSendEvent
コマンドを実行してスキルにUserEvent
を送信します。
{
"type": "AlexaButton",
"buttonText": "デフォルト設定のボタン",
"id": "idForThisButton",
"primaryAction": {
"type": "SendEvent",
"arguments": [
"AlexaButton"
]
}
}
以下は、buttonStyle
の4つのオプションとtouchForward
の2つの設定を表示するドキュメント全体とデータソースの例です。
このドキュメントの結果の画像については、前述したボタンの外観を参照してください。
関連トピック
最終更新日: 2020 年 11 月 20 日