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
プロパティから取得します。
