Progress Bar

---

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

互換性

AlexaProgressBarは、次のViewportプロファイルで動作するように設計されています。

• alexa-viewport-profilesパッケージの以下のウィジェットViewportプロファイル：
  • ウィジェット、中（@hubWidgetMedium）
• alexa-viewport-profilesパッケージのすべての標準Viewportプロファイル：
  • すべての円形デバイスプロファイル
  • すべての横長デバイスプロファイル
  • すべての縦長デバイスプロファイル
  • すべてのモバイルプロファイル
  • すべてのテレビプロファイル

Viewportプロファイルの詳細については、Viewportプロファイルを参照してください。

ウィジェットでの相違点

ウィジェット内で使用する場合、AlexaProgressBarでは、右から左への向き（layoutDirection）はサポートされません。

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

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

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

AlexaProgressBarのパラメーター

以下の表は、AlexaProgressBarで設定できるパラメーターを示しています。特に記載のない限り、標準Viewportプロファイルはすべてのパラメーターをサポートします。「ウィジェットのサポート」列は、各パラメーターをサポートするウィジェットViewportプロファイルを示しています。Viewportプロファイルの詳細については、Viewportプロファイルを参照してください。

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	文字列	${environment.layoutDirection}	プログレスバーのレイアウト方向を指定します。このプロパティは、LTR（左から右）またはRTL（右から左）に設定します。このプロパティには、コンポーネントの親コンテナーのlayoutDirectionは継承されません。このため、必要に応じて明示的にこのプロパティを設定してください。 レスポンシブ対応コンポーネントでの右から左に記述する言語のサポートの詳細については、右から左に記述する言語のサポートを参照してください。	サポートされません	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
type	文字列	—	常にAlexaProgressBarに設定されます。	中	1.2.0

プログレスバーのサイズ

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

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

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

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

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

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

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

次の例では、プログレスバーが完了するまでに毎秒約1回progressValueが更新されます。アニメーションを再開するには、ページを更新します。

---

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

AlexaProgressBarの例

以下は、5つの異なるプログレスバーの例です。アニメーションを再開するには、ページを更新します。

---

以下は、タイマーの進行状況を示すプログレスバーの例です。ボタンをクリックすると、タイマーが開始されます。タイマーは、データバインディングコンテキストのelapsedTimeプロパティを使用して進行状況を追跡し、ティックハンドラーを使用して終了から3秒後にタイマーをリセットします。

---

以下は、プログレスバーをさまざまなスタイルで表示するウィジェットの例です。アニメーションを再開するには、ページを更新します。

---

関連トピック

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

---

---

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