Switch



Switch

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

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

AlexaSwitchを使用するには、alexa-layoutsパッケージを読み込みます

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

AlexaSwitchのパラメーター

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

名前 デフォルト 説明 追加または更新されたバージョン

accessibilityLabel

文字列

なし

スイッチを説明する文字列です。ユーザーがスイッチを選択したときに、この文字列が読み上げられます。

1.2.0

activeColor

青色。具体的な色調は指定したthemeによって異なります。

スイッチが「オン」(checkedtrue)のときにスイッチに使用する色です。

1.2.0

entities

配列

[]

このコンポーネントにバインドするentityデータの配列です。

1.2.0

primaryAction

コマンド

なし

ユーザーがスイッチを選択したときに実行されるアクションです。

1.2.0

switchHeight

ディメンション

viewportに基づく高さ

スイッチの高さです。

1.2.0

switchWidth

ディメンション

viewportに基づく幅

スイッチの幅です。

1.2.0

theme

文字列

dark

色のテーマをダークまたはライトに設定します。テーマを選択することでコンポーネントの色を制御します。

1.2.0

type

文字列

なし

常にAlexaSwitchに設定されます。

1.2.0

checked(チェック)状態

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

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

ユーザーがスイッチを操作すると、コンポーネントは自動的にchecked状態を切り替えます。手動でchecked状態をトラッキングしたり、更新したりする必要はありません。

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

checked状態をオンとオフに設定したデフォルトのスイッチの例
checked状態をオンとオフに設定したデフォルトのスイッチの例

disabled(無効)状態

AlexaSwitchは、標準のdisabledコンポーネント状態を使って、コンポーネントを有効、無効のどちらとして表示するかを判断します。disabledtrueの場合、スイッチはタッチやリモートなどのユーザー操作に一切反応しません。

disabled状態は、checked状態に依存しません。このため、無効のスイッチはオン、オフのいずれの位置でも表示できます。

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

checked状態とdisabled状態の組み合わせ
checked状態とdisabled状態の組み合わせ

AlexaSwitchの例

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

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

異なる色とサイズのAlexaSwitchの例
異なる色とサイズのAlexaSwitchの例

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

以下は、2つのAlexaSwitchコンポーネントを使ったドキュメント全体の例です。ユーザーがスイッチを選択すると、スイッチはSendEventコマンドを実行してスキルにUserEventリクエストを送信します。SendEventcomponentsプロパティが含まれるため、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"
}
スキルにリクエストを送信する2つのAlexaSwitchコンポーネント
スキルにリクエストを送信する2つのAlexaSwitchコンポーネント