ScrollToIndexコマンド
スクロール可能なコンポーネントを前方または後方にスクロールして、子コンポーネントのindexで指定された特定の子コンポーネントを表示します。スクロール可能なコンポーネントには、次のものがあります。
プロパティ
ScrollToIndexコマンドには、共通のコマンドプロパティに加えて、以下の表に示すプロパティがあります。typeプロパティはScrollToIndexに設定します。
コマンドを実行するために値が必要なプロパティの場合、以下の表の「デフォルト」列に「必須」と表示されています。それ以外の場合はデフォルト値が表示されますが、デフォルト値がないこともあります。
| プロパティ | 型 | デフォルト | 説明 |
|---|---|---|---|
|
|
|
|
スクロール後の項目の配置です。 |
|
|
|
表示領域に移動する子コンポーネントの親です。 | |
|
|
整数 |
必須 |
表示する子コンポーネントの0から始まるインデックスです。 |
|
|
負でない整数 |
システムのデフォルト |
スクロールアニメーションの目標時間（ミリ秒）です。 |
たとえば、リストに表示されるレシピの5番目のステップにスクロールするには、次のようにindexを4に設定します。
{
"type": "ScrollToIndex",
"componentId": "recipeSteps",
"index": 4,
"align": "center"
}
componentIdは、Sequence、ScrollView、GridSequenceコンポーネントである必要はありません。ScrollToIndexコマンドは、componentIdの箇所またはその前にある、最初のSequence、ScrollView、GridSequenceのいずれかを探し、そこにスクロールします。
ユーザーが画面をタッチすると、スクロールは停止します。コマンドを停止すると、スクロールは直ちに停止されます。
ScrollToIndexコマンドは、高速モードでは無視されます。
align
スクロール後かつ発話前の画面における項目の配置です。配置の列挙値には次のオプションがあります。
| 配置 | 説明 |
|---|---|
|
|
項目の左上がスクロールコンテナーの左上に配置されます。 |
|
|
項目の中央がコンテナーの中央に配置されます。 |
|
|
項目の右下がスクロールコンテナーの右下に配置されます。 |
|
|
項目を全体表示するのに必要な分だけ移動します。 |
componentId
コマンドのターゲットコンポーネントの親を識別するセレクターです。指定しない場合は、デフォルトで:sourceになります。:sourceセレクターは、ScrollToIndexコマンドを発行したコンポーネントをターゲットにします。
targetDuration
スクロールアニメーションの目標時間（ミリ秒）です。コマンドは指定された時間だけスクロールを試みますが、ランタイムによって異なる場合があります。targetDurationを指定しない場合、コマンドはランタイムで定義されている時間を使用します。targetDurationを0に設定すると、スクロール位置に即座に移動します。
index
親コンテナー内でスクロールして表示する子項目の0から始まるインデックスです。負の値の場合は、親コンテナーの末尾から数えます。たとえば、リスト内の最後から2番目の項目を表示するには、次のように記述します。
{
"type": "ScrollToIndex",
"index": -2,
}
表示する項目を見つけるためのアルゴリズムは、概ね以下のように記述できます。
let itemIndex = index < 0 ? index + children.length : index;
if (itemIndex >= 0 && itemIndex < children.length) {
let child = children[itemIndex];
scrollIntoView(child);
}
ScrollToComponentとScrollToIndex
APL 2023.1以降では、ScrollToIndexの代わりに、ScrollToComponentコマンドをセレクター構文と組み合わせて使用できます。
たとえば、次の2つの例は同等のコマンドを示しています。これらの例では、SELECTORにはスクロールコンポーネントのID、INDEXにはスクロールして表示するコンポーネントの数値インデックスが格納されています。
{
"type": "ScrollToIndex",
"componentId": "SELECTOR"
"index": INDEX
}
{
"type": "ScrollToComponent",
"componentId": "SELECTOR:child(INDEX)"
}
再インフレート時の処理方針
Reinflateコマンドを実行すると、Alexaがドキュメントを再インフレートした後でScrollToIndexコマンドを再開できます。コマンドは、ReinflateのpreservedSequencers配列で指定されたsequencerで実行されている場合に再開されます。このコマンドでは、スクロール可能なターゲットコンポーネント、ターゲットのインデックス、配置が保存されます。
再インフレートされた階層内にスクロールコンポーネントが含まれてない場合、コマンドは無視されます。
Alexaがドキュメントを再インフレートすると、スクロールが再開され、alignで指定された位置にターゲットのインデックスに対応する項目がスクロールされます。
ScrollToIndexの例
以下は、長い項目リストを表示するSequenceの例です。TopボタンとBottomボタンは、indexプロパティをそれぞれ0と-1に設定してScrollToIndexを実行します。その他の3つのボタンでは、リスト内の項目のパーセンテージに基づいてindexを計算し、alignプロパティにcenterオプションを使用して実行されます。
関連トピック
最終更新日: 2025 年 12 月 04 日