APLコンポーネント



APLコンポーネント

（これはAPLの最新バージョンではありません。APLの最新バージョンの資料を参照するには、その他のバージョンオプションをクリックしてください）

コンポーネントは、viewportに表示されるプリミティブな要素です。

APLでは、コンポーネントとは、クライアントで表示されるプリミティブな視覚コンポーネントのことを指します。APLファイルを保存して別のAPLに読み込むことで新しいテンプレートの定義を追加することはできますが、新しく追加した下位レベルのコンポーネントを認識させてデバイス上のネイティブなユーザーインターフェースコントロールに変換するには、クライアントの更新が必要になります。

プロパティ

コンポーネントに含まれる標準的なプロパティは以下のとおりです。通常、ディメンションに関連するプロパティをコンポーネントのパディングに利用することはできません。

プロパティ 型 必須 スタイル設定 動的 説明
bind バインドの配列 ✕ ✕ ✕ データバインディングコンテキストに追加する式です。
entity (entities) 実体の配列 ✕ ✕ ✕ Alexaでリファレンスの明確化に使用されるOpaqueデータです。
高さ ディメンション ✕ ✕ 読み取り専用 コンポーネントに指定する高さです。デフォルトはautoです。
id 文字列 ✕ ✕ ✕ ナビゲーションおよびイベントに使用する、コンポーネントの参照名です。コンポーネントが標準ビルトインインテントと共に使用される場合に必要です。
inheritParentState ブール値 ✕ ✕ ✕ trueを指定した場合、親の状態が使用されます。
maxHeight ディメンション ✕ ✕ ✕ このコンポーネントの高さの上限です。デフォルトはnoneです。
maxWidth ディメンション ✕ ✕ ✕ このコンポーネントの幅の上限です。デフォルトはnoneです。
minHeight ディメンション ✕ ✕ ✕ このコンポーネントの高さの下限です。デフォルトは0です。
minWidth ディメンション ✕ ✕ ✕ このコンポーネントの幅の下限です。デフォルトは0です。
paddingBottom ディメンション： プロパティ ✕ ✕ ✕ このコンポーネントの下側に追加するスペースです。デフォルトは0です。
paddingLeft ディメンション： プロパティ ✕ ✕ ✕ このコンポーネントの左側に追加するスペースです。デフォルトは0です。
paddingRight ディメンション： プロパティ ✕ ✕ ✕ このコンポーネントの右側に追加するスペースです。デフォルトは0です。
paddingTop ディメンション： プロパティ ✕ ✕ ✕ このコンポーネントの上側に追加するスペースです。デフォルトは0です。
style スタイル ✕ ✕ ✕ 適用するスタイル（複数可）の名前です。
type 文字列 ◯ ✕ ✕ コンポーネントの型です。必須です。
when ブール値 ✕ ✕ ✕ When式の評価結果がfalseの場合、このコンポーネントはインフレートされず、選択もされません。デフォルトはtrueです。
幅 ディメンション： プロパティ ✕ ✕ 読み取り専用 このコンポーネントに指定する幅です。デフォルトはautoです。

bind

コンポーネントのbindプロパティは、コンポーネントおよびその子のデータバインディングコンテキストを展開するためのものです。また、bindプロパティは、現在のコンテキストを展開するデータバインディングを順序付きで指定します。バインディングには順序があり、以前のバインディングの定義を、それ以降のバインディングで使用できます。

bindのプロパティ

バインディング配列の各バインディングオブジェクトには、次のプロパティを使用できます。

プロパティ 型 必須 説明
name 文字列 ◯ このバインディングで使用する名前です。有効な名前を設定する必要があります。
value 任意 ◯ このバインディングに割り当てる値です。文字列の場合、データバインディングは文字列のコンテンツに対して行われます。
type 型 ✕ プロパティの型です。デフォルトはanyです。

bindの評価

bindプロパティの評価は、whenプロパティとその他のプロパティとの間に行われます。このため、when式で新しいバインディングを利用することはできませんが、このコンポーネントの他のプロパティではバインディングを利用できます。次に例を示します：

{
"type": "Text",
"bind": [
{ "name": "foo", "value": "27" },
{ "name": "bar", "value": "${foo + 23}" }
],
"text": "barの値は${bar}です"
}

上記の例では、fooとbarがデータバインディングコンテキストの引数になります。文字列と整数を足し算すると型は暗黙的に文字列に変換されるため、最終的なテキストは「barの値は2723です」になります。

entity

Opaqueのentityデータです。Alexaデバイスは実体データをコンテキストとしてスキルに返します。

heightおよびwidth

width、height、minWidth、minHeight、maxWidth、maxHeightはすべてディメンション型のプロパティです。

最小幅および最小高のデフォルト値は0であり、コンポーネントは表示されない場合があります。最大幅および最大高のプロパティのデフォルト値はnoneであり、コンポーネントは自由に拡大縮小できます。widthおよびheightの値を指定しない場合は、コンポーネントの元のサイズになります。

id

階層表示で特定のコンポーネントを見つけられるように開発者が割り当てる値です。他のIDと同じ値を使用してもかまいませんが、一意の値を割り当てることをお勧めします。

inheritParentState

コンポーネントの状態を、コンポーネントの親の状態に置き換えます。コンポーネントの見た目を親の状態に合わせて変更する必要があるときに使用します。たとえば、TouchWrapperが押されたときに、TouchWrapperの内側にあるTextコンポーネントの色を変更する場合を考えます。TextコンポーネントのinheritParentStateを設定することで、TouchWrapperの状態が変わると、このコンポーネントの状態も変わるようになります。

paddingBottom、paddingLeft、paddingRight、paddingTop

paddingの値はディメンション型であり、コンポーネントの周りに追加するスペースを指定します。APLでは、パディングと境界線を含めて要素の全幅と全高を計算します。それぞれのデフォルトは0です。

style

styleには、名前付きのスタイルを指定します。スタイルを割り当てない場合、コンポーネントではプラットフォームで定義された内部スタイルが使用されます。

type

インフレートするコンポーネントを指定します。このセクションに記載したプリミティブコンポーネントのいずれか、または名前付きレイアウトを指定できます。

when

whenの式がtrueの場合、コンポーネントをインフレートします。falseの場合は、コンポーネントとすべての子コンポーネントが無視されます。

Amazon Alexa
Amazon Appstore
Amazon Web Services
Amazon Dash Replenishment