ScrollToComponentコマンド
スクロール可能なコンポーネントを前方または後方にスクロールして、指定されたコンポーネントを表示します。スクロール可能なコンポーネントには、次のものがあります。
プロパティ
ScrollToComponentコマンドには、共通のコマンドプロパティに加えて、以下の表に示すプロパティがあります。typeプロパティはScrollToComponentに設定します。
コマンドを実行するために値が必要なプロパティの場合、以下の表の「デフォルト」列に「必須」と表示されています。それ以外の場合はデフォルト値が表示されますが、デフォルト値がないこともあります。
| プロパティ | 型 | デフォルト | 説明 |
|---|---|---|---|
|
|
|
|
スクロール後の項目の配置です。 |
|
|
|
表示領域に移動する子コンポーネントです。 | |
|
|
負でない整数 |
システムのデフォルト |
スクロールアニメーションの目標時間（ミリ秒）です。 |
たとえば、次のコマンドは、IDがrecipeStepsのコンポーネントが表示されるまでスクロールします。
{
"type": "ScrollToComponent",
"componentId": "recipeSteps",
"align": "center"
}
ScrollToComponentコマンドは、componentIdの箇所またはその前にある、最初のSequenceまたはScrollViewを探し、そこにスクロールします。
ユーザーが画面をタッチすると、スクロールは停止します。コマンドを停止すると、スクロールは直ちに停止されます。
ScrollToComponentコマンドは、高速モードでは無視されます。
align
スクロール後かつ発話前の画面における項目の配置です。配置の列挙値には、以下の表に示すオプションがあります。
| 配置 | 説明 |
|---|---|
|
|
項目の左上がスクロールコンテナーの左上に配置されます。 |
|
|
項目の中央がコンテナーの中央に配置されます。 |
|
|
項目の右下がスクロールコンテナーの右下に配置されます。 |
|
|
項目を全体表示するのに必要な分だけ移動します。 |
componentId
コマンドのターゲットコンポーネントを識別するセレクターです。指定しない場合は、デフォルトで:sourceになります。:sourceセレクターは、ScrollToComponentコマンドを発行したコンポーネントをターゲットにします。
targetDuration
スクロールアニメーションの目標時間（ミリ秒）です。コマンドは指定された時間だけスクロールを試みますが、ランタイムによって異なる場合があります。targetDurationを指定しない場合、コマンドはランタイムで定義されている時間を使用します。targetDurationを0に設定すると、スクロール位置に即座に移動します。
再インフレート時の処理方針
Reinflateコマンドを実行すると、Alexaがドキュメントを再インフレートした後でScrollToComponentコマンドを再開できます。コマンドは、ReinflateのpreservedSequencers配列で指定されたsequencerで実行されている場合に再開されます。このコマンドでは、ターゲットコンポーネントとalignプロパティで指定された配置が保存されます。
ターゲットコンポーネントが、再インフレートされた階層内にない場合や、スクロール可能なコンポーネントの子要素でない場合、コマンドは無視されます。
Alexaがドキュメントを再インフレートすると、スクロールが再開され、alignで指定された位置にターゲットコンポーネントがスクロールされます。
ScrollToComponentの例
以下は、長い項目リストを表示するSequenceの例です。項目のリストには、色の項目と、アルファベットの範囲に対応するセクション見出しの両方が含まれます。各セクション見出しにはコンポーネントIDがあります。たとえば、「N-R」セクションのIDは「n-r」です。リストの横に表示されるTouchWrapperコンポーネントを使うと、ScrollToComponentを使用して、リスト内の指定されたセクションまでスクロールできます。
関連トピック
最終更新日: 2025 年 12 月 04 日