Footer



Footerレスポンシブ対応コンポーネント（AlexaFooter）は、画面下部にヒントを表示します。ヒントは、ほかの発話をユーザーに提案することを目的にしています。textToHintトランスフォーマーを使用すると、デバイスに設定されているウェイクワードが自動的に表示されます。

• alexa-layoutsパッケージを読み込む
• AlexaFooterのパラメーター
• AlexaFooterの例
• textToHintトランスフォーマーを使用する
• 関連トピック

alexa-layoutsパッケージを読み込む

AlexaFooterを使用するには、alexa-layoutsパッケージを読み込みます。

alexa-layoutsパッケージの最新バージョンは1.1.0です。AlexaFooterはバージョン1.0.0で導入されました。

このページの上部にあるその他のバージョンオプションをクリックすると、別のバージョンのAlexaFooterドキュメントが表示されます。各パラメーターが追加されたalexa-layoutsのバージョンを、パラメーターの表に示します。

AlexaFooterのパラメーター

type以外のパラメーターはすべてオプションです。

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}"
}   

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

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

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

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

トランスフォーマーについて詳しくは、トランスフォーマーを参照してください。

関連トピック

• Alexaデザインシステムの概要
• レスポンシブ対応コンポーネントとテンプレート
• Alexa Headerレイアウト