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"
}
