Progress Bar

Progress Bar

レスポンシブ対応コンポーネントのAlexaプログレスバー（AlexaProgressBar）は、進行中のアクティビティを示すプログレスバーを表示します。さまざまなスタイルから選択して、さまざまなタイプのアクティビティ進捗状況を伝えることができます。

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

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

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

AlexaProgressBarパラメーター

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

isLoading

ブール値

false

trueの場合、determinateプログレスバーの塗りつぶされていない部分にアニメーションを表示して、コンテンツがロード中であることを示します。progressBarTypeがdeterminateの場合に適用されます。

1.2.0

layoutDirection

文字列

LTR

プログレスバーのレイアウト方向を指定します。このプロパティをLTR（左から右）、RTL（右から左）のいずれかに設定します。このプロパティは、コンポーネントの親コンテナからlayoutDirectionを継承しません。このため、必要に応じて明示的にこのプロパティを設定してください。

レスポンシブ対応コンポーネントでの右から左に記述する言語のサポートについて詳しくは、Support for Right-to-left Languagesを参照してください。

1.4.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秒を表すプログレスバーを作成できます。合計時間によって画面に描画されるバーの幅が変わることはありません。バーのサイズを決定するには、AlexaProgressBarか親Containerの標準のwidthプロパティを使用します。

1.2.0

プログレスバーのサイズ

プログレスバーの長さを制御するには、基本コンポーネントのwidthプロパティを使用します。AlexaProgressBarコンポーネント自体、または親Containerのwidthを設定します。バーの高さや太さはViewportのサイズによって決まります。この値は変更できません。

たとえば、以下の図は、widthの値が異なる3つのdeterminateプログレスバーを示しています。バーはそれぞれ2分（120,000ミリ秒）を表しており、1分（60,000ミリ秒）が経過したことを示しています。

幅が異なるdeterminateプログレスバー
幅が異なるdeterminateプログレスバー

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

{
  "type": "Container",
  "width": "100%",
  "height": "100%",
  "justifyContent": "center",
  "paddingLeft": "@marginHorizontal",
  "paddingRight": "@marginHorizontal",
  "items": [
    {
      "type": "AlexaProgressBar",
      "progressValue": "60000",
      "bufferValue": 70000,
      "totalValue": 120000,
      "width": "50%"
    },
    {
      "type": "AlexaProgressBar",
      "progressValue": "60000",
      "bufferValue": 70000,
      "totalValue": 120000,
      "spacing": "@spacingLarge",
      "width": "70%"
    },
    {
      "type": "AlexaProgressBar",
      "progressValue": "60000",
      "bufferValue": 70000,
      "totalValue": 120000,
      "spacing": "@spacingLarge"
    }
  ]
}

以下の図は、widthの値が異なる3つのindeterminateプログレスバーを示しています。このアニメーションを表示するには、JSONのサンプルをオーサリングツールにコピーして貼り付けます。

幅が異なるindeterminateプログレスバー
幅が異なるindeterminateプログレスバー

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

{
  "type": "Container",
  "width": "100%",
  "height": "100%",
  "justifyContent": "center",
  "paddingLeft": "@marginHorizontal",
  "paddingRight": "@marginHorizontal",
  "items": [
    {
      "type": "AlexaProgressBar",
      "progressBarType": "indeterminate",
      "width": "50%"
    },
    {
      "type": "AlexaProgressBar",
      "progressBarType": "indeterminate",
      "spacing": "@spacingLarge",
      "width": "70%"
    },
    {
      "type": "AlexaProgressBar",
      "progressBarType": "indeterminate",
      "spacing": "@spacingLarge"
    }
  ]
}

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

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

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

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

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

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

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

{
  "type": "AlexaProgressBar",
  "progressValue": 0,
  "bufferValue": 0,
  "totalValue": 120000,
  "progressFillColor": "blue",
  "spacing": "@spacingXLarge",
  "handleTick": [
    {
      "when": "${progressValue < totalValue}",
      "minimumDelay": 1000,
      "commands": [
        {
          "type": "SetValue",
          "property": "progressValue",
          "value": "${progressValue + 1000}"
        }
      ]
    }
  ]
}

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

AlexaProgressBarの例

以下は、プログレスバーをさまざまなスタイルで表示する完全なドキュメントの例です。

このアニメーションを表示するには、JSONのサンプルをオーサリングツールにコピーして貼り付けます。

AlexaProgressBarの4つの例
AlexaProgressBarの4つの例