Check Box

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

互換性

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

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

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

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

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

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

AlexaCheckboxのパラメーター

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

名前	型	デフォルト	説明	ウィジェットのサポート	追加されたバージョン
`accessibilityLabel`	文字列	—	チェックボックスを説明する文字列です。ユーザーがボタンを押したときに、この文字列が読み上げられます。	サポートされません	1.2.0
`checkboxHeight`	ディメンション	viewportに基づく高さ	チェックボックスの高さです。	サポートされません	1.2.0
`checkboxWidth`	ディメンション	viewportに基づく幅	チェックボックスの幅です。	サポートされません	1.2.0
`entities`	配列	—	このコンポーネントにバインドするentityデータの配列です。	サポートされません	1.2.0
`primaryAction`	コマンド	—	ユーザーがチェックボックスを選択したときに実行するアクションです。	サポートされません	1.2.0
`selectedColor`	色	青色。具体的な色調は指定された`theme`によって決まります。	チェックボックスがオンの場合（`checked`が`true`の場合）に塗りつぶしに使用する色です。	サポートされません	1.2.0
`theme`	文字列	`dark`	色のテーマをダークまたはライトに設定します。テーマを選択することでコンポーネントの色を制御します。	サポートされません	1.2.0
`type`	文字列	—	常に`AlexaCheckbox`に設定されます。	サポートされません	1.2.0

checked（チェック）状態

AlexaCheckboxは、標準のcheckedコンポーネント状態を使用して、コンポーネントをオンとオフのどちらとして表示するかを判断します。ドキュメントにコンポーネントを配置したら、checkedをtrueまたはfalseに初期化します。

checkedをtrueに設定すると、チェックボックスは単色で塗りつぶされ、チェックマークが表示されます。
falseに設定すると、チェックボックスは枠線だけの空のボックスとして表示されます。コンポーネントは、デフォルトでcheckedをfalseに設定します。

AlexaCheckboxには、「不確定」（indeterminate）という3番目の状態があります。この状態は、チェックボックスが「部分的に」選択されているというシナリオで使用します。たとえば、サブオプションのグループを表すチェックボックスの一部が選択され、一部が選択されていない場合などです。この状態の詳細については、isIndeterminateプロパティを参照してください。

ユーザーがチェックボックスを操作すると、コンポーネントは自動的にchecked状態を切り替えます。手動でchecked状態の追跡や更新を行う必要はありません。

以下の例では、チェックボックスを2行にわたって表示しています。1行目のチェックボックスは、checkedをtrueに初期化しています。2行目は、checkedをデフォルトのfalseのままにしています。

disabled（無効）状態

AlexaCheckboxは、標準のdisabledコンポーネント状態を使用して、コンポーネントを有効と無効のどちらとして表示するかを決定します。disabledがtrueの場合、チェックボックスはタッチやリモコンなどのユーザー操作に一切応答しません。

disabled状態はchecked状態とは独立しているため、無効な状態のチェックボックスは、オンとしてもオフとしても表示できます。

以下の例では、disabledのチェックボックスを2列にわたって表示しています。1行目の各チェックボックスは、checkedをtrueに設定しています。2行目は、checkedをデフォルトのfalseのままにしています。

isIndeterminate

AlexaCheckboxは、isIndeterminateプロパティを使用して3番目のチェックボックス状態を表します。isIndeterminateがtrueの場合、チェックボックスは単色で塗りつぶされ、チェックマークではなく横線が表示されます。

この状態を使って、「部分的に」選択されたチェックボックスを表します。たとえば、それぞれがチェックボックスを持つ、項目のリストを表示するとします。ヘッダーには、代表のチェックボックスを1つ表示し、リスト全体の状態を表します。項目の一部が選択されている場合、ヘッダーのチェックボックスを不確定状態として表示します。

ユーザーがチェックボックスをオンまたはオフにすると、AlexaCheckboxはchecked状態を切り替え、isIndeterminateをデフォルトのfalseに設定します。チェックボックスの最終結果は、checkedを切り替えた結果に従います。たとえば、次のようになります。

checkedがtrueでisIndeterminateがtrue：
- チェックボックスは不確定状態です。
- ユーザーがチェックボックスを選択すると、コンポーネントはcheckedとisIndeterminateの両方をfalseに更新します。チェックボックスはオフ状態に変わります。
checkedがfalseでisIndeterminateがtrue：
- チェックボックスは不確定状態です。
- ユーザーがチェックボックスを選択すると、コンポーネントはcheckedをtrue、isIndeterminateをfalseに更新します。チェックボックスはオン状態に変わります。

どちらのシナリオでも、ユーザーがもう一度チェックボックスをオンにすると、コンポーネントはcheckedを更新しますが、isIndeterminateは変更しません。チェックボックスが自動的にisIndeterminate状態に戻ることはありません。ユーザーの操作中にisIndeterminateをtrueに設定するには、SetValueコマンドを使用します。

アクセシビリティ

AlexaCheckboxコンポーネントは、チェックボックスとして構成されたタッチ可能なコンポーネントです。VoiceViewスクリーンリーダーが有効になっているデバイスでは、ユーザーはコンポーネントをタップして選択し、画面をダブルタップしてチェックボックスをオンまたはオフにすることができます。

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

AlexaCheckboxの例

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

このページは役に立ちましたか？

フィードバックを送信

最終更新日: 2025 年 10 月 09 日