APLコンポーネントの条件付きインフレート

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

コンポーネントの条件付きインフレートは、APLドキュメントでインフレートするコンポーネントとレイアウトを決定します。たとえば、APLドキュメントのmainTemplateプロパティはitemsプロパティ内のコンポーネントの配列を受け取りますが、レンダリングするのは1つのコンポーネントだけです。どのコンポーネントをインフレートするかは、コンポーネントの条件付きインフレートによって決まります。コンポーネントのインフレートアルゴリズムを使用すると、コンポーネントの配列、プリミティブコンポーネントのwhenプロパティ、データバインディングを組み合わせて簡潔な条件式を作成できます。

条件付きインフレートのシナリオ

条件付きインフレートの動作はシナリオによって異なります。

1つの子のみ - Alexaは、コンポーネント候補の配列から1つのコンポーネントのみをインフレートします。
単純な配列 - Alexaは、コンポーネントの配列からコンポーネントの一部をインフレートします。
データ配列 - Alexaは、データ配列を使ってコンポーネントのセットをインフレートします。

1つの子のみ

1つの子のみのインフレートでは、Alexaはコンポーネントの配列から最大1つの子コンポーネントをインフレートします。たとえば、APLドキュメントのmainTemplateプロパティのitems配列に複数のコンポーネントがある場合でも、Alexaがインフレートするのは配列の1つのコンポーネントのみとなります。

使用場所 - items内のコンポーネントの配列を受け取って、1つの子のみをインフレートするコンポーネントで使用されます。たとえば次のようなコンポーネントです。
- ドキュメントのmainTemplate.items配列。
- ユーザー定義レイアウト。
- 1つの子コンポーネントをサポートするコンポーネント： ScrollView、Frame、TouchWrapper。
- firstItemやlastItemなど、1つの子をインフレートする複数子コンポーネントのプロパティ。
アルゴリズム - コンポーネントの配列を受け取ったら、各コンポーネントのwhenプロパティを順番に評価します。whenプロパティの評価結果がtrueになった最初のコンポーネントを使用します。whenプロパティがtrueとなるコンポーネントがない場合は、どのコンポーネントもインフレートされません。whenプロパティを省略すると、デフォルトでtrueになります。
データバインディング - なし。

1つの子のみをインフレートする場合のサンプル

この例では、Viewportが円形の場合はContainerが、Viewportが長方形の場合はFrameがインフレートされます。

"myLayout": 
{
  "parameters": [
    "title",
    "logo"
  ],
  "item": [
    {
      "when": "${viewport.shape == 'round'}",
      "type": "Container",...
    },
    {
      "type": "Frame",...
    }
  ]
}

1つの子のみのインフレートと`mainTemplate`

誤ってmainTemplate配列に複数のコンポーネントを配置することがよくあります。APLドキュメントのmainTemplateプロパティは1つの子のみのインフレートを使用するため、whenがtrueになった最初のコンポーネントが表示され、その他のコンポーネントは一切表示されません。

whenプロパティを指定しない場合は、デフォルトでtrueになります。以下は、このシナリオの例です。2番目のTextコンポーネントは表示されません。

mainTemplateを適切に使用するには、when句を使用して最上位のコンポーネントに条件を指定します。たとえば、最初のコンポーネントに変更を加えて、falseと評価されることがあるwhenプロパティを含めます。次の例では、最初のコンポーネントは丸形のViewportに表示され、2番目のコンポーネントはほかのすべてのタイプのViewportに表示されます。

{
  "when": "${viewport.shape == 'round'}",
  "type": "Text",
  "padding": 20,
  "text": "This is the first child component in <tt>mainTemplate</tt>.It doesn't specify <tt>when</tt>, so <tt>when</tt> defaults to <tt>true</tt>.Therefore, this component always displays."
}

複数のコンポーネントを同時に表示するには、ContainerやSequenceなど、複数子コンポーネントの内部にそれらを配置する必要があります。

子コンポーネントの単純な配列

単純な配列のインフレートの場合、Alexaはコンポーネントの配列からコンポーネントの一部をレンダリングします。たとえば、Containerのitemsプロパティに別々のコンポーネントの配列を渡すことができます。Alexaは配列の各項目をレンダリングします。

使用場所 - dataプロパティが設定されていない場合、次の複数子コンポーネントで使用されます。
- Container
- GridSequence
- Pager
- Sequence
アルゴリズム - 配列の各コンポーネントのwhenプロパティを評価します。when句がtrueと評価された場合、コンポーネントをインフレートし、子の配列に追加します。
データバインディング - index、length、ordinal（オプション）の値がバインドされます。APLデータバインディングの評価を参照してください。

複数子のコンポーネントで種類の異なる項目をまとめてレンダリングする場合、項目の単純な配列を使用します。

次の例では、3つのコンポーネントをitems配列のContainerに渡します。Text見出しは常に表示され、画像はViewportのwidthがheightよりも小さい場合に表示されます。また、Textの本文は常に表示されます。

{
  "type": "Container",
  "padding": 20,
  "items": [
    {
      "type": "Text",
      "style": "heading",
      "text": "Mars rover Opportunity is declared dead"
    },
    {
      "type": "Image",
      "when": "${viewport.width < viewport.height}",
      "spacing": "@spacingMedium",
      "height": "25%",
      "width": "90%",
      "scale": "best-fill",
      "alignSelf": "center",
      "source": "https://www.example.com/mars-rover.jpg"
    },
    {
      "type": "Text",
      "style": "textStyleBody",
      "spacing": "@spacingMedium",
      "text": "After fifteen years without any signal, the Mars rover Opportunity has ...}"
    }
  ]
}

以下のAPLドキュメントは、この例を示しています。この例では、画像にプレースホルダーを使用し、テキストと画像のソースを別のデータソースに移動しています。Mobile Small PortraitのViewportを選択すると、when句がtrueになるシナリオを確認できます。この例ではalexa-stylesパッケージもインポートし、視覚表現を標準化しています。

データ配列

データ配列のインフレートの場合、Alexaはデータの配列を使ってコンポーネントのセットをインフレートします。この方法は、複数子コンポーネントでdataプロパティが設定されている場合に使用できます。

使用場所 - dataプロパティがデータの配列に設定されている場合、次の複数子コンポーネントで使用されます。
- Container
- GridSequence
- Sequence
- Pager
アルゴリズム - 指定されたdata配列の各要素が、データバインディングコンテキストの「data」に順にバインドされます。バインドされた要素ごとに、1つの子のみのアルゴリズムを使用して1つのコンポーネントを検索します。
データバインディング - data、index、length、ordinal（オプション）の値がバインドされます。

APLデータバインディングの評価を参照してください。

連結して表示したいデータの配列がある場合は、このデータ配列アプローチを使用します。インフレートするコンポーネントのセットを定義すると、Alexaはデータの項目ごとにそのコンポーネントのセットをレンダリングします。

たとえば、レシピの手順を表示するとします。この場合、1つの手順を表示するTextコンポーネントを含むContainerを定義できます。次に、手順を示すdataプロパティに文字列の配列を渡します。Alexaは、data配列の文字列ごとに1回ずつTextコンポーネントをインフレートします。Textコンポーネントは、配列内の各項目のdata、ordinal、indexの各プロパティにアクセスできます。

{
  "type": "Container",
  "padding": 20,
  "direction": "column",
  "numbered": true,
  "item": {
    "type": "Text",
    "text": "${ordinal}. ${data}",
    "spacing": 20
  },
  "data": [
    "Preheat the oven to 350 degrees F.",
    "Using a mixer, cream the butter and sugar until smooth",
    "With the mixer on, add one egg at a time to the butter-sugar mixture and beat until smooth",
    "Combine the flour, baking powder, and salt in a separate ...."
  ]
}

次のAPLドキュメントは、このContainerの例を示しています。レシピの手順のリストは、データソース内の配列にあります。

また、データ配列のインフレートとwhenプロパティを組み合わせて、種類の異なるデータのセットをインフレートすることもできます。次の例では、Sequenceのitems配列に2つのコンポーネント（TextコンポーネントとContainer）が含まれています。Textコンポーネントは、whenプロパティを使用して、headerプロパティを持つ各データ項目を表示します。Containerは、このプロパティのないデータ項目を表示します。

{
  "type": "Sequence",
  "height": "100%",
  "numbered": true,
  "padding": 20,
  "items": [
    {
      "when": "${data.header}",
      "type": "Text",
      "text": "${data.header}",
      "numbering": "reset",
      "fontWeight": "bold"
    },
    {
      "type": "Container",
      "direction": "row",
      "alignItems": "center",
      "items": [
        {
          "type": "Image",
          "source": "${data.url}"
        },
        {
          "type": "Text",
          "text": "${ordinal}. ${data.caption}",
          "spacing": 20
        }
      ]
    }
  ],
  "data": [
    {
      "header": "Beach Photos"
    },
    {
      "url": "https://images.example.com/photos/248797/xxx.jpg",
      "caption": "Scene 248797"
    },
    {
      "url": "https://images.example.com/photos/237739/yyy.jpg",
      "caption": "Beach Boat Clouds Daylight 237739"
    },
    {
      "header": "Dog Photos"
    },
    {
      "url": "https://images.example.com/photos/356378/zzz.jpg",
      "caption": "Adorable Animal Breed Canine 356378"
    }
  ]
}

以下のドキュメントは、この例を示しています。この例では、実際の画像の代わりに画像プレースホルダーを使用しています。また、data配列をデータソースに移動しています。

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

フィードバックを送信

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

APLコンポーネントの条件付きインフレート

条件付きインフレートのシナリオ

1つの子のみ

1つの子のみをインフレートする場合のサンプル

1つの子のみのインフレートとmainTemplate

子コンポーネントの単純な配列

データ配列

関連トピック

1つの子のみのインフレートと`mainTemplate`