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
の結果を確認してください。トランスフォーマーについて詳しくは、トランスフォーマーを参照してください。