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 日