Footer



Footer

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

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

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

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

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

AlexaFooterのパラメーター

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

AlexaFooterの例

{
  "mainTemplate": {
    "item": {
      "type": "AlexaFooter",
      "hintText": "Hint Text"
    }
  }
}

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

正しいウェイクワードをヒント文字列に自動的に追加するには、textToHintトランスフォーマーを使用します。これにより、「アレクサ」や「エコー」などのあらかじめ設定されたウェイクワードがデバイスに表示されます。デバイスに応じたウェイクワードを選択できるので、ヒントに「アレクサ」という語をハードコーディングしないでください。

このデータソースは、トランスフォーマーを構成します。

このドキュメントにはAlexaFooterが含まれており、トランスフォーマーを使用してhintTextを表示します。

デバイスで設定したウェイクワードをヒントに表示
デバイスで設定したウェイクワードをヒントに表示

textToHintの使い方については、コンテンツを背景、境界線、ヘッダーと結合するヒントにデバイスのウェイクワードを使用するを参照してください。

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