Switch
Alexaスイッチレスポンシブ対応コンポーネント（AlexaSwitch）はユーザーがスライドしてオンとオフを切り替えられるスイッチを表示します。スイッチのサイズ、色、ユーザーがスイッチを操作したときに実行するコマンドを制御できます。
alexa-layoutsパッケージを読み込む
AlexaSwitchを使用するには、alexa-layoutsパッケージを読み込みます。
alexa-layoutsパッケージの最新バージョンは1.2.0です。AlexaSwitchはバージョン1.2.0で導入されました。
AlexaSwitchのパラメーター
type以外のパラメーターはすべてオプションです。
| 名前 | 型 | デフォルト | 説明 | 追加または更新されたバージョン |
|---|---|---|---|---|
|
|
文字列 |
なし |
スイッチを説明する文字列です。ユーザーがスイッチを選択したときに、この文字列が読み上げられます。 |
1.2.0 |
|
|
青色。具体的な色調は指定した |
スイッチが「オン」（ |
1.2.0 |
|
|
|
配列 |
[] |
このコンポーネントにバインドするentityデータの配列です。 |
1.2.0 |
|
|
なし |
ユーザーがスイッチを選択したときに実行されるアクションです。 |
1.2.0 |
|
|
|
viewportに基づく高さ |
スイッチの高さです。 |
1.2.0 |
|
|
|
viewportに基づく幅 |
スイッチの幅です。 |
1.2.0 |
|
|
|
文字列 |
dark |
色のテーマをダークまたはライトに設定します。テーマを選択することでコンポーネントの色を制御します。 |
1.2.0 |
|
|
文字列 |
なし |
常に |
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の例
異なる色とサイズのスイッチ
以下は、異なる色とサイズの複数のスイッチを表示するドキュメント全体とデータソースの例です。スイッチはデータソースで指定します。各行には、ダークとライトのテーマで同じスイッチを表示しています。スイッチを選択すると、ユーザー定義のコマンドが実行され、ヘッダーのサブタイトルが選択されたスイッチに関する情報で更新されます。コマンドは、AlexaCheckboxの現在のchecked状態をevent.source.checkedプロパティから取得します。
スイッチのchecked状態をスキルに送信する
以下は、2つのAlexaSwitchコンポーネントを使ったドキュメント全体の例です。ユーザーがスイッチを選択すると、スイッチはSendEventコマンドを実行してスキルにUserEventリクエストを送信します。SendEventにcomponentsプロパティが含まれるため、UserEventリクエストには2つのスイッチのIDと現在のchecked状態が含まれます。
以下は、ユーザーが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"
}
