Slider Radial

---

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

互換性

AlexaSliderRadialは、alexa-viewport-profilesパッケージの次の標準Viewportプロファイルで動作するように設計されています。

• すべての円形デバイスプロファイル

サポートされていないViewportでAlexaSliderRadialを使用すると、予期しない結果になることがあります。Viewportプロファイルの詳細については、Viewportプロファイルを参照してください。

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

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

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

AlexaSliderRadialのパラメーター

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

名前	型	デフォルト	説明	ウィジェットのサポート	追加されたバージョン
accessibilityLabel	文字列	[進行状況] out of [合計]（「[20 seconds] out of [2 minutes]」など）	進行状況バーを説明する文字列です。ユーザーがこのコンポーネントを選択すると、ボイスオーバーでこの文字列が読み上げられます。	サポートされません	1.2.0
bufferValue	数値	0	スライダーで、読み込みが完了しているバッファーの時間を表す値です。スライダーは、この値までの位置を明るい色で塗りつぶして表します。バッファーバーは、bufferValueがprogressValueより大きい場合に表示されます。	サポートされません	1.2.0
entities	配列	—	このコンポーネントにバインドするentityデータの配列です。	サポートされません	1.2.0
metadataDisplayed	ブール値	false	trueの場合、スライダーは、thumbDisplayedAllStatesの値に応じて現在のprogressValueとtotalValueを表示します。 両方のプロパティがtrueの場合、スライダーはメタデータを常に表示します。 metaDataDisplayedがtrueでthumbDisplayedAllStatesがfalse場合、スライダーは、onDownイベントとonMoveイベントの間はメタデータを表示し、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
type	文字列	—	常にAlexaSliderRadialに設定します。	サポートされません	1.2.0
useDefaultSliderExpandTransition	ブール値	true	trueの場合、非アクティブな進行状況バー表示と対話型のスライダー表示を切り替えるときに、デフォルトのアニメーションを使用します。thumbDisplayedAllStatesがfalseの場合に適用されます。useDefaultSliderExpandTransitionがfalseの場合は、ユーザーがスライダーを操作した後、スライダーが非アクティブな進行状況バー表示に自動で戻ることはありません。スライダーのアクティブ状態と非アクティブ状態を参照してください。	サポートされません

円形のViewportにスライダーを配置する

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

このコンポーネントは、長方形のデバイスに表示するようには設計されていません。長方形のデバイスには、代わりにAlexaSliderを使用してください。

Viewportにほかのコンポーネントを含めるには、ContainerにAlexaSliderRadialを配置し、positionをabsoluteに設定します。AlexaSliderRadialの前または後にほかのコンポーネントを配置して、それらをスライダーの内部に表示することができます。Container内でAlexaSliderRadialの後に配置するコンポーネントは、スライダーの対話型部分に重ならないように小さいサイズに設定してください。スライダーの対話型部分にコンポーネントが重なると、スライダーを動かす操作の妨げになります。

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

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

スライダーのアクティブ状態と非アクティブ状態

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

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

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

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

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

状態を自動的に切り替える

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

• thumbDisplayedAllStatesをfalseに設定します。
• useDefaultSliderExpandTransitionをtrueに設定します。

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

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

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

• AlexaSliderRadialShrink - スライダーをアクティブ状態に遷移させ、つまみアイコンを表示します。

    {
      "type": "AlexaSliderRadialShrink"
    }
  

• AlexaSliderRadialExpand - スライダーを非アクティブ状態に遷移させます。

    {
      "type": "AlexaSliderRadialExpand"
    }
  

• AlexaSliderRadialMetadataControl - スライダーのメタデータの表示と非表示を切り替えます。showをtrueに設定すると、メタデータがビューにフェードインします。showをfalseに設定すると、メタデータがフェードアウトします。

    {
      "type": "AlexaSliderRadialMetadataControl",
      "show": true
    }
  

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

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

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

必要に応じて、これらのハンドラーで実行する追加のコマンドを提供して、ユーザーがスライダーを操作したときに応答することができます。次の各プロパティには、対応するイベントが発生したときに実行するコマンドの配列を設定できます。

• onDownCommand
• onMoveCommand
• onUpCommand

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

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

---

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

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

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

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

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

このContainerに、この値を表示するTextプロパティを含めます。

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

次の例では、スライダーの中央にあるTextコンポーネントにつまみの位置を表示します。Textコンポーネントは、AlexaSliderの対話型部分と重ならないように小さめのサイズに設定されます。

---

AlexaSliderRadialの例

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

---

関連トピック

• APL向けAlexaデザインシステム
• レスポンシブ対応コンポーネントとテンプレート
• Alexaデザインガイド： レスポンシブ対応コンポーネント（英語のみ）

---

---

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