Detail
Alexa Detailテンプレート(AlexaDetail)は、人物、場所、物などのエンティティに関する情報を提供するテキストと画像を表示します。AlexaDetailには4つのバリエーションがあります。 一般、映画・テレビ、場所、レシピです。AlexaDetailは、音声による短い概要の付いた長い形式の構造化コンテンツに使用します。
これは全画面テンプレートで、ヘッダーと背景を含めることができます。
互換性
AlexaDetailは、alexa-viewport-profilesパッケージのすべての標準Viewportプロファイルで動作するように設計されています。次のプロファイルに対応しています。
- すべての円形デバイスプロファイル
- すべての横長デバイスプロファイル
- すべての縦長デバイスプロファイル
- すべてのモバイルプロファイル
- すべてのテレビプロファイル
サポートされていないViewportでAlexaDetailを使用すると、予期しない結果になることがあります。Viewportプロファイルの詳細については、Viewportプロファイルを参照してください。
alexa-layoutsパッケージをインポートする
AlexaDetailを使用するには、alexa-layoutsパッケージをインポートします。
alexa-layoutsパッケージの最新バージョンは1.7.0です。AlexaDetailはバージョン1.2.0で導入されました。
AlexaDetailのパラメーター
type以外のパラメーターはすべてオプションです。AlexaDetailには、異なるタイプのコンテンツに対応する複数のレイアウトが用意されています。すべてのプロパティが異なるレイアウトのすべてに適用されるわけではありません。それぞれのレイアウトの詳細については、AlexaDetailのコンテンツタイプとレイアウトを参照してください。
| 名前 | 型 | デフォルト | 説明 | ウィジェットのサポート | 追加されたバージョン | 
|---|---|---|---|---|---|
| 
 | 文字列 | 
 | 背景画像または背景ビデオの配置を指定します。デフォルトはcenterです。 | サポートされません | 1.2.0 | 
| 
 | ブール値 | 
 | 
 | サポートされません | 1.2.0 | 
| 
 | — | 背景色として使用する色です。 | サポートされません | 1.2.0 | |
| 
 | ブール値 | 
 | 
 | サポートされません | 1.2.0 | 
| 
 | 文字列 | — | 背景画像ソースのURLです。 | サポートされません | 1.2.0 | 
| 
 | ブール値 | 
 | 
 | サポートされません | 1.2.0 | 
| 
 | ブール値 | 
 | 
 | サポートされません | 1.2.0 | 
| 
 | 文字列 | 
 | 背景画像または背景ビデオのサイズを調整する方法を指定します。デフォルトは | サポートされません | 1.2.0 | 
| 
 | 文字列 | 
 | ビデオを再生する際に流すオーディオトラックです。指定できる値は、 | サポートされません | 1.2.0 | 
| 
 | ブール値 | 
 | 
 | サポートされません | 1.2.0 | 
| 
 | — | 背景ビデオのソースです。Videoコンポーネントの | サポートされません | 1.2.0 | |
| 
 | 文字列 | — | 表示するメインの本文テキストです。レイアウト全体がスクロールするため、長い本文テキストを設定できます。 | サポートされません | 1.2.0 | 
| 
 | 文字列 | 
 | ボタン1を説明する文字列です。ユーザーがボタンを押したときに、この文字列が読み上げられます。 | サポートされません | 1.2.0 | 
| 
 | — | ユーザーがボタン1を選択したときにトリガーするアクションです。 | サポートされません | 1.2.0 | |
| 
 | 文字列 | 
 | ボタン1に使用されるスタイルです。 | サポートされません | 1.2.0 | 
| 
 | 文字列 | — | ボタン1上に表示するテキストを指定します。テキストはボタンの目的を示す必要があります。このプロパティを設定しない場合、レイアウトからボタン1が削除されます。 | サポートされません | 1.2.0 | 
| 
 | 文字列 | 
 | ボタン1に使用する色のテーマを指定します。 | サポートされません | 1.2.0 | 
| 
 | 文字列 | 
 | ボタン2を説明する文字列です。ユーザーがボタンを押したときに、この文字列が読み上げられます。 | サポートされません | 1.2.0 | 
| 
 | — | ユーザーがボタン2を選択したときにトリガーするアクションです。 | サポートされません | 1.2.0 | |
| 
 | 文字列 | 
 | ボタン2に使用されるスタイルです。 | サポートされません | 1.2.0 | 
| 
 | 文字列 | — | ボタン2上に表示するテキストを指定します。テキストはボタンの目的を示す必要があります。このプロパティを設定しない場合、レイアウトからボタン2が削除されます。 | サポートされません | 1.2.0 | 
| 
 | 文字列 | 
 | ボタン2に使用する色のテーマを指定します。 | サポートされません | 1.2.0 | 
| 
 | 文字列 | 
 | Viewportの幅いっぱいに画像を配置して画像とコンテンツを並べて表示するかどうかを決定します。 | サポートされません | 1.2.0 | 
| 
 | 文字列 | 
 | 表示するレイアウトの種類を指定します。設定できる値は、 | サポートされません | 1.2.0 | 
| 
 | 任意 | 
 | 「空」の評価スロット(中が空の星など)を表すグラフィックです。 | サポートされません | 1.2.0 | 
| 
 | 配列 | — | このテンプレートにバインドするentityデータの配列です。 | サポートされません | 1.2.0 | 
| 
 | 文字列 | 
 | ユーザーが外部リンクボタンを選択すると、ボイスオーバーでこの文字列が読み上げられます。 | サポートされません | 1.6.0 | 
| 
 | — | ユーザーが外部リンクボタンを選択したときにトリガーするアクションです。 | サポートされません | 1.6.0 | |
| 
 | 文字列 | — | コンテンツブロックの外部リンクボタンに表示されるテキストです。 | サポートされません | 1.6.0 | 
| 
 | 文字列 | — | 外部リンクボタンに使用するカラーテーマです。 | サポートされません | 1.6.0 | 
| 
 | 任意 | 
 | 「満点」の評価スロット(完全な星など)を表すグラフィックです。 | サポートされません | 1.2.0 | 
| 
 | 任意 | 
 | 「半分」の評価スロット(半分の星など)を表すグラフィックです。 | サポートされません | 1.2.0 | 
| 
 | 文字列 | — | アトリビューションの画像ソースのURLです。 | サポートされません | 1.2.0 | 
| 
 | ブール値 | 
 | 
 | サポートされません | 1.2.0 | 
| 
 | 文字列 | — | ヘッダーで表示するアトリビューションのテキストです。 | サポートされません | 1.2.0 | 
| 
 | ブール値 | 
 | 
 | サポートされません | 1.2.0 | 
| 
 | 文字列 | 
 | スクリーンリーダーを使用するユーザーに、戻るボタンについて説明するアクセシビリティラベルです。 | サポートされません | 1.2.0 | 
| 
 | 
 | ユーザーが戻るボタンを選択したときに実行するコマンドです。 | サポートされません | 1.2.0 | |
| 
 | 文字列 | 
 | ヘッダーの背景色として使用するオプションの色の値です。 | サポートされません | 1.2.0 | 
| 
 | ブール値 | 
 | 
 | サポートされません | 1.2.0 | 
| 
 | 文字列 | — | ヘッダーに表示する第2テキストです。 | サポートされません | 1.2.0 | 
| 
 | 文字列 | — | ヘッダーに表示する第1テキストです。 | サポートされません | 1.2.0 | 
| 
 | 文字列 | — | 画像を説明する文字列です。ユーザーがこのコンポーネントを選択すると、ボイスオーバーでこの文字列が読み上げられます。 | サポートされません | 1.7.0 | 
| 
 | 文字列 | 
 | バウンディングボックス内での画像の位置を設定する方法を決定します。画像がバウンディングボックスより小さい場合に使用されます。オプションは、bottom、bottom-left、bottom-right、center、left、right、top、top-left、top-rightです。画像の配置の詳細については、 | サポートされません | 1.2.0 | 
| 
 | 文字列 | 
 | 画像バウンディングボックスに使用するアスペクト比です。画像の幅は、アスペクト比に基づいた規格のデフォルト値に設定されます。オプションは、square、round、standard_landscape、standard_portrait、poster_landscape、poster_portrait、widescreenです。 | サポートされません | 1.2.0 | 
| 
 | ブール値 | 
 | 
 | サポートされません | 1.2.0 | 
| 
 | 文字列 | — | 画像の下に表示される、画像のタイトルまたは簡単な説明です。 | サポートされません | 1.2.0 | 
| 
 | — | 画像バウンディングボックスの高さです。画像は、この高さに収まるように | サポートされません | 1.2.0 | |
| 
 | ブール値 | 
 | 
 | サポートされません | 1.2.0 | 
| 
 | 文字列 | 
 | バウンディングボックス内に収まるように画像を拡大縮小する方法を決定します。オプションは、none、fill、best-fit、best-fill、best-fit-downのいずれかです。画像のスケーリングの詳細については、 | サポートされません | 1.2.0 | 
| 
 | ブール値 | 
 | 
 | サポートされません | 1.3.0 | 
| 
 | 文字列 | — | 表示する画像のURIです。 | サポートされません | 1.2.0 | 
| 
 | 任意 | — | 
 | サポートされません | 1.2.0 | 
| 
 | ブール値 | 
 | 
 | サポートされません | 1.2.0 | 
| 
 | 文字列 | — | 
 | サポートされません | 1.2.0 | 
| 
 | 文字列 | 
 | テンプレートに表示されるテキストの言語です。この言語によって、テキストに使用されるデフォルトのフォントが決まります。たとえば、 | サポートされません | 1.4.0 | 
| 
 | 文字列 | 
 | コンテンツのレイアウト方向を指定します。このプロパティは、 | サポートされません | 1.4.0 | 
| 
 | 文字列 | — | 
 | サポートされません | 1.2.0 | 
| 
 | 文字列 | — | コンテンツ領域に表示する第1テキストです。 | サポートされません | 1.2.0 | 
| 
 | 文字列 | — | 
 | サポートされません | 1.2.0 | 
| 
 | 文字列 | 
 | 評価に使用するグラフィックのタイプです。 | サポートされません | 1.2.0 | 
| 
 | 数値 | — | 0~5の数値の評価です。 | サポートされません | 1.2.0 | 
| 
 | 文字列 | 
 | 評価用の1つのグラフィックアセットを表示するか、複数の画像アセットから評価度を構成するかを決定します。 | サポートされません | 1.2.0 | 
| 
 | 
 | 評価スロット間に使用するパディングです。 | サポートされません | 1.2.0 | |
| 
 | 文字列 | — | 評価の横に表示するテキストです。 | サポートされません | 1.2.0 | 
| 
 | 文字列 | — | コンテンツの表示に使用する | サポートされません | 1.2.0 | 
| 
 | 文字列 | — | コンテンツ領域に表示する第2テキストです。 | サポートされません | 1.2.0 | 
| 
 | 任意 | — | 評価を表すために表示するグラフィックです。 | サポートされません | 1.2.0 | 
| 
 | — | 評価を表す1つのグラフィックのバウンディングボックスの幅です。 | サポートされません | 1.2.0 | |
| 
 | 文字列 | — | 
 | サポートされません | 1.2.0 | 
| 
 | 文字列 | 
 | 色のテーマをダークまたはライトに設定します。テーマを選択することでコンポーネントの色を制御します。 | サポートされません | 1.2.0 | 
| 
 | 文字列 | — | 常に | サポートされません | 1.2.0 | 
AlexaDetailのコンテンツタイプとレイアウト
AlexaDetailには4つのレイアウトがあり、異なるタイプのコンテンツを表示できます。一方に画像、もう一方にテキストコンテンツを表示する全体的なレイアウトは、これらのバリエーションに共通です。
目的のバリエーションを指定するには、detailTypeパラメーターを使用します。
一般
一般(generic)はデフォルトのレイアウトです。このバリエーションでは、Viewportの一方に画像を表示し、もう一方にテキストコンテンツセクションを表示します。最大2つのボタンを含めることもできます。

映画・テレビ
映画・テレビのバリエーション(moviesTV)では、genericと同じレイアウトに次のプロパティが追加されます。
- tertiaryTextと- quaternaryText- これらのプロパティは、標準の- secondaryTextの下に表示されるテキストを定義します。番組の長さやジャンルなどの情報に適しています。
- rating*- 評価に関するプロパティは、計算された星の数またはグラフィック形式のカスタム評価を表示するために使用されます。指定した場合、評価は- tertiaryTextと同じ行に表示されます。評価を表すプロパティの動作の詳細については、- AlexaRatingを参照してください。
以下は、moviesTVに固有のプロパティの使用例を示しています。
- tertiaryTextプロパティには番組の長さが含まれています。
- quaternaryTextプロパティが設定されています。
- ratingのプロパティは、カスタムの「PG」レーティングのグラフィックを表示するように設定されています。

場所
場所のバリエーション(location)では、genericと同じレイアウトに次のプロパティが追加されます。
- locationText- 場所を表示するテキストを定義します。これを使って、場所の名前や住所を表します。指定した場合、この場所は、- primaryTextと評価の後、- secondaryTextの前に表示されます。
- rating*- 評価に関するプロパティは、計算された星の数またはグラフィック形式のカスタム評価を表示するために使用されます。指定した場合、評価は- primaryTextの直後に表示されます。評価を表すプロパティの動作の詳細については、- AlexaRatingを参照してください。
以下は、locationに固有のプロパティの使用例を示しています。
- locationTextプロパティには、1行のテキストが含まれています。
- ratingのプロパティは、- ratingNumberプロパティに指定した数値を星評価として表示するように設定されています。
この例では、button1Textとbutton2Textのどちらも設定しなかった場合にボタンの行全体が非表示になる様子も確認できます。

レシピ
レシピのバリエーション(recipe)では、genericと同じレイアウトに次のプロパティが追加されます。
- rating*- 評価に関するプロパティは、計算された星の数またはグラフィック形式のカスタム評価を表示するために使用されます。指定した場合、評価は- primaryTextの直後に表示されます。評価を表すプロパティの動作の詳細については、- AlexaRatingを参照してください。
- ingredientsText- 材料の一覧の前に表示する見出しです。
- ingredientsHideDivider- trueの場合、材料の一覧で各材料の間に区切り線を表示しません。
- ingredientListItems- 材料の一覧として表示する項目の配列です。各項目には、- ingredientsContentTextプロパティと- ingredientsPrimaryActionプロパティが含まれています。
recipeバリエーションでは、bodyTextプロパティは使用されません。
以下は、recipeに固有のプロパティの使用例を示しています。
- ingredientsText、- ingredientsHideDivider、- ingredientListItemsの各プロパティがすべて設定されています。
- ratingのプロパティは、- ratingNumberプロパティに指定した数値を星評価として表示するように設定されています。

AlexaDetailの例
以下は、AlexaDetailを使用するドキュメントとデータソースの完全な例です。この例では、genericバリエーションが使用されています。
関連トピック
最終更新日: 2025 年 09 月 30 日