Radio Button



Radio Button

Alexaスイッチレスポンシブ対応コンポーネント(AlexaRadioButton)は、ユーザーがオンとオフを切り替えられるラジオボタンを表示します。ボタンのサイズ、色、ユーザーがボタンを操作したときに実行するコマンドを制御できます。

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

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

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

AlexaRadioButtonのパラメーター

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

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

accessibilityLabel

文字列

なし

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

1.2.0

entities

配列

[]

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

1.2.0

primaryAction

コマンド

なし

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

1.2.0

radioButtonColor

青色。具体的な色調は指定したthemeによって異なります。

ラジオボタン選択時(checkedtrue)に塗りつぶしに使われる色です。

1.2.0

radioButtonHeight

ディメンション

viewportに基づく高さ

ラジオボタンの高さです。

1.2.0

radioButtonWidth

ディメンション

viewportに基づく幅

ラジオボタンの幅です。

1.2.0

theme

文字列

dark

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

1.2.0

type

文字列

なし

常にAlexaRadioButtonに設定されます。

1.2.0

checked(チェック)状態

AlexaRadioButtonは、標準のcheckedコンポーネント状態を使って、コンポーネントを選択済み、選択なしのどちらで表示するかを判断します。ドキュメントにコンポーネントを配置したら、checkedtruefalseに初期化します。

  • checkedtrueに設定すると、ラジオボタンが選択済み状態で表示されます。この状態は、円が単色で塗りつぶされ、中央に黒いドットが表示されます。
  • falseに設定すると、ラジオボタンが選択なし状態で表示されます。この状態では、円の外枠が表示されます。コンポーネントのchecked状態のデフォルトはfalseです。

ユーザーがボタンを操作すると、コンポーネントは自動的にchecked状態を切り替えます。手動でchecked状態をトラッキングしたり、更新したりする必要はありません。

以下の例では、4つのラジオボタンを2行にわたって表示しています。1行目のボタンは、checkedtrueに初期化しています。2行目は、checkedをデフォルトのfalseのままにしています。

checked状態をオンとオフに設定したラジオボタンの例
checked状態をオンとオフに設定したラジオボタンの例

disabled(無効)状態

AlexaRadioButtonは、標準のdisabledコンポーネント状態を使って、コンポーネントを有効、無効のどちらとして表示するかを判断します。disabledtrueの場合、ラジオボタンはタッチやリモートなどのユーザー操作に一切反応しません。

disabled状態は、checked状態に依存しません。このため、無効のラジオボタンは、いずれのチェック状態でも表示できます。

以下の例では、4つの無効なラジオボタンを2行にわたって表示しています。1行目のラジオボタンは、checkedtrueに設定しています。2行目は、checkedをデフォルトのfalseのままにしています。

checked状態とdisabled状態の組み合わせ
checked状態とdisabled状態の組み合わせ

ラジオボタングループの状態を管理する

レイアウトに追加した各ラジオボタンの動作は、ほかのラジオボタンやその他のコンポーネントに依存しません。レイアウト上で複数のラジオボタンが自動的にグループ化されることはありません。

複数のAlexaRadioButtonコンポーネントをグループ化して相互に排他的なオプションを表示する必要がある場合、ラジオボタンを接続するロジックを手動で追加する必要があります。各AlexaRadioButtonprimaryActionプロパティを使用して、グループ内のほかのボタンのchecked状態を変更し、ユーザーがすべてのオプションを選択解除したり、複数のオプションを選択したりしないようにするコマンドを実行します。コマンドが以下のシナリオに対応できるようにします。

  • ユーザーが新しい項目を選択する:前の項目のcheckedプロパティをfalseに設定して、前に選択していたラジオボタンをオフにします。
  • ユーザーが同じ項目を選択する:現在の項目のcheckedプロパティをtrueに設定します。これが必要なのは、デフォルトのAlexaRadioButton動作がオン/オフ切り替えスイッチとして機能するためです。選択済みのボタンをもう一度選択すると、選択が解除されます。checkedtrueに設定することで、この動作を上書きします。

以下は、現在選択されている項目をトラッキングしてグループで状態を管理するアプローチの1つです。

  1. グループ内のAlexaRadioButtonの各インスタンスに一意のidを割り当てます。
  2. 選択されている項目をトラッキングするには、bindプロパティを使って変数を作成します。ラジオボタンを含む親コンポーネントでこの変数を定義します。

     {
       "bind": [
         {
           "name": "CurrentSelectedRadioButtonId",
           "value": "stringIDOfFirstButtonToSelect"
         }
       ]
     }
    
  3. ラジオボタンとbindプロパティを更新する一連のコマンドを定義します。これらのコマンドを各AlexaRadioButtonprimaryActionプロパティに割り当て、ユーザーがいずれかのボタンを選択するたびに実行されるようにします。

以下は、前に選択されていたラジオボタンの選択を解除し、新しく選択されたラジオボタンのidCurrentSelectedRadioButtonIdという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プロパティから取得します。

異なる色とサイズのAlexaRadioButtonの例
異なる色とサイズのAlexaRadioButtonの例