Switch

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

互換性

AlexaSwitchは、alexa-viewport-profilesパッケージのすべての標準ビューポートプロファイルに対応するように設計されています。

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

サポートされていないビューポートでAlexaSwitchを使用すると、予期しない動作が発生する場合があります。ビューポートプロファイルの詳細については、ビューポートプロファイルを参照してください。

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

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

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

AlexaSwitchのパラメーター

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

名前	型	デフォルト	説明	ウィジェットのサポート	追加されたバージョン
`accessibilityLabel`	文字列	—	スイッチを説明する文字列です。ユーザーがスイッチを選択したときに、この文字列が読み上げられます。	サポートされません	1.2.0
`activeColor`	色	青色。具体的な色調は指定された`theme`によって決まります。	スイッチが「オン」状態のとき（`checked`が`true`の場合）にスイッチに使用する色です。	サポートされません	1.2.0
`entities`	配列	—	このコンポーネントにバインドするentityデータの配列です。	サポートされません	1.2.0
`layoutDirection`	文字列	`${environment.layoutDirection}`	コンテンツのレイアウト方向を指定します。このプロパティは、`LTR`（左から右）または`RTL`（右から左）に設定します。このプロパティには、コンポーネントの親コンテナーの`layoutDirection`は継承されません。このため、必要に応じて明示的にこのプロパティを設定してください。レスポンシブ対応コンポーネントでの右から左に記述する言語のサポートの詳細については、右から左に記述する言語のサポートを参照してください。	サポートされません	1.4.0
`primaryAction`	コマンド	—	ユーザーがスイッチを選択したときに実行されるアクションです。	サポートされません	1.2.0
`switchHeight`	ディメンション	ビューポートに基づく高さ	スイッチの高さです。	サポートされません	1.2.0
`switchWidth`	ディメンション	ビューポートに基づく幅	スイッチの幅です。	サポートされません	1.2.0
`theme`	文字列	`dark`	色のテーマをダークまたはライトに設定します。選択されたテーマによってコンポーネントの色が制御されます。	サポートされません	1.2.0
`type`	文字列	—	常に`AlexaSwitch`に設定します。	サポートされません	1.2.0

checked（チェック）状態

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

checkedをtrueに設定すると、スイッチがオンの位置になり、サムインジケーターが右側に表示されます。
falseに設定すると、スイッチがオフの状態になり、サムインジケーターが左側に表示されます。コンポーネントは、デフォルトでcheckedをfalseに設定します。

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

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

disabled（無効）状態

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

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

以下の例では、4つの無効なスイッチを2行にわたって表示しています。1行目のスイッチは、checkedをtrueに設定しています。2行目は、checkedをデフォルトのfalseのままにしています。

アクセシビリティ

AlexaSwitchコンポーネントは、スイッチとして設定されたタッチ対応コンポーネントです。VoiceViewスクリーンリーダーが有効なデバイスでは、ユーザーはコンポーネントをタップして選択した後、画面をダブルタップしてスイッチのオン／オフを切り替えることができます。

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

AlexaSwitchの例

異なる色とサイズのスイッチ

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

スイッチのchecked状態をスキルに送信する

以下の例では、2つのAlexaSwitchコンポーネントを含む完全なドキュメントを示します。ユーザーがスイッチを選択すると、スイッチはSendEventコマンドを実行し、スキルにUserEventリクエストを送信します。SendEventにはcomponentsプロパティが含まれるため、UserEventリクエストには両方のスイッチのIDおよび現在のchecked状態が含まれます。

例に示されているSendEventコマンドをテストするには、コードをスキルにコピーし、開発者コンソールのデバイスまたはシミュレーターでテストします。

以下の例は、ユーザーが2つ目のスイッチ（exampleSwitch2）をオフからオンに切り替えたときにスキルが受け取るUserEventを示しています。リクエストのcomponentsプロパティには、両方のAlexaSwitchコンポーネントの現在のchecked状態が含まれます。

{
  "type": "Alexa.Presentation.APL.UserEvent",
  "requestId": "amzn1.echo-api.request.1",
  "timestamp": "2020-10-12T20:25:57Z",
  "locale": "ja-JP",
  "arguments": [
    "AlexaSwitchが変更されました",
    "exampleSwitch2"
  ],
  "components": {
    "exampleSwitch2": true,
    "exampleSwitch1": true
  },
  "source": {
    "type": "VectorGraphic",
    "handler": "Press",
    "id": "exampleSwitch2",
    "value": false
  },
  "token": "switchSendEventCheckedStateExampleToken"
}

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

フィードバックを送信

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