Radio Button

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

互換性

AlexaRadioButtonは、alexa-viewport-profilesパッケージのすべての標準Viewportプロファイルで動作するように設計されています。次のプロファイルに対応しています。

• すべての円形デバイスプロファイル
• すべての横長デバイスプロファイル
• すべての縦長デバイスプロファイル
• すべてのモバイルプロファイル
• すべてのテレビプロファイル

サポートされていないViewportでAlexaRadioButtonを使用すると、予期しない結果になることがあります。Viewportプロファイルの詳細については、Viewportプロファイルを参照してください。

alexa-layoutsパッケージをインポートする

AlexaRadioButtonを使用するには、alexa-layoutsパッケージをインポートします。

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

AlexaRadioButtonのパラメーター

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

名前	型	デフォルト	説明	ウィジェットのサポート	追加されたバージョン
accessibilityLabel	文字列	—	ラジオボタンを説明する文字列です。ユーザーがボタンを選択すると、ボイスオーバーでこの文字列が読み上げられます。	サポートされません	1.2.0
entities	配列	—	このコンポーネントにバインドするentityデータの配列です。	サポートされません	1.2.0
primaryAction	コマンド	—	ユーザーがラジオボタンを選択したときにトリガーするアクションです。	サポートされません	1.2.0
radioButtonColor	色	青色。具体的な色調は指定されたthemeによって決まります。	ラジオボタンが選択されている場合（checkedがtrueの場合）に塗りつぶしに使用する色です。	サポートされません	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コンポーネント状態を使用して、コンポーネントを選択済みと選択なしのどちらとして表示するかを判断します。ドキュメントにコンポーネントを配置したら、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コンポーネントは、ラジオボタンとして構成されたタッチ可能なコンポーネントです。VoiceViewスクリーンリーダーが有効になっているデバイスでは、ユーザーはコンポーネントをタップして選択し、画面をダブルタップしてボタンを選択または選択解除できます。

アクセシビリティとAPLの詳細については、APLアクセシビリティガイドを参照してください。

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

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

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

• ユーザーが新しい項目を選択した場合 - 以前の項目のcheckedプロパティをfalseに設定して、以前に選択されていたラジオボタンを解除します。
• ユーザーが同じ項目を選択した場合 - 現在の項目のcheckedプロパティをtrueに設定します。デフォルトのAlexaRadioButtonはオン／オフの切り替えとして動作するため、この処理が必要になります。デフォルトでは、選択済みのボタンをもう一度選択すると選択が解除されます。checkedをtrueに設定することで、この動作をオーバーライドします。

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

1. グループ内のAlexaRadioButtonの各インスタンスに一意のidを割り当てます。

2. 選択されている項目を追跡するために、bindプロパティを使用して変数を作成します。この変数は、ラジオボタンを含む親コンポーネントで定義します。

    {
      "bind": [
        {
          "name": "CurrentSelectedRadioButtonId",
          "value": "stringIDOfFirstButtonToSelect"
        }
      ]
    }
   

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

次の例は、以前に選択されていたラジオボタンの選択を解除し、新しく選択されたラジオボタンのidをCurrentSelectedRadioButtonIdというbindプロパティに保存するユーザー定義のコマンドを示しています。

以下は、Sequenceを使用してラジオボタンのリストを表示するAPLドキュメントとデータソースの例全体を示しています。ラジオボタンのIDとテキストは、データソースの配列で指定されます。この例には、AlexaRadioButtonの横に説明テキストを配置するRadioButtonRowというレイアウトが含まれます。画面の下部にあるSendボタンを押すと、選択されたオプションのIDと共にUserEventがスキルに送信されます。ユーザーイベントをテストするには、この例をスキルでテストしてください。

---

AlexaRadioButtonの例

以下は、異なる色とサイズの複数のラジオボタンを表示するドキュメント全体の例です。ラジオボタンはデータソースで提供されます。各行には、同じラジオボタンがダークとライトのテーマで表示されます。ラジオボタンを選択すると、ユーザー定義のコマンドが実行され、ヘッダーのサブタイトルが選択されたラジオボタンの情報で更新されます。コマンドは、AlexaRadioButtonの現在のchecked状態をevent.source.checkedプロパティから取得します。

---

関連トピック

• APL向けAlexaデザインシステム
• レスポンシブ対応コンポーネントとテンプレート
• Alexaデザインガイド： レスポンシブ対応コンポーネント（英語のみ）

---

---

最終更新日: 2025 年 11 月 19 日