Progress Bar Radial

Progress Bar Radial

Alexa Progress Bar Radialレスポンシブ対応コンポーネント（AlexaProgressBarRadial）は、進行中のアクティビティを示す円形のプログレスバーを表示します。さまざまなスタイルから選択して、さまざまなタイプのアクティビティの進捗状況を伝えることができます。このコンポーネントは、Echo Spotなどの小型の円形デバイスで使用します。

互換性

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

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

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

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

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

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

AlexaProgressBarRadialのパラメーター

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

名前 型 デフォルト 説明 ウィジェットのサポート 追加されたバージョン

accessibilityLabel

文字列

"[Total]のうち[Progress]経過しました"（例：[2分]のうち[20秒]経過しました）

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

サポートされません

1.2.0

bufferValue

数値

0

determinateプログレスバーの経過したバッファー時間を表す値です。プログレスバーは、明るい色で塗りつぶすことによって、この値を表します。バッファーバーは、bufferValueがprogressValueより大きい場合に表示されます。progressBarTypeの値がdeterminateで、isLoadingがfalseの場合に適用されます。

サポートされません

1.2.0

entities

配列

—

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

サポートされません

1.2.0

progressBarType

文字列

determinate

表示するプログレスバーの種類を決定します。determinate、indeterminateのいずれかに設定します。

determinate - 一定の時間を表すバーです。progressValueプロパティを経過時間で更新してバーを塗りつぶします。

indeterminate - 進行中のアクティビティを示すアニメーションを表示するプログレスバーです。ただし、バーは時間とは紐づけられていません。

サポートされません

1.2.0

progressFillColor

色

@colorComponent

determinateプログレスバーの進行状況を表す塗りつぶしの色です。

サポートされません

1.2.0

progressValue

数値

0

determinateプログレスバーの経過時間を表す値です。プログレスバーは、progressFillColorに指定した色で塗りつぶすことによって、この値を表します。progressBarTypeがdeterminateの場合に適用されます。このプロパティを更新して進行状況を表示する方法について詳しくは、determinateプログレスバーを進めるを参照してください。

サポートされません

1.2.0

theme

文字列

dark

ダークまたはライトのカラーテーマを設定します。選択されたテーマによってコンポーネントの色が制御されます。

サポートされません

1.2.0

totalValue

数値

0

プログレスバーが表す合計時間の値（ミリ秒）です。たとえば、totalValueを100,000に設定すると、1分40秒を表すプログレスバーを作成できます。この値がバーのサイズに影響することはありません。プログレスバーは、常に小型の円形Viewportの円周になります。

サポートされません

1.2.0

type

文字列

—

常にAlexaProgressBarRadialに設定されます。

サポートされません

1.2.0

円形Viewport上にプログレスバーを配置する

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

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

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

Viewportにほかのコンポーネントを追加するには、ContainerにAlexaProgressBarRadialを配置して、positionをabsoluteに設定します。その後、AlexaProgressBarRadialの後にほかのコンポーネントを追加します。これにより、ほかのコンポーネントがプログレスバーコンポーネントの上にオーバーラップして表示されます。コンポーネントは、円形のプログレスバーの中に表示されます。

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

{
  "when": "${@viewportProfile == @hubRoundSmall}",
  "type": "Container",
  "height": "100%",
  "width": "100%",
  "items": [
    {
      "type": "AlexaProgressBarRadial",
      "id": "roundHubBar",
      "progressBarType": "indeterminate",
      "position": "absolute"
    },
    {
      "type": "Text",
      "height": "100%",
      "textAlignVertical": "center",
      "textAlign": "center",
      "text": "${progressBarRadialExample.textToShow}"
    }
  ]
}

determinateプログレスバーを進める

determinateプログレスバーでは、progressValueプロパティとbufferValueプロパティを更新してバーを色で塗りつぶします。値を変更するには、SetValueコマンドを使用します。

次の例では、idが「myProgressBar」であるAlexaProgressBarRadialのprogressValueプロパティを40,000に設定しています。

{
  "type": "SetValue",
  "componentId": "myProgressBar",
  "property": "progressValue",
  "value": 40000
}

時間に基づいて自動で進むプログレスバーを作成するには、SetValueを実行するティックイベントハンドラーを定義します。APLは、時間の経過に応じてティックイベントを生成します。各ティックで実行するコマンドの配列は、handleTickプロパティを使用して定義します。

次の例では、プログレスバーが完了するまでに毎秒約1回progressValueが更新されます。

クリップボードにコピーされました。

{
  "type": "AlexaProgressBarRadial",
  "progressValue": "0",
  "totalValue": "100000",
  "progressFillColor": "blue",
  "position": "absolute",
  "handleTick": [
    {
      "when": "${progressValue < totalValue}",
      "minimumDelay": 1000,
      "commands": [
        {
          "type": "SetValue",
          "property": "progressValue",
          "value": "${progressValue + 1000}"
        }
      ]
    }
  ]
}

handleTickの詳細については、ティックイベントハンドラーを参照してください。

AlexaProgressBarRadialの例

以下は、小型の円形デバイス上にAlexaProgressBarRadialを表示し、その他すべてのViewportにAlexaProgressBarを表示するドキュメントの完全な例です。この例では、データソースを使って円形、長方形のレイアウト両方に同じ値を表示しています。別のViewportに切り替えると、同じデータがAlexaProgressBarに表示されます。

このページは役に立ちましたか？

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