Progress Bar
レスポンシブ対応コンポーネントのAlexaプログレスバー(AlexaProgressBar
)は、進行中のアクティビティを示すプログレスバーを表示します。さまざまなスタイルから選択して、さまざまなタイプのアクティビティ進捗状況を伝えることができます。
alexa-layoutsパッケージを読み込む
AlexaProgressBar
を使用するには、alexa-layoutsパッケージを読み込みます。
alexa-layouts
パッケージの最新バージョンは1.4.0
です。AlexaProgressBar
はバージョン1.2.0
で導入されました。
AlexaProgressBarパラメーター
type
以外のパラメーターはすべてオプションです。
名前 | 型 | デフォルト | 説明 | 追加または更新されたバージョン |
---|---|---|---|---|
|
文字列 |
"[Total]のうち[Progress]経過しました"(例:[2分]のうち[20秒]経過しました) |
プログレスバーを説明する文字列です。ユーザーがコンポーネントを選択したときに、この文字列が読み上げられます。 |
1.2.0 |
|
数値 |
0 |
|
1.2.0 |
|
配列 |
[] |
このコンポーネントにバインドするentityデータの配列です。 |
1.2.0 |
|
ブール値 |
false |
trueの場合、 |
1.2.0 |
|
文字列 |
|
プログレスバーのレイアウト方向を指定します。このプロパティを |
1.4.0 |
|
文字列 |
determinate |
表示するプログレスバーの種類を決定します。 |
1.2.0 |
|
|
1.2.0 |
||
|
数値 |
0 |
|
1.2.0 |
|
文字列 |
dark |
色のテーマをダークまたはライトに設定します。テーマを選択することでコンポーネントの色を制御します。 |
1.2.0 |
|
数値 |
0 |
プログレスバーが表す合計時間の値(ミリ秒)です。たとえば、 |
1.2.0 |
プログレスバーのサイズ
プログレスバーの長さを制御するには、基本コンポーネントのwidth
プロパティを使用します。AlexaProgressBar
コンポーネント自体、または親Container
のwidth
を設定します。バーの高さや太さはViewportのサイズによって決まります。この値は変更できません。
たとえば、以下の図は、width
の値が異なる3つのdeterminateプログレスバーを示しています。バーはそれぞれ2分(120,000ミリ秒)を表しており、1分(60,000ミリ秒)が経過したことを示しています。

{
"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のサンプルをオーサリングツールにコピーして貼り付けます。

{
"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
を使用するには、APL 1.4以降が必要です。これよりも古いバージョンのAPLを実行しているデバイスには、別のエクスペリエンスを提供してください。handleTick
の詳細については、ティックイベントハンドラーを参照してください。
AlexaProgressBarの例
以下は、プログレスバーをさまざまなスタイルで表示する完全なドキュメントの例です。
このアニメーションを表示するには、JSONのサンプルをオーサリングツールにコピーして貼り付けます。
