Footer
Footerレスポンシブ対応コンポーネント（AlexaFooter）は、画面下部にヒントを表示します。ヒントは、ほかの発話をユーザーに提案することを目的にしています。textToHintトランスフォーマーを使用すると、デバイスに設定されているウェイクワードが自動的に表示されます。
alexa-layoutsパッケージを読み込む
AlexaFooterを使用するには、alexa-layoutsパッケージを読み込みます。
alexa-layoutsパッケージの最新バージョンは1.1.0です。AlexaFooterはバージョン1.0.0で導入されました。
このページの上部にあるその他のバージョンオプションをクリックすると、別のバージョンのAlexaFooterドキュメントが表示されます。各パラメーターが追加されたalexa-layoutsのバージョンを、パラメーターの表に示します。
AlexaFooterのパラメーター
type以外のパラメーターはすべてオプションです。
| 名前 | 型 | デフォルト | 説明 | 追加されたバージョン |
|---|---|---|---|---|
|
|
文字列 |
なし |
Footerに表示するヒントテキストです。正しいウェイクワードをヒントに追加するには、 |
1.0.0 |
|
|
文字列 |
dark |
指定したテーマ（lightまたはdark）に応じて色が切り替わります。デフォルトのテーマはdarkです。 |
1.1.0 |
|
|
文字列 |
なし |
常に |
1.0.0 |
AlexaFooterの例
{
"mainTemplate": {
"item": {
"type": "AlexaFooter",
"hintText": "Hint Text"
}
}
}
textToHintトランスフォーマーを使用する
正しいウェイクワードをヒント文字列に自動的に追加するには、textToHintトランスフォーマーを使用します。これにより、「アレクサ」や「エコー」などのあらかじめ設定されたウェイクワードがデバイスに表示されます。デバイスに応じたウェイクワードを選択できるので、ヒントに「アレクサ」という語をハードコーディングしないでください。
トランスフォーマーを使用するには、データソースのpropertiesオブジェクト内にヒントテキストを配置します。textToHintトランスフォーマーを、テキストを含むプロパティを指すinputPathと一緒にtransformers配列に含めます。
次の例では、ヒントテキスト（「このスキルを使って何かほかのことをして」）はfooterExampleData.properties.hintTextに格納されています。テキストはfooterExampleData.properties内にあると想定されているため、inputPathはhintTextという名前のプロパティを参照するだけです。
{
"footerExampleData": {
"type": "object",
"objectId": "footerExampleData",
"description": "このデータソースには、フッターのヒント例が含まれています。",
"properties": {
"hintText": "このスキルを使って何かほかのことをして"
},
"transformers": [
{
"inputPath": "hintText",
"transformer": "textToHint"
}
]
}
}
次に、AlexaFooterレイアウトをドキュメントに追加するときに、データソースのヒントテキストが格納されたプロパティに、コンポーネントのhintTextプロパティをバインドします。この例では、ドキュメントのFooterを表示する場所（コンテンツの残りの部分を表示するContainerの最後など）にAlexaFooterコンポーネントを配置します。
{
"type": "AlexaFooter",
"hintText": "${payload.footerExampleData.properties.hintText}"
}
デフォルトの「アレクサ」というウェイクワードを使用するデバイスには、次のヒントが表示されます。
「アレクサ、このスキルを使って何かほかのことをして」と言ってみてください
ウェイクワードが「エコー」に設定されたデバイスには、次のヒントが表示されます。
「エコー、このスキルを使って何かほかのことをして」と言ってみてください
textToHintの結果を確認してください。トランスフォーマーについて詳しくは、トランスフォーマーを参照してください。
