コンテンツを背景、境界線、ヘッダーと組み合わせる

Alexa Presentation Languageのほとんどのコンポーネントには境界線や背景色のプロパティがないため、背景と境界線を表示するには、複数のコンポーネントを組み合わせる必要があります。

Viewport全体に背景を表示する

背景に色、画像、ビデオを表示するには、Alexa Backgroundレスポンシブ対応コンポーネントを使用します。このコンポーネントはViewport全体に表示され、異なるViewportのサイズに合わせて自動的に調整されます。AlexaBackgroundコンポーネントをContainer内でほかのコンポーネントと組み合わせると、同じ親Containerに追加したほかのコンポーネントが背景の上に表示されます。

コンテンツに背景を作成するには

1. alexa-layoutsの最新バージョンをドキュメントのimport配列に追加します。

    {
      "import": [
        {
          "name": "alexa-layouts",
          "version": "1.7.0"
        }
      ]
    }
   

2. AlexaBackgroundをContainer内のほかのコンポーネントと組み合わせます。背景の上に表示するコンポーネントの前にAlexaBackgroundを配置します。

    {
      "type": "Container",
      "items": [
        {
          "type": "AlexaBackground",
        },
        {
          "type": "Text",
          "text": "背景の上に表示されるテキスト。",
        }
      ]
    }
   

   ほかのコンポーネントの後にAlexaBackgroundを配置すると、背景がほかのコンポーネントを覆い隠すことになります。

3. 少なくともbackgroundVideoSource、backgroundImageSource、backgroundColorのいずれかを設定して、背景を表示します。

    {
      "type": "AlexaBackground",
      "backgroundImageSource": "https://d2o906d8ln7ui1.cloudfront.net/images/MollyforBT7.png"
    }
   

   これらのプロパティの1つだけが使用されます。たとえば、backgroundImageSourceとbackgroundColorの両方を指定すると、Alexaは背景画像を表示します。Alexa Backgroundの背景ソースの優先順位を参照してください。

   これらの3つのソースプロパティのいずれも設定しない場合、Alexaはデフォルトの背景を表示します。

次の例では、背景に画像を使用します。この例では、colorOverlayも設定して画像にスクリム（オーバーレイ）を適用し、テキストを読みやすくしています。

AlexaBackgroundコンポーネントは、絶対位置を使用して、自身の上にほかのコンポーネントが表示されるようにします。つまり、子項目を配置する親Containerのプロパティが背景に影響することはありません。

たとえば、次のContainerでは、justifyContentがendに設定されているため、Alexaは子コンポーネントを画面下部に配置します。paddingBottomプロパティにより、最後のコンポーネントと画面下部の間にスペースが追加されます。AlexaBackgroundも同じContainerの子ですが、これらのプロパティは背景の配置には影響せず、Textコンポーネントにのみ影響します。

{
  "type": "Container",
  "justifyContent": "end",
  "paddingBottom": "@spacingLarge",
  "items": [
    {
      "type": "AlexaBackground",
      "backgroundImageSource": "https://d2o906d8ln7ui1.cloudfront.net/images/MollyforBT7.png",
      "colorOverlay": true
    },
    {
      "type": "Text",
      "text": "この例の<code>justifyContent</code>プロパティと<code>paddingBottom</code>プロパティは、ほかの子プロパティに影響しますが、AlexaBackgroundには影響しません。",
      "style": "textStyleBody",
      "paddingLeft": "@marginHorizontal",
      "paddingRight": "@marginHorizontal",
      "textAlign": "center"
    }
  ]
}

画面上部にヘッダーを表示する

画面上部に表示されるヘッダーは、タイトルとサブタイトルの情報を表示したり、アイコンを使用してスキルをブランディングしたりするために役立ちます。

ドキュメントにヘッダーを追加するには、Alexa Layoutsパッケージで提供されるAlexa Header（AlexaHeader）レスポンシブ対応コンポーネントを使用します。

ドキュメントにヘッダーを追加するには

1. alexa-layoutsの最新バージョンをドキュメントのimport配列に追加します。

    {
      "import": [
        {
          "name": "alexa-layouts",
          "version": "1.7.0"
        }
      ]
    }
   

2. AlexaHeaderをContainer内のほかのコンポーネントと組み合わせます。Viewportの上部で、ほかのコンポーネント（AlexaBackgroundも使用している場合はそれ以外）の前に表示されるようにAlexaHeaderを配置します。

    {
      "type": "Container",
      "items": [
        {
          "type": "AlexaHeader",
          "headerTitle": "これはメインヘッダーのタイトルです",
          "headerSubtitle": "これはヘッダーのサブタイトルです",
          "headerDivider": true,
          "headerAttributionImage": "https://d2o906d8ln7ui1.cloudfront.net/images/cheeseskillicon.png"
        },
        {
          "type": "Text",
          "text": "ヘッダーの後に表示するテキスト。"
        }
      ]
    }
   

3. ヘッダーに表示するプロパティ（headerTitle、headerSubtitleなど）を設定します。使用可能なプロパティについては、Alexa Headerを参照してください。

AlexaHeaderとほかのコンポーネントを合わせて配置する

Containerのプロパティを使用して、子コンポーネントの位置を指定します。画面上部のAlexaHeaderの配置を妨げるようなレイアウトは作成しないでください。レイアウトによっては、次のように追加のContainerを入れ子にする必要があります。

Container
  AlexaHeader
  Container
    ほかのコンポーネント...

AlexaHeaderを含むContainerのレイアウトを定義するときは、以下の点に留意してください。

• Alexa Background - AlexaBackgroundとAlexaHeaderの両方を一緒に使用できます。この場合、ContainerにまずAlexaBackgroundを配置し、その後でAlexaHeaderを配置します。
• レイアウト方向 - Containerのdirectionプロパティはデフォルト（column）のままにします。これにより、縦型のレイアウトが作成され、各子コンポーネントは前のコンポーネントの下に表示されます。この設定をrowに変更すると、各子コンポーネントは前のコンポーネントの右側に表示されます。これは、画面上部に配置されるヘッダーの妨げになります。AlexaHeaderの下に横型のレイアウトを作成するには、別のContainerを入れ子にします。

• 絶対位置と相対位置 - 同じContainer内のほかの項目のいずれかに絶対位置を使用する場合は、注意が必要です。コンポーネントのpositionをabsoluteに設定すると、そのコンポーネントは通常の階層から除外され、親に対して相対的に配置されます。これにより、コンテンツがヘッダーと重なる場合があります。デフォルトのposition（relative）であれば、後続のコンポーネントがヘッダーの後に自動的に配置されるため、扱いは簡単です。

  AlexaHeaderと同じContainer内のコンポーネントで絶対位置を使用する必要がある場合は、コンポーネントがヘッダーに重ならないように、topのオフセットを十分に大きく設定してください。または、bottomプロパティを使用して、コンポーネントにViewportの下端からのオフセットを設定することもできます。

• 主軸上の配置 - Containerの方向がcolumnの場合、justifyContentプロパティは子コンポーネントの垂直方向のレイアウトを制御します。AlexaHeaderを画面上部に表示するには、デフォルト値（start）を使用します。これを変更すると、AlexaHeaderの垂直方向の配置も変更されます。たとえば、justifyContentをendに設定すると、Container内のすべてのコンポーネント（AlexaHeaderを含む）がViewportの下部に移動します。

  一部の項目に別のjustifyContent設定を使用する必要がある場合は、それらの項目を格納する別のContainerを入れ子にして、そこにjustifyContentを設定します。

• 交差軸上の配置 - Containerの方向がcolumnの場合、alignItemsプロパティは子コンポーネントの水平方向の配置を制御します。これはデフォルト（auto）のままにしてください。変更すると、AlexaHeaderの水平方向の配置も変更されます。必要に応じてほかの子コンポーネントの配置を変更するには、次のような方法があります。
  • ほかのコンポーネントを別のContainer内に入れ子にして、そのContainerでalignItemsを設定します。
  • 親ContainerのalignItemsはデフォルトの設定にしたまま、AlexaHeader以外の子でalignSelfを使用して設定をオーバーライドします。
  • 必要に応じて親ContainerのalignItemsを変更し、AlexaHeaderのalignSelfをstretchに設定します。
• パディング - Containerレベルのパディングプロパティは、Containerのすべての子コンポーネントの配置を変更します。これにはAlexaHeaderも含まれます。たとえば、paddingTopを設定するとヘッダーの位置が下がり、paddingLeftを設定するとインデントが適用されます。AlexaHeaderコンポーネントで定義されたパディングを使用するには、Containerのpaddingプロパティを未設定のままにします。ほかの子コンポーネントに別のパディングを設定する必要がある場合は、次のような方法を使用できます。
  • ほかのコンポーネントを別のContainer内に入れ子にして、そこにpaddingプロパティを設定します。
  • 個々の子コンポーネントにpaddingプロパティを設定します。

  子コンポーネントの左右のマージンをAlexaHeaderの左右のパディングと一致させるには、これらのコンポーネントのpaddingLeftプロパティとpaddingRightプロパティに、Alexa Stylesパッケージで提供されるmarginHorizontalリソースを設定します。

• データ配列のインフレート - dataプロパティを持つコンポーネントにはデータ配列をバインドできます。この場合、Alexaは配列の項目ごとに1回ずつ、whenがtrueであるitemsの最初のコンポーネントを表示します。これにより、AlexaHeaderのコンテンツが複数回表示され、その他のコンポーネントが無視される問題が発生することがあります。この状況でAlexaHeaderを使用するには、ContainerのitemsプロパティではなくfirstItemプロパティにAlexaHeaderを配置します。

次の例では、alignItemsプロパティとjustifyContentプロパティを使用して、複数のTextコンポーネントを中央に配置します。ヘッダーをViewportの上部に左揃えで配置するために、ドキュメントは2つのContainerコンポーネントを使用します。

• トップレベルのContainerには、AlexaHeaderと2番目のContainerが子コンポーネントとして含まれています。
• 2番目のContainerには、alignItemsプロパティとjustifyContentプロパティが設定され、中央に配置されるTextコンポーネントが含まれています。このContainerでは、heightを「100%」に設定し、次にshrinkを使用して、ヘッダーを表示した後に残る垂直方向のViewportのスペースがすべてContainerで占められるようにします。

次の例では、Containerに含まれている単一のTextコンポーネントに、dataプロパティで指定された配列の値を表示します。AlexaHeaderコンポーネントは、itemsではなくfirstItemプロパティに含まれています。このため、画面の最上部に1回、配列項目の前に表示されます。

Data Sourcesタブをクリックし、bakingSteps配列に別の項目を追加してください。ドキュメントが更新され、新しい項目が追加されます。AlexaHeaderは画面の最上部に表示されたままです。この例は、小型の円形デバイスには適していないことに注意してください。コンテンツ全体が小さい画面に収まりません。実際のドキュメントでは、ScrollViewまたはSequenceを使用して、調理手順のリストをスクロールできるようにするのが現実的です。AlexaHeaderをスクロールコンテンツと組み合わせる方法の詳細については、スクロールテキストをヘッダーおよびフッターと組み合わせるを参照してください。

画面下部にフッターを表示する

画面下部にフッターを作成し、そこにヒントを表示して、ユーザーが使用できるほかのフレーズを提案することができます。

ドキュメントにフッターを追加するには、Alexa Layoutsパッケージで提供されるAlexa Footer（AlexaFooter）レスポンシブ対応コンポーネントを使用します。

ドキュメントにフッターを追加するには

1. alexa-layoutsの最新バージョンをドキュメントのimport配列に追加します。

    {
      "import": [
        {
          "name": "alexa-layouts",
          "version": "1.7.0"
        }
      ]
    }
   

2. AlexaFooterをContainer内のほかのコンポーネントと組み合わせます。AlexaFooterを最後に配置して、ほかのコンポーネントの後、Viewportの下部に表示されるようにします。

    {
      "type": "Container",
      "items": [        
        {
          "type": "Text",
          "text": "本文テキスト。"
        },
        {
          "type": "AlexaFooter"
        }
      ]
    }
   

3. 表示するテキストをhintTextプロパティに設定します。

   デバイスのウェイクワードを使用してヒントを自動的に書式設定するには、データソースとデータトランスフォーマーを使用します。

4. Containerのその他のプロパティを設定して、フッターがViewportの下部に表示されるようにします。後述のフッターの位置を設定するを参照してください。

次の例では、ヘッダーとフッターの両方を含むTextコンポーネントを表示します。

フッターの位置を設定する

AlexaFooterがContainerのitems配列の最後にある場合は、ほかのすべてのコンポーネントの後に表示されます。ただし、ほかのコンポーネントのサイズによっては、意図したとおりにViewportの下部に表示されない場合があります。AlexaFooterを常にViewportの下部に表示するには、次のような方法があります。

• AlexaFooterのpositionをabsoluteに設定し、bottomを0に設定します。これにより、ほかのコンポーネントの位置やサイズに関係なく、AlexaFooterはViewportの下端から0ピクセルのオフセット位置に配置されます。AlexaFooterレスポンシブ対応コンポーネントには下パディングが含まれているため、追加のパディングを含める必要はありません。前述の基本的なフッターの例では、この方法を使用しています。

  本文のコンテンツとフッターの両方を表示できる十分なスペースが垂直方向にない場合、フッターは本文のコンテンツと重なります。本文のコンテンツが長くなりすぎないようにしてください。

• ContainerのheightをViewport全体の高さに設定し、Container内のほかのコンポーネントのgrowを「1」に設定します。growが設定されたコンポーネントは、Viewport内の空きスペースを埋めるように拡大されます。

  本文のコンテンツとフッターの両方を表示できる十分なスペースが垂直方向にないと、フッターは画面下部から外れて表示されなくなります。本文のコンテンツが長くなりすぎないようにしてください。

次の例では、Viewport内の本文に2つのTextコンポーネントがあります。2番目のコンポーネントはgrowが「1」に設定されているため、そのTextのバウンディングボックスが残りのスペースを占有します。

長いコンテンツを表示する場合、小型の円形デバイスではフッターを非表示にします。そのためには、whenプロパティを使用して、"when": "${@viewportProfile != @hubRoundSmall}のような条件を作成します。

ドロップダウンリストでHub Round Smallを選択して、フッターが非表示になることを確認してください。

ヒントでデバイスのウェイクワードを使用する

ユーザーは、デバイスで使用するウェイクワードを設定できます。ウェイクワードが常に「アレクサ」であるとは限らないため、フッターのテキストを「『アレクサ、何かほかのことをして』と言ってみてください」のようにハードコードすることは避けてください。代わりに、データソースとtextToHintトランスフォーマーを使用すると、デバイス固有のウェイクワードを自動的にヒントに含めることができます。このトランスフォーマーでは、一貫性を保つためにテキストの書式設定も適用されます。

textToHintトランスフォーマーを使用するには

1. objectデータソースに、propertiesオブジェクト内のプロパティとしてヒントテキストを追加します。次の例では、ヒントはpropertiesオブジェクト内のhintTextToTransformプロパティに含まれています。ここにはヒントの語句だけを含めるようにしてください。ウェイクワードや「言ってみてください」という語句は除外します。

    {
      "footerExampleData": {
        "type": "object",
        "objectId": "footerExampleData",
        "description": "このデータソースには、フッターのヒントの例で使用されるデータが含まれています。",
        "properties": {
          "hintTextToTransform": "このスキルを使って何かほかのことをして"
        }
      }
    }
   

2. データソースのtransformers配列にtextToHintトランスフォーマーを追加し、そのトランスフォーマーのinputPathに、ヒントテキストを持つプロパティを設定します。さらに、変換された値を受け取るoutputNameプロパティを指定します。

    {
      "transformers": [
        {
          "inputPath": "hintTextToTransform",
          "transformer": "textToHint",
          "outputName": "transformedHintText"
        }
      ]
    }
   

   outputNameは省略できます。その場合、変換された値はinputPathで指定したプロパティに格納されます。

3. ドキュメントで、データバインディングを使用してAlexaFooterのhintTextプロパティにトランスフォーマーの出力を設定します。

    {
      "type": "AlexaFooter",
      "hintText": "${payload.footerExampleData.properties.transformedHintText}"
    }
   

以下のfooterExampleデータソースでは、ヒントテキスト（「このスキルを使って何かほかのことをして」）がfooterExampleData.properties.hintTextToTransformに格納されています。トランスフォーマーはテキストがfooterExampleData.properties内にあると想定するため、inputPathではプロパティ名のhintTextToTransformのみを参照します。変換の結果はtransformedHintTextプロパティに格納されます。

データソース： textToHintトランスフォーマーの例  

{
  "footerExampleData": {
    "type": "object",
    "objectId": "footerExampleData",
    "description": "このデータソースには、フッターのヒントの例で使用されるデータが含まれています。",
    "headerTitle": "フッターでデバイスのウェイクワードを使用する",
    "headerSubtitle": "<code>textToHint</code>トランスフォーマーを使用する",
    "headerAttributionImage": "https://d2o906d8ln7ui1.cloudfront.net/images/cheeseskillicon.png",
    "bodyTextToShow": "<code>textToHint</code>トランスフォーマーを使用して、デバイス固有のウェイクワードでヒントを書式設定します。ヒントテキストはデータソースに格納されている必要があります。",
    "properties": {
      "hintTextToTransform": "このスキルを使って何かほかのことをして"
    },
    "transformers": [
      {
        "inputPath": "hintTextToTransform",
        "transformer": "textToHint",
        "outputName": "transformedHintText"
      }
    ]
  }
}

次の例は、ドキュメント内でトランスフォーマーの出力を使用する方法を示しています。AlexaFooterのhintTextプロパティは、データバインディングを使用してfooterExampleDataデータソースからtransformedHintText値を取得します。

サンプルドキュメント： textToHintトランスフォーマーを使用するAlexaFooter  

{
  "type": "APL",
  "version": "2024.3",
  "import": [
    {
      "name": "alexa-layouts",
      "version": "1.7.0"
    }
  ],
  "mainTemplate": {
    "parameters": [
      "footerExampleData"
    ],
    "items": [
      {
        "type": "Container",
        "height": "100vh",
        "width": "100vw",
        "firstItem": [],
        "lastItem": [],
        "items": [
          {
            "type": "AlexaHeader",
            "headerTitle": "${footerExampleData.headerTitle}",
            "headerSubtitle": "${footerExampleData.headerSubtitle}",
            "headerDivider": true,
            "headerAttributionImage": "${footerExampleData.headerAttributionImage}"
          },
          {
            "type": "Text",
            "text": "${footerExampleData.bodyTextToShow}",
            "style": "textStyleBody",
            "paddingLeft": "@marginHorizontal",
            "paddingRight": "@marginHorizontal",
            "paddingTop": "@spacingSmall",
            "maxLines": 4,
            "grow": 1
          },
          {
            "type": "AlexaFooter",
            "hintText": "${footerExampleData.properties.transformedHintText}"
          }
        ]
      }
    ]
  }
}

デフォルトの「アレクサ」というウェイクワードを使用するデバイスでは、次のヒントが表示されます。

「アレクサ、このスキルを使って何かほかのことをして」と言ってみてください。

ウェイクワードが「エコー」に設定されたデバイスでは、次のヒントが表示されます。

「エコー、このスキルを使って何かほかのことをして」と言ってみてください。

スクロールテキストをヘッダーおよびフッターと組み合わせる

スクロールが必要なコンテンツの場合、ScrollViewやSequenceの前後にヘッダーとフッターを配置するときは、Viewportのサイズを考慮する必要があります。

• 小さい画面（特に小型の円形デバイス）では、AlexaHeaderをスクロール領域内に配置して、ヘッダーが画面外にスクロールされるようにします。これにより、コンテンツが表示される画面スペースを最大化できます。たとえば、次のような構造を使用できます。

  Container
    AlexaBackground
    ScrollView
      Container
        AlexaHeader
        スクロールする必要のあるコンテンツを含むコンポーネント
  

• 中型および大型の画面では、AlexaHeaderをスクロール領域の外に配置して、ヘッダーが常に表示されるようにします。たとえば、次のような構造を使用できます。

  Container
    AlexaBackground
    AlexaHeader
    ScrollView      
        スクロールする必要のあるコンテンツを含むコンポーネント
        （または、表示するコンポーネントが複数ある場合はContainer）
  

Viewportに表示するコンポーネントを決定するための条件を設定するには、whenプロパティを使用します。

{
  "mainTemplate": {
    "items": [
      {
        "when": "${@viewportProfile == @hubRoundSmall}",
        "type": "Container",
        "items": []
      },
      {
        "type": "Container",
        "items": []
      }
    ]
  }
}

次の例は、小型の円形デバイスの画面ではヘッダーがスクロールし、大きいViewportでは固定の位置に表示されるドキュメントを示しています。この例では、両方のバージョンのレイアウトに必要なデータをデータソースで定義しています。表示するメインコンテンツは、配列に格納されている一連の段落です。プレビューをクリックしてドラッグすると、コンテンツがスクロールし、ヘッダーが固定されていることがわかります。Hub Round Smallに切り替えて、コンテンツをスクロールするとヘッダーアイコンが画面外にスクロールすることを確認してください。

次の例では、同じデザインを、パラメーターのある再利用可能なレイアウトとして実装します。mainTemplateにはカスタムレイアウトが1つ配置され、パラメーターにデータが1回渡されます。コンテンツは引き続きデータソースで定義されますが、レイアウトのパラメーターを使用することで複製は排除されます。

スクロールテキストの詳細については、以下を参照してください。

• 画面上にテキストを表示するの長いスクロールテキストを表示する
• ScrollViewコンポーネント
• Sequenceコンポーネント

項目の周囲に境界線を描画する

画面上の項目の周囲に境界線を描画するには、Frameコンポーネントを使用します。このコンポーネントには、境界線と背景色のいずれかまたは両方を含めることができます。Frameは、境界線の内側に表示する子コンポーネントを1つ受け取ります。複数のコンポーネントの周囲に境界線を描画する場合は、各コンポーネントをContainerに格納し、そのContainerをFrameの子コンポーネントとして使用します。

境界線の例

次の例では、Textコンポーネントの周囲に青緑色の境界線を作成します。paddingプロパティは、Frame内のTextコンポーネントと境界線の間にスペースを作成します。

{
  "type": "Frame",
  "borderColor": "@colorTeal800",
  "borderWidth": "5",
  "paddingLeft": "@spacingXSmall",
  "paddingRight": "@spacingXSmall",
  "paddingTop": "@spacingXSmall",
  "paddingBottom": "@spacingXSmall",
  "items": [
    {
      "type": "Text",
      "text": "この<code>Frame</code>には、青緑色の境界線と透明な背景が設定されています。<code>Frame</code>には1つの<code>Text</code>コンポーネントが含まれ、<code>Frame</code>の内側に表示されます。",
      "style": "textStyleBody",
      "maxLines": 3
    }
  ]
}

次の例では、Frameがほかのコンポーネントと共にContainerに含まれています。Alexaは、Frameの子コンポーネントの周囲にのみ境界線を描画します。

角丸と円形の境界線

角を丸くするには、borderRadiusプロパティを使用します。デフォルトでは、このプロパティは0に設定されているため、角が直角になります。境界線の半径の値を大きくすると、角が丸くなります。大きい値に設定すると、Frameは円（Frameが正方形の場合）か、細長い円つまり楕円（Frameが正方形でない場合）として描画されます。

Alexa Stylesパッケージには、境界線の丸みを設定するために使用できる事前定義されたリソースとして、shapeRoundedRectとshapeCircleが用意されています。

次の例では、2つのFrameコンポーネントを表示します。1つはborderRadiusが0に設定され、もう1つはshapeRoundedRectに設定されています。

境界線を円形にするには、Frameのheightとwidthを正確に同じサイズに設定します。次の例では、borderRadiusがshapeCircleに設定された2つのFrameコンポーネントを表示します。最初のFrameは、heightとwidthの寸法が異なるため、細長い円として表示されます。2番目は、heightとwidthが同じ値に設定されているため、円として表示されます。この例では、リソースを使用して、Viewportのサイズに応じて円のサイズを異なる値に設定します。

フレームを背景色で塗りつぶす

FrameにはbackgroundColorプロパティもあります。各項目に色付きの背景を表示する場合は、これを使用します。Viewport全体の背景を指定する場合は、AlexaBackgroundレスポンシブ対応コンポーネントを使用します。

たとえば、次のFrameは、背景色で塗りつぶされた円を作成します。指定されたテキストが円の内側に表示されます。

{
  "type": "Frame",
  "width": "200dp",
  "height": "200dp",
  "backgroundColor": "${backgroundColor}",
  "borderRadius": "@shapeCircle",
  "items": [
    {
      "type": "Text",
      "text": "${text}",
      "textAlign": "center",
      "width": "100%",
      "height": "100%",
      "textAlignVertical": "center"
    }
  ]
}

以下の完全な例では、次の点に注意してください。

• TextCircleWithBackgroundというカスタムレイアウトで、Frameを定義しています。このレイアウトには、表示する色とテキストのパラメーターを指定できます。
• Containerは、mainTemplateにTextCircleWithBackgroundを配置します。Containerのdataプロパティにはオブジェクトの配列が含まれ、それぞれが色とテキストを設定します。

デバイスがこのドキュメントを表示すると、data配列の項目ごとにTextCircleWithBackgroundが表示されます。

関連トピック

• 画面上にテキストを表示する
• レスポンシブ対応のAPLドキュメントを作成する
• Textコンポーネント
• Alexa Stylesパッケージ（alexa-styles）
• APLスタイルの定義と評価

最終更新日: 2025 年 11 月 26 日