Radio Button
Alexaスイッチレスポンシブ対応コンポーネント（AlexaRadioButton）は、ユーザーがオンとオフを切り替えられるラジオボタンを表示します。ボタンのサイズ、色、ユーザーがボタンを操作したときに実行するコマンドを制御できます。
alexa-layoutsパッケージを読み込む
AlexaRadioButtonを使用するには、alexa-layoutsパッケージを読み込みます。
alexa-layoutsパッケージの最新バージョンは1.2.0です。AlexaRadioButtonはバージョン1.2.0で導入されました。
AlexaRadioButtonのパラメーター
type以外のパラメーターはすべてオプションです。
| 名前 | 型 | デフォルト | 説明 | 追加または更新されたバージョン |
|---|---|---|---|---|
|
|
文字列 |
なし |
ラジオボタンを説明する文字列です。ユーザーがボタンを押したときに、この文字列が読み上げられます。 |
1.2.0 |
|
|
配列 |
[] |
このコンポーネントにバインドするentityデータの配列です。 |
1.2.0 |
|
|
なし |
ユーザーがラジオボタンを選択したときに実行されるアクションです。 |
1.2.0 |
|
|
|
青色。具体的な色調は指定した |
ラジオボタン選択時（ |
1.2.0 |
|
|
|
viewportに基づく高さ |
ラジオボタンの高さです。 |
1.2.0 |
|
|
|
viewportに基づく幅 |
ラジオボタンの幅です。 |
1.2.0 |
|
|
|
文字列 |
dark |
色のテーマをダークまたはライトに設定します。テーマを選択することでコンポーネントの色を制御します。 |
1.2.0 |
|
|
文字列 |
なし |
常に |
1.2.0 |
checked（チェック）状態
AlexaRadioButtonは、標準のcheckedコンポーネント状態を使って、コンポーネントを選択済み、選択なしのどちらで表示するかを判断します。ドキュメントにコンポーネントを配置したら、checkedをtrueかfalseに初期化します。
checkedをtrueに設定すると、ラジオボタンが選択済み状態で表示されます。この状態は、円が単色で塗りつぶされ、中央に黒いドットが表示されます。falseに設定すると、ラジオボタンが選択なし状態で表示されます。この状態では、円の外枠が表示されます。コンポーネントのchecked状態のデフォルトはfalseです。
ユーザーがボタンを操作すると、コンポーネントは自動的にchecked状態を切り替えます。手動でchecked状態をトラッキングしたり、更新したりする必要はありません。
以下の例では、4つのラジオボタンを2行にわたって表示しています。1行目のボタンは、checkedをtrueに初期化しています。2行目は、checkedをデフォルトのfalseのままにしています。
disabled（無効）状態
AlexaRadioButtonは、標準のdisabledコンポーネント状態を使って、コンポーネントを有効、無効のどちらとして表示するかを判断します。disabledがtrueの場合、ラジオボタンはタッチやリモートなどのユーザー操作に一切反応しません。
disabled状態は、checked状態に依存しません。このため、無効のラジオボタンは、いずれのチェック状態でも表示できます。
以下の例では、4つの無効なラジオボタンを2行にわたって表示しています。1行目のラジオボタンは、checkedをtrueに設定しています。2行目は、checkedをデフォルトのfalseのままにしています。
ラジオボタングループの状態を管理する
レイアウトに追加した各ラジオボタンの動作は、ほかのラジオボタンやその他のコンポーネントに依存しません。レイアウト上で複数のラジオボタンが自動的にグループ化されることはありません。
複数のAlexaRadioButtonコンポーネントをグループ化して相互に排他的なオプションを表示する必要がある場合、ラジオボタンを接続するロジックを手動で追加する必要があります。各AlexaRadioButtonのprimaryActionプロパティを使用して、グループ内のほかのボタンのchecked状態を変更し、ユーザーがすべてのオプションを選択解除したり、複数のオプションを選択したりしないようにするコマンドを実行します。コマンドが以下のシナリオに対応できるようにします。
- ユーザーが新しい項目を選択する：前の項目の
checkedプロパティをfalseに設定して、前に選択していたラジオボタンをオフにします。 - ユーザーが同じ項目を選択する：現在の項目の
checkedプロパティをtrueに設定します。これが必要なのは、デフォルトのAlexaRadioButton動作がオン／オフ切り替えスイッチとして機能するためです。選択済みのボタンをもう一度選択すると、選択が解除されます。checkedをtrueに設定することで、この動作を上書きします。
以下は、現在選択されている項目をトラッキングしてグループで状態を管理するアプローチの1つです。
- グループ内の
AlexaRadioButtonの各インスタンスに一意のidを割り当てます。 -
選択されている項目をトラッキングするには、
bindプロパティを使って変数を作成します。ラジオボタンを含む親コンポーネントでこの変数を定義します。{ "bind": [ { "name": "CurrentSelectedRadioButtonId", "value": "stringIDOfFirstButtonToSelect" } ] } - ラジオボタンと
bindプロパティを更新する一連のコマンドを定義します。これらのコマンドを各AlexaRadioButtonのprimaryActionプロパティに割り当て、ユーザーがいずれかのボタンを選択するたびに実行されるようにします。
以下は、前に選択されていたラジオボタンの選択を解除し、新しく選択されたラジオボタンのidをCurrentSelectedRadioButtonIdというbindプロパティに保存するユーザー定義のコマンドの例です。
{
"ManageRadioButtonGroupState": {
"command": [
{
"when": "${event.source.id != CurrentSelectedRadioButtonId}",
"type": "Sequential",
"description": "ユーザーが別のラジオボタンを選択しました。",
"commands": [
{
"type": "SetValue",
"description": "前に選択されていた項目のcheckedプロパティをfalseに設定します。",
"componentId": "${CurrentSelectedRadioButtonId}",
"property": "checked",
"value": false
},
{
"type": "SetValue",
"description": "新しい項目のIDをCurrentSelectedRadioButtonIdというバインド変数に保存します。",
"property": "CurrentSelectedRadioButtonId",
"value": "${event.source.id}"
}
]
},
{
"when": "${event.source.id == CurrentSelectedRadioButtonId}",
"description": "ユーザーが同じオプションを選択しました。通常のAlexaRadioButton動作を上書きし、この項目を再度選択します。",
"type": "SetValue",
"property": "checked",
"value": true
}
]
}
}
以下は、Sequenceを使ってラジオボタンのリストを表示するAPLドキュメント全体とデータソースの例です。ラジオボタンのIDとテキストは、データソースの配列で指定されます。この例には、AlexaRadioButtonの横に説明テキストを配置するRadioButtonRowというレイアウトが含まれます。画面下の送信ボタンを押すと、選択されたオプションのIDとともにUserEventがスキルに送信されます。
AlexaRadioButtonの例
以下は、異なる色とサイズの複数のラジオボタンを表示するドキュメント全体とデータソースの例です。ラジオボタンはデータソースで指定します。各行には、ダークとライトのテーマで同じラジオボタンを表示しています。ラジオボタンをオンにすると、ユーザー定義のコマンドが実行され、ヘッダーのサブタイトルがオンにされたラジオボタンに関する情報で更新されます。コマンドは、AlexaCheckboxの現在のchecked状態をevent.source.checkedプロパティから取得します。
