Slider Radial



Slider Radial

Alexa Sliderレスポンシブ対応コンポーネント(AlexaSliderRadial)は、円形の対話型プログレスバーを表示します。ユーザーは、コンテンツをスクラブしてバーをドラッグしたり、設定を変更したりできます。このコンポーネントは、Echo Spotなどの小型の円形デバイスで使用します。

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

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

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

AlexaSliderRadialパラメーター

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

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

accessibilityLabel

文字列

[Total]のうち[Progress]経過しました。たとえば、[2分]のうち[20秒]経過しましたなど。

プログレスバーを説明する文字列です。ユーザーがコンポーネントを選択したときに、この文字列が読み上げられます。

1.2.0

bufferValue

数値

0

スライダーで経過したバッファー時間を表す値です。スライダーは、明るい色で塗りつぶすことによって、この値を表します。バッファーバーは、bufferValueprogressValueより大きい場合に表示されます。

1.2.0

entities

配列

[]

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

1.2.0

metadataDisplayed

ブール値

false

trueの場合、スライダーには、thumbDisplayedAllStatesの値に応じて現在のprogressValuetotalValueが表示されます。

両方のプロパティがtrueのとき、スライダーには常にメタデータが表示されます。

metaDataDisplayedがtrueでthumbDisplayedAllStatesがfalseのとき、onDownonMoveのイベントの間はスライダーにメタデータが表示され、onUpイベントの間にはメタデータが非表示になります。

metaDataDisplayedがfalseの場合、スライダーにはメタデータが表示されません。

1.2.0

onDownCommand

コマンドの配列

onDownイベントが発生したときに実行されるコマンドの配列です。onDownイベントは、ユーザーがスライダーにタッチしたり、選択したりしたときに発生します。ユーザーがスライダーを操作したときにコマンドを実行するを参照してください。

1.2.0

onMoveCommand

コマンドの配列

onMoveイベントが発生したときに実行されるコマンドの配列です。onMoveイベントは、ユーザーがスライダーのつまみを移動させたときに発生します。ユーザーがスライダーを操作したときにコマンドを実行するを参照してください。

1.2.0

onUpCommand

コマンドの配列

onUpイベントが発生したときに実行されるコマンドの配列です。onUpイベントは、ユーザーがスライダーから指を離したときに発生します。ユーザーがスライダーを操作したときにコマンドを実行するを参照してください。

1.2.0

positionPropertyName

文字列

Thumbposition

スライダーのつまみを現在の位置に戻すのに使用するプロパティの名前です。これをデータバインディングで使用して、ユーザーがスライダーを動かすたびに位置を判断できます。現在のつまみの位置を取得するを参照してください。

1.2.0

progressFillColor

@colorComponent

スライダーの進行状況を示すのに使用する塗りつぶしの色です。

1.2.0

progressValue

数値

0

スライダーの完了を表す値です。スライダーは、progressFillColorで指定した色で塗りつぶし、この位置にスライダーのつまみを表示することでこの値を表します。

1.2.0

theme

文字列

dark

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

1.2.0

thumbColor

@colorComponent

スライダーのつまみアイコンの色です。

1.2.0

thumbDisplayedAllStates

ブール値

true

trueの場合、スライダーのつまみアイコンが常に表示されます。falseの場合、つまみアイコンはユーザーがスライダーを進めたり戻したりするまで表示されません。スライダーのアクティブおよび非アクティブ状態を参照してください。

1.2.0

totalValue

数値

0

スライダーが表す総時間を表す値をミリ秒で指定します。たとえば、totalValueを100,000に設定すると1分40秒を表すスライダーを作成できます。この値がスライダーのサイズに影響することはありません。スライダーは、常に小型の円形viewportの円周になります。

1.2.0

useDefaultSliderExpandTransition

ブール値

true

trueの場合、デフォルトのアニメーションを使って非アクティブのプログレスバー表示と対話型のスライダー表示が切り替わります。thumbDisplayedAllStatesがfalseの場合に適用されます。useDefaultSliderExpandTransitionがfalseの場合、ユーザーが操作を行った後でスライダーが非アクティブのプログレスバー表示に自動で戻ることはありません。スライダーのアクティブおよび非アクティブ状態を参照してください。

円形viewport上にスライダーを配置する

小型の円形デバイスにAlexaSliderRadialを表示するには、whenプロパティを使用します。

"when": "${@viewportProfile == @hubRoundSmall}"

コンポーネントは、長方形のデバイス上での表示用にはデザインされていません。長方形のデバイスには、代わりにAlexaSliderを使用します。

Viewportにほかのコンポーネントを追加するには、ContainerAlexaSliderRadialを配置してpositionabsoluteに設定します。その後、AlexaSliderRadialの後にほかのコンポーネントを追加します。これにより、ほかのコンポーネントがオーバーラップしてスライダーコンポーネントの上に表示されます。コンポーネントは、円形のスライダーの中に表示されます。

以下は、スライダーとTextコンポーネントを表示する条件付きのContainerの例です。Textコンポーネントは、データソースからのコンテンツを表示します。

{
  "when": "${@viewportProfile == @hubRoundSmall}",
  "type": "Container",
  "height": "100%",
  "width": "100%",
  "items": [
    {
      "type": "AlexaSliderRadial",
      "progressValue": "${sliderRadialExample.progressValue}",
      "bufferValue": "${sliderRadialExample.bufferValue}",
      "totalValue": "${sliderRadialExample.totalValue}",
      "progressFillColor": "blue",
      "position": "absolute"
    },
    {
      "type": "Text",
      "height": "100%",
      "paddingLeft": "@marginHorizontal",
      "paddingRight": "@marginHorizontal",
      "textAlignVertical": "center",
      "textAlign": "center",
      "text": "${sliderRadialExample.textToShow}"
    }
  ]
}

この例で使ったドキュメントとデータソースの全体については、AlexaSliderRadialの例を参照してください。

スライダーのアクティブおよび非アクティブ状態

AlexaSliderRadialは2つの状態で表示されます。

  • アクティブなスライダー – スライダーは円形デバイスの境界内に表示され、つまみアイコンが含まれます。ユーザーはアイコンをドラッグしてスライダー位置を動かします。
  • 非アクティブのプログレスバー – スライダーはつまみアイコンを非表示にし、小型の円形デバイスの端まで拡大されます。この状態のとき、スライダーはAlexaProgressBarRadialコンポーネントと同様に表示されます。ユーザーがスライダーを選択すると、スライダーはアクティブ状態に変わります。
アクティブ状態のAlexaSliderRadial
アクティブ状態のAlexaSliderRadial
非アクティブ状態のAlexaSliderRadial
非アクティブ状態のAlexaSliderRadial

これらの状態間のスライダーの遷移を制御するオプションを設定できます。

常にアクティブなスライダーを表示する

スライダーをアクティブ状態に保つには、thumbDisplayedAllStatesプロパティをtrueに設定します。スライダーは、常につまみ付きの「縮小」バージョンで表示されます。

状態間を自動遷移する

ユーザーがスライダーを操作しているときにスライダーのアクティブと非アクティブの状態間を自動で遷移するには、次のプロパティの両方を設定します。

  • thumbDisplayedAllStatesfalseに設定します。
  • useDefaultSliderExpandTransitiontrueに設定します。

初期状態のスライダーは、非アクティブのプログレスバー状態で表示されます。ユーザーがスライダーを選択すると、スライサーはアクティブ状態に縮小され、つまみアイコンが表示されます。ユーザーがスライダーから手を離すと、スライダーは非アクティブのプログレスバーバージョンに戻ります。スライダーが非アクティブ状態に戻るまで数秒の遅延が生じる可能性があります。

コマンドを使って状態を手動で設定する

コマンドを実行してスライダーの状態を手動で変更できます。

  • AlexaSliderRadialShrink – スライダーをアクティブ状態に遷移させ、つまみアイコンを表示します。
      {
        "type": "AlexaSliderRadialShrink"
      }
    
  • AlexaSliderRadialExpand – スライダーを非アクティブ状態に遷移させます。

      {
        "type": "AlexaSliderRadialExpand"
      }
    
  • AlexaSliderRadialMetadataControl – スライダーのメタデータの表示と非表示を切り替えます。showtrueに設定すると、メタデータがビューにフェードインします。showfalseに設定すると、メタデータがフェードアウトします。
      {
        "type": "AlexaSliderRadialMetadataControl",
        "show": true
      }
    

以下の例では、スライダーをアクティブ状態に遷移させ、現在のメタデータを表示するボタンを作成します。

{
  "type": "AlexaButton",
  "buttonText": "スライダーを縮小する",
  "alignSelf": "center",
  "primaryAction": {
    "type": "Parallel",
    "commands": [
      {
        "type": "AlexaSliderRadialShrink"
      },
      {
        "type": "AlexaSliderRadialMetadataControl",
        "show": true
      }
    ]
  }
}

ユーザーがスライダーを操作したときにコマンドを実行する

AlexaSliderRadialは、アクション可能なコンポーネントであり、タッチ可能なコンポーネントでもあります。つまり、onMoveハンドラーなど、ユーザーのアクションやタッチイベントを処理する追加のプロパティがあります。AlexaSliderRadialは、これらのハンドラーを使ってスライダーを対話型にします。

オプションでこれらのハンドラーに実行する追加のコマンドを指定して、ユーザーがスライダーを操作したときに対応できるようにします。以下の各プロパティは、対応するイベントが発生すると実行されるコマンドの配列を取ります。

  • onDownCommand
  • onMoveCommand
  • onUpCommand

スライダーを対話型にするためのコマンドに加えて、これらのプロパティに渡すコマンドが実行されます。

以下の例は、ユーザーがスライダーを選択したり、動かしたり、手を離したりしたときにtextコンポーネントを更新します。

現在のつまみの位置を取得する

スライダーのつまみの初期位置は、progressValueプロパティを使って設定します。ユーザーがスライダーを操作すると、現在のつまみ位置が変更されます。定義したコマンド内でこの値にアクセスできます。

ユーザーがスライダーを動かしたときにつまみの現在位置を取得する

  1. positionPropertyNameプロパティに、つまみの位置を表す名前を設定します。このプロパティのデフォルト値はThumbpositionです。
  2. bindプロパティを使ってこのプロパティのバインディングを作成します。これにより、ドキュメントのほかのコンポーネントからプロパティにアクセスできるようになります。
  3. コマンドで、データバインディング構文を使ってバインドされた変数を参照します。

たとえば、以下のContainerThumbpositionのバインディングを作成します。

{
  "type": "Container",
  "bind": [
    {
      "name": "Thumbposition",
      "value": 0
    }
  ],
  "items": []
}

次に、このContainerにはこの値を表示するTextプロパティがあります。

{
  "type": "Text",
  "text": "Thumbposition =<br>${Thumbposition}",
  "textAlign": "center",
  "style": "textStyleBody"
}

次に、AlexaSliderRadialコンポーネントはpositionPropertyNameThumbpositionに設定します。ユーザーがスライダーを操作すると、Textコンポーネントは現在のThumbpositionを表示します。

{
  "type": "AlexaSliderRadial",
  "progressValue": 0,
  "totalValue": 100000,
  "thumbDisplayedAllStates": true,
  "positionPropertyName": "Thumbposition",
  "metadataDisplayed": true,
  "position": "absolute"
}

AlexaSliderRadialの例

以下は、小型の円形デバイス上にAlexaSliderRadialを表示し、その他すべてのviewportにAlexaSliderを表示するドキュメントの完全な例です。この例では、データソースを使って円形、長方形のレイアウト両方に同じ値を表示しています。

AlexaSliderRadial
小型の円形デバイスにAlexaSliderRadialを表示する
AlexaSliderRadial
長方形のデバイスにAlexaSliderを表示する