Footer
Footer
Footerレスポンシブ対応コンポーネント（AlexaFooter）は、画面下部にヒントを表示します。ヒントは、ほかの発話をユーザーに提案することを目的にしています。textToHintトランスフォーマーを使用すると、デバイスに設定されているウェイクワードが自動的に表示されます。
alexa-layoutsパッケージを読み込む
AlexaFooterを使用するには、alexa-layoutsパッケージを読み込みます。
alexa-layoutsパッケージの最新バージョンは1.4.0です。AlexaFooterはバージョン1.0.0で導入されました。
このページの上部にあるその他のバージョンオプションをクリックすると、別のバージョンのAlexaFooterドキュメントが表示されます。各パラメーターが追加されたalexa-layoutsのバージョンを、パラメーターの表に示します。
type以外のパラメーターはすべてオプションです。
|
entities
|
配列
|
[]
|
このコンポーネントにバインドするentityデータの配列です。
|
1.2.0
|
|
hintText
|
文字列
|
なし
|
フッターに表示するヒントテキストです。正しいウェイクワードをヒントに追加するには、textToHintトランスフォーマーを使用します。
|
1.0.0
|
|
lang
|
文字列
|
${environment.lang}
|
フッターに表示されるテキストの言語です。この言語によって、テキストに使用されるデフォルトのフォントが決まります。たとえば、ar-SAを設定すると、コンポーネントはデバイスで利用できる場合にアラビア語のフォントを使用します。BCP-47文字列に設定します。
レスポンシブ対応コンポーネントの言語固有フォントについて詳しくは、Language-specific fonts in the components and templatesを参照してください。
|
1.4.0
|
|
layoutDirection
|
文字列
|
inherit
|
コンテンツのレイアウト方向を指定します。このプロパティをLTR（左から右）、RTL（右から左）のいずれかに設定します。設定しない場合、このプロパティは、親コンポーネントで指定したlayoutDirectionを継承します。
レスポンシブ対応コンポーネントでの右から左に記述する言語のサポートについて詳しくは、Support for Right-to-left Languagesを参照してください。
|
1.4.0
|
|
theme
|
文字列
|
dark
|
色のテーマをダークまたはライトに設定します。テーマを選択することでコンポーネントの色を制御します。
|
1.1.0
|
|
type
|
文字列
|
なし
|
常にAlexaFooterに設定されます。
|
1.0.0
|
{
"mainTemplate": {
"item": {
"type": "AlexaFooter",
"hintText": "Hint Text"
}
}
}
textToHintトランスフォーマーを使用する
正しいウェイクワードをヒント文字列に自動的に追加するには、textToHintトランスフォーマーを使用します。これにより、「アレクサ」や「エコー」などのあらかじめ設定されたウェイクワードがデバイスに表示されます。デバイスに応じたウェイクワードを選択できるので、ヒントに「アレクサ」という語をハードコーディングしないでください。
このデータソースは、トランスフォーマーを構成します。
オーサリングツールでAPLサンプルをテストする方法については、オーサリングツールでAPLサンプルをテストするを参照してください。
{
"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を表示します。
オーサリングツールでAPLサンプルをテストする方法については、オーサリングツールでAPLサンプルをテストするを参照してください。
{
"type": "APL",
"version": "1.8",
"import": [
{
"name": "alexa-layouts",
"version": "1.4.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}"
}
]
}
]
}
}
デバイスで設定したウェイクワードをヒントに表示
textToHintの使い方については、コンテンツを背景、境界線、ヘッダーと結合するのヒントにデバイスのウェイクワードを使用するを参照してください。
トランスフォーマーについて詳しくは、トランスフォーマーを参照してください。