APL Sequence



APL Sequence

Sequenceとは、データセットを使用して、複数のコンポーネントをインフレートし、長いスクロールリストに繰り返し表示するものです。Sequenceを使用してAlexaスキルのユーザーエクスペリエンスを高める方法については、Alexaデザインガイド – Sequenceを参照してください。

Sequenceは、Containerに似ています。Sequenceの方が、ScrollView内で長いリストを適切に表示できますが、レイアウトモデルの柔軟性は低くなります。

Sequenceを使うと、画面上で序数および照応に応じた項目が選択できます。項目選択のためのAPLサポートを参照してください。

プロパティ

Sequenceコンポーネントには、コンポーネントプロパティのほかに次のプロパティがあります。列の意味については、こちらをご覧ください。

heightとwidthのプロパティは、それぞれデフォルトで100dpに設定されています。

プロパティ 型／値 デフォルト スタイル設定 動的 説明
data データの配列 none ✕ ✕ このContainerにバインドするデータです。
scrollDirection horizontal、vertical vertical ✕ ✕ このSequenceのスクロール方向です。
firstItem コンポーネントの配列 none ✕ ✕ 他のどの項目よりも先に含めるコンポーネントです。
item/items コンポーネントの配列 [] ✕ ✕ データセットを配置するのに使用するコンポーネントです。
lastItem コンポーネントの配列 none ✕ ✕ 他のすべての項目の後に含めるコンポーネントです。
numbered ブール値 false ✕ ✕ trueを指定した場合、子に番号が順番に割り当てられます。
onScroll コマンドの配列 [] ✕ ✕ スクロール中に実行するコマンドです。

Sequenceの子は、連続した列として配置されます（左から右または上から下）。スクロール方向の子コンポーネントのディメンションはauto設定であり、デフォルトでは子のコンテンツを囲むように設定されます。

表示エラーを最小限に抑えるために、垂直Sequenceの高さと水平Sequenceの幅は、指定されていない場合は100dpに初期化されます。

高さの値を指定した垂直方向のSequence内でItemテンプレートを使用する場合、高さはパーセント値で設定せず、絶対値のディメンションで設定してください。幅の値を指定した水平方向のSequence内でItemテンプレートを使用する場合、幅はパーセント値で設定せず、絶対値のディメンションで設定してください。

Sequenceコンポーネントがイベントのターゲットである場合、event.targetは以下の値を報告します。

"event": {
   "target": {
     "disabled": Boolean, // コンポーネントが無効な場合はtrue
     "id": ID,            // コンポーネントのID
     "uid": UID,          // ランタイムで生成されたコンポーネントの固有ID
     "height": Number,    // コンポーネントのdp単位の高さ（パディングを含む）
     "opacity": Number,   // コンポーネントの不透明度[0～1]
     "position": Number,  // スクロールしたコンポーネントの位置（パーセント表記）
     "width": Number      // コンポーネントのdp単位の幅（パディングを含む）
   }
 }

報告されるposition値は、onScrollプロパティのvalueプロパティと同じ方法で計算されます。

data

任意のデータ配列です。データ配列がバインドされている場合、そのSequenceはデータ配列のインフレートメソッドを使用します。

firstItem

このプロパティが割り当てられた場合、指定されたコンポーネントは、1つの子のみのインフレート方法を使用してSequenceの先頭に配置されます。

item/items

Sequenceに表示するコンポーネントとレイアウトの配列です。

dataプロパティが割り当てられている場合、Sequenceはデータ配列のインフレート方法を使用します。dataプロパティが割り当てられていない場合、Sequenceは子コンポーネントの単純な配列のインフレート方法を使用します。

lastItem

このプロパティが割り当てられた場合、1つの子のみのインフレート方法を使用して、1つのコンポーネントまたはレイアウトがSequenceに追加されます。

numbered

trueに設定した場合、Sequence内の各項目にデータバインディングの順序数が設定されます。この順序数は「1」から始まり、子のnumberingプロパティが「skip」または「reset」に設定されている場合を除き、1ずつ増加します。firstItemとlastItemに順序数は付けられないことに注意してください。

onScroll

スクロール中に実行するコマンドです。ランタイムでは、スクロール中にフレームを描画するたびにこれらのコマンドの実行が1回試行されますが、正常に実行されない場合もあります。デバイスの処理速度が遅い場合、onScrollコマンドは断続的にしか実行されない可能性があります。

コマンドで出力されるevent.source.valueは、現在のスクロール位置をSequenceの幅または高さで割ったパーセント値になります。たとえば、Sequenceの幅が200ピクセルであり、コンテンツを左方向に520ピクセル分移動した場合、出力される値は2.60になります。

生成されるイベントの形式は次のようになります。

"event": {
  "source": {
    "type": "Sequence",
    "handler": "Scroll",
    "id": ID,          // SequenceコンポーネントのID
    "uid": UID,          // ランタイムで生成されたコンポーネントの固有ID
    "value": Number    // 現在のスクロール位置の割合
  }
}

scrollDirection

verticalまたはhorizontalを指定します。デフォルトはverticalです。

Sequenceの子

Sequenceの子は、連続した列として配置されます（左から右または上から下）。スクロール方向の子のディメンションは自動設定であり、デフォルトでは子のコンテンツを囲むように設定されます。

子のプロパティ

Sequenceの子では、次のプロパティを追加で使用できます。

プロパティ 型／値 デフォルト スタイル設定 動的 説明
numbering normal、skip、reset normal ✕ ✕ 次の子の順序数の付け方を指定します。
spacing 絶対ディメンション 0 ✕ ✕ レイアウト内でこのコンポーネントと前のコンポーネントの間に追加するスペースです。

numbering

親でnumberedが設定されている場合に、順序数の値を制御します。このプロパティは、Sequenceの現在の子ではなく、次の子について順序数の値の指定方法を制御するものです。

  • normal： 次の子の順序数は、現在の順序数に1を足したものになります。
  • skip： 次の子の順序数は、現在の順序数と同じになります。
  • reset： 次の子の順序数は1になります。

spacing

Sequence内でこのコンポーネントと前のコンポーネントの間に追加するスペースの大きさです。Sequenceの最初の項目では無視されます。この値は絶対ディメンションで表現する必要があります。

Amazon Alexa
Amazon Appstore
Amazon Web Services
Amazon Dash Replenishment