SetPageコマンド

Note: Sign in to the developer console to build or publish your skill.

SetPageコマンド

Pagerコンポーネントで表示されるページを変更します。SetPageコマンドは、項目全体が表示されると終了します。

プロパティ

SetPageコマンドには、共通のコマンドプロパティに加えて、以下の表に示すプロパティがあります。typeプロパティはSetPageに設定します。

コマンドを実行するために値が必要なプロパティの場合、以下の表の「デフォルト」列に「必須」と表示されています。それ以外の場合はデフォルト値が表示されますが、デフォルト値がないこともあります。

プロパティ	型	デフォルト	説明
`componentId`	セレクター	`:source`	`Pager`コンポーネントです。
`position`	relative、absolute	`absolute`	valueが`relative`と`absolute`のどちらのオフセットかを示します。デフォルトは`absolute`です。
`transitionDuration`	正の整数	システムのデフォルト	ページ遷移アニメーションの時間（ミリ秒）です。
`value`	整数	必須	移動距離です。絶対値または相対値で指定できます。

PagerコンポーネントにNページある場合、最初のページのインデックスは0で、最後のページのインデックスはN-1です。相対位置は現在のページからのオフセットです。たとえば、1ページ先に進めるには次のようにします。

  {
    "type": "SetPage",
    "componentId": "myWeatherPager",
    "position": "relative",
    "value": 1
  }

絶対位置の場合、現在のページにインデックスが付けられます。負の絶対位置はリスト末尾からのオフセットです。たとえば、最後のページに移動するには次のようにします。

  {
    "type": "SetPage",
    "componentId": "myWeatherPager",
    "position": "absolute",
    "value": -1
  }

2ページ間で切り替える場合、間のページは表示されません（Sequenceとは異なります）。たとえば、現在のページが13でSetPageが"position"="relative","value": 2で実行された場合、現在のページが切り替わり、12ページ目を表示することなく11ページ目に遷移します。

SetPageコマンドはあらゆるページを表示するように設定できます。Pagerコンポーネントで許可された移動方向は考慮されません。ただし、折り返しの動作はページ切り替えの計算に影響します。おおよそのアルゴリズムを参照してください。

SetPageコマンドを停止すると、SetPageコマンドシーケンスが50%以上完了していればターゲットページにジャンプし、50%未満の場合は前のページに戻ります。onPageChangedコマンドは、ページが最終ページから変更された場合に停止時に1回実行されます。

SetPageコマンドは、高速モードでは無視されます。

componentId

更新するPagerを識別するセレクターです。指定しない場合は、デフォルトで:sourceになります。:sourceセレクターは、SetPageコマンドを発行したコンポーネントをターゲットにします。

position

positionがrelativeの場合、valueは現在のページから移動する相対的なページ数を指定します。positionがabsoluteの場合、valueはページャーの移動先のページ番号を絶対値で表します。

transitionDuration

ページ遷移アニメーションの時間（ミリ秒）です。transitionDurationプロパティを設定しない場合、ランタイムによって決定されたデフォルトの継続時間が使用されます。transitionDurationは、handlePageMoveプロパティで定義されているカスタム遷移にも適用されます。

value

valueは、移動するページ数か、絶対値で表される移動先のページ番号のいずれかです。

最終位置と方向を計算するアルゴリズムは、おおよそ次の擬似コードとなります。

  if (command.position == 'absolute') {  // 絶対位置での移動
    let index = command.value < 0 ? pager.children.length + command.value : command.value;
    index = Math.max(0, Math.min(pager.children.length - 1, index));  // 範囲を固定

    // 最後のインデックスと移動の方向を返します。
    if (index == pager.currentIndex)
      return NO_MOVE

    return (index, index < pager.currentIndex ? "LEFT" : "RIGHT");
  }
  else {  // 相対位置での移動
    let index = pager.currentIndex + command.value;

    // 相対位置での移動が範囲外になり、折り返しに対応していない場合、コマンドは無視されます
    if (pager.navigation != "wrap" && (index < 0 || index >= pager.children.length))
      return NO_MOVE;

    // 適切に折り返します
    index = ((index % pager.children.length) + pager.children.length) % pager.children.length;
    if (index == pager.currentIndex)
       return NO_MOVE;

    return (index, command.value < 0 ? "LEFT" : "RIGHT");
  }

ページャーアニメーションは返された方向に動きます。

このアルゴリズムには、以下の特性があります。

絶対値は有効なページの範囲内に固定されます。directionは現在のページに対して相対的な方向です。
折り返しに対応するページャーでは、相対値は自動的に折り返されます。directionはコマンドで与えられた値によって決まります。折り返しで方向は変更されません。
折り返しに対応しないページャーでは、相対値が範囲外になる場合は無視されます。

再インフレート時の処理方針

Reinflateコマンドを実行すると、Alexaがドキュメントを再インフレートした後でSetPageコマンドを再開できます。コマンドは、ReinflateのpreservedSequencers配列で指定されたsequencerで実行されている場合に再開されます。このコマンドでは、ターゲットページのインデックスが保存されます。

ターゲットコンポーネントが、再インフレートされた階層内のPagerコンポーネントでない場合、コマンドは無視されます。

Alexaがドキュメントを再インフレートするときにページ遷移が実行されている場合、再インフレートが完了するとターゲットページがレンダリングされます。これはpageIndexを保存するのと同じ効果があります（preserveを参照）。

SetPageコマンドを保存する場合、エクスペリエンスは以下の両方が満たされるときに最適に機能します。

Pagerのデータソースに含まれる要素数が再インフレートの前後で同じである。
Pagerのコンテンツが同じインデックスのままである。

再インフレート中に要素の数や元のインデックスの内容が変わると、ユーザーはエクスペリエンスに違和感を覚える可能性があります。

SetPageの例

次の例は、SetPageコマンドの複数の使用方法を示しています。Pagerの最初のページには、Sequence内の項目のリストが表示されます。項目をタップすると、positionをabsoluteに設定したSetPageが実行され、項目に関する詳細ページが表示されます。詳細ページで「Next」ボタンや「Previous」ボタンを押すと、positionをrelativeに設定したSetPageが実行され、次のページや前のページに移動します。

次の例では、SetPageにtransitionDurationプロパティを設定しています。「Slow Set Page」ボタンを押すと、約5秒かけてページが切り替わります。

このページは役に立ちましたか？

フィードバックを送信

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

SetPageコマンド

プロパティ

componentId

position

transitionDuration

value

再インフレート時の処理方針

SetPageの例

関連トピック