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のコンテンツタイプとレイアウトを参照してください。

名前	型	デフォルト	説明	ウィジェットのサポート	追加されたバージョン
backgroundAlign	文字列	center	背景画像または背景ビデオの配置を指定します。デフォルトはcenterです。	サポートされません	1.2.0
backgroundBlur	ブール値	false	trueの場合、指定された背景画像にぼかしを入れて表示します。backgroundImageSourceに値が指定された場合にのみ適用されます。デフォルトはfalseです。	サポートされません	1.2.0
backgroundColor	色	—	背景色として使用する色です。backgroundImageSourceとbackgroundVideoSourceのいずれにも値が含まれない場合に使用します。	サポートされません	1.2.0
backgroundColorOverlay	ブール値	false	trueの場合、背景にレイヤーを適用して、画像やビデオ上のテキストを読みやすくします。	サポートされません	1.2.0
backgroundImageSource	文字列	—	背景画像ソースのURLです。backgroundVideoSourceを指定していない場合に使用します。	サポートされません	1.2.0
backgroundOverlayGradient	ブール値	false	trueの場合、背景にグラデーションを適用します。	サポートされません	1.2.0
backgroundOverlayNoise	ブール値	false	trueの場合、背景画像にノイズフィルターが適用されます。	サポートされません	1.2.0
backgroundScale	文字列	best-fill	背景画像または背景ビデオのサイズを調整する方法を指定します。デフォルトはbest-fillです。	サポートされません	1.2.0
backgroundVideoAudioTrack	文字列	foreground	ビデオを再生する際に流すオーディオトラックです。指定できる値は、foreground、background、noneのいずれかです。デフォルトはforegroundです。	サポートされません	1.2.0
backgroundVideoAutoPlay	ブール値	false	trueの場合、ドキュメントがデバイスに表示されるとビデオが自動的に再生されます。backgroundVideoSourceに値が指定された場合に適用します。デフォルトはfalseです。	サポートされません	1.2.0
backgroundVideoSource	ビデオソース	—	背景ビデオのソースです。Videoコンポーネントのsourceプロパティと同じ形式でソースを指定します。	サポートされません	1.2.0
bodyText	文字列	—	表示するメインの本文テキストです。レイアウト全体がスクロールするため、長い本文テキストを設定できます。detailTypeがrecipeの場合、このプロパティは無視されます。	サポートされません	1.2.0
button1AccessibilityLabel	文字列	button1Text	ボタン1を説明する文字列です。ユーザーがボタンを押したときに、この文字列が読み上げられます。	サポートされません	1.2.0
button1PrimaryAction	コマンド	—	ユーザーがボタン1を選択したときにトリガーするアクションです。	サポートされません	1.2.0
button1Style	文字列	contained	ボタン1に使用されるスタイルです。containedまたはoutlinedに設定します。オプションの詳細については、AlexaButtonのbuttonStyleプロパティを参照してください。	サポートされません	1.2.0
button1Text	文字列	—	ボタン1上に表示するテキストを指定します。テキストはボタンの目的を示す必要があります。このプロパティを設定しない場合、レイアウトからボタン1が削除されます。button1Textとbutton2Textの両方を省略すると、ボタンの行全体が削除されます。	サポートされません	1.2.0
button1Theme	文字列	dark	ボタン1に使用する色のテーマを指定します。lightまたはdarkに設定します。	サポートされません	1.2.0
button2AccessibilityLabel	文字列	button2Text	ボタン2を説明する文字列です。ユーザーがボタンを押したときに、この文字列が読み上げられます。	サポートされません	1.2.0
button2PrimaryAction	コマンド	—	ユーザーがボタン2を選択したときにトリガーするアクションです。	サポートされません	1.2.0
button2Style	文字列	contained	ボタン2に使用されるスタイルです。containedまたはoutlinedに設定します。オプションの詳細については、AlexaButtonのbuttonStyleプロパティを参照してください。	サポートされません	1.2.0
button2Text	文字列	—	ボタン2上に表示するテキストを指定します。テキストはボタンの目的を示す必要があります。このプロパティを設定しない場合、レイアウトからボタン2が削除されます。button1Textとbutton2Textの両方を省略すると、ボタンの行全体が削除されます。	サポートされません	1.2.0
button2Theme	文字列	dark	ボタン2に使用する色のテーマを指定します。lightまたはdarkに設定します。	サポートされません	1.2.0
detailImageAlignment	文字列	left	Viewportの幅いっぱいに画像を配置して画像とコンテンツを並べて表示するかどうかを決定します。startまたはendに設定します。AlexaDetailは、layoutDirectionの値に基づいて画像を配置します。下位互換性のために、このプロパティはleftまたはrightに設定することもできます。	サポートされません	1.2.0
detailType	文字列	generic	表示するレイアウトの種類を指定します。設定できる値は、generic、moviesTV、location、recipeのいずれかです。レイアウトの各種類については、AlexaDetailのコンテンツタイプとレイアウトを参照してください。	サポートされません	1.2.0
emptyRatingGraphic	任意	empty	「空」の評価スロット（中が空の星など）を表すグラフィックです。ratingSlotModeがmultipleの場合に使用されます。AVGへの参照または画像のURLを指定できます。 評価を表示するバリエーション（moviesTV、location、recipe）で使用されます。AlexaRatingのプロパティの使用方法については、AlexaRatingを参照してください。	サポートされません	1.2.0
entities	配列	—	このテンプレートにバインドするentityデータの配列です。	サポートされません	1.2.0
externalLinkButtonAccessibilityLabel	文字列	externalLinkButtonText	ユーザーが外部リンクボタンを選択すると、ボイスオーバーでこの文字列が読み上げられます。	サポートされません	1.6.0
externalLinkButtonPrimaryAction	コマンド	—	ユーザーが外部リンクボタンを選択したときにトリガーするアクションです。	サポートされません	1.6.0
externalLinkButtonText	文字列	—	コンテンツブロックの外部リンクボタンに表示されるテキストです。	サポートされません	1.6.0
externalLinkButtonTheme	文字列	—	外部リンクボタンに使用するカラーテーマです。lightまたはdarkに設定します。	サポートされません	1.6.0
fullRatingGraphic	任意	full	「満点」の評価スロット（完全な星など）を表すグラフィックです。ratingSlotModeがmultipleの場合に使用されます。AVGへの参照または画像のURLを指定できます。 評価を表示するバリエーション（moviesTV、location、recipe）で使用されます。AlexaRatingのプロパティの使用方法については、AlexaRatingを参照してください。	サポートされません	1.2.0
halfRatingGraphic	任意	half	「半分」の評価スロット（半分の星など）を表すグラフィックです。ratingSlotModeがmultipleの場合に使用されます。AVGへの参照または画像のURLを指定できます。 評価を表示するバリエーション（moviesTV、location、recipe）で使用されます。AlexaRatingのプロパティの使用方法については、AlexaRatingを参照してください。	サポートされません	1.2.0
headerAttributionImage	文字列	—	アトリビューションの画像ソースのURLです。headerAttributionPrimacyがtrueの場合、またはタイトル／サブタイトルとアトリビューションの両方を表示するデバイスの場合に表示されます。	サポートされません	1.2.0
headerAttributionPrimacy	ブール値	true	trueの場合、画面サイズの制約のために1つの要素しか表示されないデバイスでは、headerAttributionImageを表示します。falseの場合、headerTitleとheaderSubtitleを表示します。	サポートされません	1.2.0
headerAttributionText	文字列	—	ヘッダーで表示するアトリビューションのテキストです。headerAttributionImageに値が含まれず、かつheaderAttributionPrimacyがtrueの場合、またはデバイスがタイトル／サブタイトルとアトリビューションの両方を表示する場合に表示されます。	サポートされません	1.2.0
headerBackButton	ブール値	false	trueの場合、戻るボタンをヘッダーに表示します。	サポートされません	1.2.0
headerBackButtonAccessibilityLabel	文字列	Back	スクリーンリーダーを使用するユーザーに、戻るボタンについて説明するアクセシビリティラベルです。	サポートされません	1.2.0
headerBackButtonCommand	コマンド	{"type":"SendEvent","arguments":["goBack"]}	ユーザーが戻るボタンを選択したときに実行するコマンドです。	サポートされません	1.2.0
headerBackgroundColor	文字列	transparent	ヘッダーの背景色として使用するオプションの色の値です。	サポートされません	1.2.0
headerDivider	ブール値	false	trueの場合、ヘッダーの下に区切り線を表示してコンテンツと区別できるようにします。	サポートされません	1.2.0
headerSubtitle	文字列	—	ヘッダーに表示する第2テキストです。	サポートされません	1.2.0
headerTitle	文字列	—	ヘッダーに表示する第1テキストです。	サポートされません	1.2.0
imageAccessibilityLabel	文字列	—	画像を説明する文字列です。ユーザーがこのコンポーネントを選択すると、ボイスオーバーでこの文字列が読み上げられます。	サポートされません	1.7.0
imageAlignment	文字列	center	バウンディングボックス内での画像の位置を設定する方法を決定します。画像がバウンディングボックスより小さい場合に使用されます。オプションは、bottom、bottom-left、bottom-right、center、left、right、top、top-left、top-rightです。画像の配置の詳細については、AlexaImageのimageAlignmentプロパティを参照してください。	サポートされません	1.2.0
imageAspectRatio	文字列	square	画像バウンディングボックスに使用するアスペクト比です。画像の幅は、アスペクト比に基づいた規格のデフォルト値に設定されます。オプションは、square、round、standard_landscape、standard_portrait、poster_landscape、poster_portrait、widescreenです。 アスペクト比の詳細については、AlexaImageのimageAspectRatioプロパティを参照してください。ただし、AlexaDetailで画像の幅を指定することはできません。アスペクト比に基づいて画像サイズを計算するには、imageHeightを未設定のままにしてください。	サポートされません	1.2.0
imageBlurredBackground	ブール値	false	trueの場合、画像の背後にその画像のコピーをぼかして表示します。imageScaleがfillまたはbest-fillに設定されている場合は無視されます。このプロパティの詳細については、AlexaImageのimageBlurredBackgroundプロパティを参照してください。	サポートされません	1.2.0
imageCaption	文字列	—	画像の下に表示される、画像のタイトルまたは簡単な説明です。	サポートされません	1.2.0
imageHeight	ディメンション	—	画像バウンディングボックスの高さです。画像は、この高さに収まるようにimageScale設定を使用して拡大縮小されます。 imageHeightを設定しない場合、画像のバウンディングボックスはデフォルトの幅を使用し、選択されたimageAspectRatioに基づいて高さを計算します。 imageHeightを設定した場合、画像のバウンディングボックスは指定された高さと、選択されたimageAspectRatioに基づくデフォルトの幅を使用します。結果の画像は、指定されたimageAspectRatioとは一致しないことがあります。最良の結果を得るには、imageAspectRatioを目的の形状に設定し、imageHeightは未設定のままにします。	サポートされません	1.2.0
imageRoundedCorner	ブール値	true	trueの場合、画像の角を丸くします。	サポートされません	1.2.0
imageScale	文字列	best-fit	バウンディングボックス内に収まるように画像を拡大縮小する方法を決定します。オプションは、none、fill、best-fit、best-fill、best-fit-downのいずれかです。画像のスケーリングの詳細については、AlexaImageのimageScaleプロパティを参照してください。	サポートされません	1.2.0
imageShadow	ブール値	true	trueの場合、画像の背後にドロップシャドウを表示します。	サポートされません	1.3.0
imageSource	文字列	—	表示する画像のURIです。	サポートされません	1.2.0
ingredientListItems	任意	—	detailTypeがrecipeの場合に適用されます。レシピの材料をリスト形式で表示するオブジェクトの配列です。各オブジェクトには、次の2つのプロパティがあります。 ingredientsContentText - 表示するテキストを指定します。 ingredientsPrimaryAction - ユーザーが材料の項目を選択したときに実行するコマンドです。 レシピを参照してください。	サポートされません	1.2.0
ingredientsHideDivider	ブール値	false	trueの場合、各材料項目の間の区切り線を非表示にします。	サポートされません	1.2.0
ingredientsText	文字列	—	detailTypeがrecipeの場合に適用されます。材料のリストの前に表示する見出しです。レシピを参照してください。	サポートされません	1.2.0
lang	文字列	${environment.lang}	テンプレートに表示されるテキストの言語です。この言語によって、テキストに使用されるデフォルトのフォントが決まります。たとえば、ar-SAに設定すると、コンポーネントはデバイスでアラビア語フォントが利用可能であれば使用します。BCP-47文字列に設定します。 レスポンシブ対応コンポーネントの言語固有のフォントの詳細については、コンポーネントとテンプレートでの言語固有のフォントを参照してください。	サポートされません	1.4.0
layoutDirection	文字列	${environment.layoutDirection}	コンテンツのレイアウト方向を指定します。このプロパティは、LTR（左から右）またはRTL（右から左）に設定します。このプロパティには、コンポーネントの親コンテナーのlayoutDirectionは継承されません。このため、必要に応じて明示的にこのプロパティを設定してください。 レスポンシブ対応コンポーネントでの右から左に記述する言語のサポートの詳細については、右から左に記述する言語のサポートを参照してください。	サポートされません	1.4.0
locationText	文字列	—	detailTypeがlocationの場合に適用されます。primaryTextの後に表示するテキストです。場所の名前や住所を表します。場所を参照してください。	サポートされません	1.2.0
primaryText	文字列	—	コンテンツ領域に表示する第1テキストです。primaryTextは大きいフォントで表示され、タイトルを表します。	サポートされません	1.2.0
quaternaryText	文字列	—	detailTypeがmoviesTVの場合に適用されます。コンテンツブロック内に表示する4番目のテキストブロックです。映画や番組の長さや項目に関するその他の詳細を表示するのに便利です。映画・テレビを参照してください。	サポートされません	1.2.0
ratingGraphicType	文字列	AVG	評価に使用するグラフィックのタイプです。AVGまたはimageに設定します。 評価を表示するバリエーション（moviesTV、location、recipe）で使用されます。AlexaRatingのプロパティの使用方法については、AlexaRatingを参照してください。	サポートされません	1.2.0
ratingNumber	数値	—	0～5の数値の評価です。ratingSlotModeがmultipleの場合に使用されます。 評価を表示するバリエーション（moviesTV、location、recipe）で使用されます。AlexaRatingのプロパティの使用方法については、AlexaRatingを参照してください。	サポートされません	1.2.0
ratingSlotMode	文字列	multiple	評価用の1つのグラフィックアセットを表示するか、複数の画像アセットから評価度を構成するかを決定します。singleに設定した場合は、singleRatingGraphicプロパティに単一のグラフィックアセットを指定します。multipleの場合は、ratingNumberに数値の評価を指定します。 評価を表示するバリエーション（moviesTV、location、recipe）で使用されます。AlexaRatingのプロパティの使用方法については、AlexaRatingを参照してください。	サポートされません	1.2.0
ratingSlotPadding	ディメンション	3dp	評価スロット間に使用するパディングです。ratingSlotModeがmultipleの場合に使用されます。0dpから4dpの範囲内です。 評価を表示するバリエーション（moviesTV、location、recipe）で使用されます。AlexaRatingのプロパティの使用方法については、AlexaRatingを参照してください。	サポートされません	1.2.0
ratingText	文字列	—	評価の横に表示するテキストです。 評価を表示するバリエーション（moviesTV、location、recipe）で使用されます。AlexaRatingのプロパティの使用方法については、AlexaRatingを参照してください。	サポートされません	1.2.0
scrollViewId	文字列	—	コンテンツの表示に使用するScrollViewのコンポーネントIDです。このプロパティは、コマンドでコンポーネントを指定する必要があるときに設定します。	サポートされません	1.2.0
secondaryText	文字列	—	コンテンツ領域に表示する第2テキストです。primaryTextの後に表示されます。	サポートされません	1.2.0
singleRatingGraphic	任意	—	評価を表すために表示するグラフィックです。ratingSlotModeがsingleの場合に使用されます。AVGへの参照または画像のURLを指定できます。 評価を表示するバリエーション（moviesTV、location、recipe）で使用されます。AlexaRatingのプロパティの使用方法については、AlexaRatingを参照してください。	サポートされません	1.2.0
singleRatingGraphicWidth	ディメンション	—	評価を表す1つのグラフィックのバウンディングボックスの幅です。ratingSlotModeがsingleの場合に使用されます。 評価を表示するバリエーション（moviesTV、location、recipe）で使用されます。AlexaRatingのプロパティの使用方法については、AlexaRatingを参照してください。	サポートされません	1.2.0
tertiaryText	文字列	—	detailTypeがmoviesTVの場合に適用されます。コンテンツブロック内に表示する3番目のテキストブロックです。映画や番組の長さや項目に関するその他の詳細を表示するのに便利です。映画・テレビを参照してください。	サポートされません	1.2.0
theme	文字列	dark	色のテーマをダークまたはライトに設定します。テーマを選択することでコンポーネントの色を制御します。	サポートされません	1.2.0
type	文字列	—	常にAlexaDetailに設定されます。	サポートされません	1.2.0

AlexaDetailのコンテンツタイプとレイアウト

AlexaDetailには4つのレイアウトがあり、異なるタイプのコンテンツを表示できます。一方に画像、もう一方にテキストコンテンツを表示する全体的なレイアウトは、これらのバリエーションに共通です。

目的のバリエーションを指定するには、detailTypeパラメーターを使用します。

• 一般
• 映画・テレビ
• 場所
• レシピ

一般

一般（generic）はデフォルトのレイアウトです。このバリエーションでは、Viewportの一方に画像を表示し、もう一方にテキストコンテンツセクションを表示します。最大2つのボタンを含めることもできます。

AlexaDetail：genericバリエーション  

映画・テレビ

映画・テレビのバリエーション（moviesTV）では、genericと同じレイアウトに次のプロパティが追加されます。

• tertiaryTextとquaternaryText - これらのプロパティは、標準のsecondaryTextの下に表示されるテキストを定義します。番組の長さやジャンルなどの情報に適しています。
• rating* - 評価に関するプロパティは、計算された星の数またはグラフィック形式のカスタム評価を表示するために使用されます。指定した場合、評価はtertiaryTextと同じ行に表示されます。評価を表すプロパティの動作の詳細については、AlexaRatingを参照してください。

以下は、moviesTVに固有のプロパティの使用例を示しています。

• tertiaryTextプロパティには番組の長さが含まれています。
• quaternaryTextプロパティが設定されています。
• ratingのプロパティは、カスタムの「PG」レーティングのグラフィックを表示するように設定されています。

AlexaDetail：moviesTVバリエーション  

場所

場所のバリエーション（location）では、genericと同じレイアウトに次のプロパティが追加されます。

• locationText - 場所を表示するテキストを定義します。これを使って、場所の名前や住所を表します。指定した場合、この場所は、primaryTextと評価の後、secondaryTextの前に表示されます。
• rating* - 評価に関するプロパティは、計算された星の数またはグラフィック形式のカスタム評価を表示するために使用されます。指定した場合、評価はprimaryTextの直後に表示されます。評価を表すプロパティの動作の詳細については、AlexaRatingを参照してください。

以下は、locationに固有のプロパティの使用例を示しています。

• locationTextプロパティには、1行のテキストが含まれています。
• ratingのプロパティは、ratingNumberプロパティに指定した数値を星評価として表示するように設定されています。

この例では、button1Textとbutton2Textのどちらも設定しなかった場合にボタンの行全体が非表示になる様子も確認できます。

AlexaDetail： locationバリエーション  

レシピ

レシピのバリエーション（recipe）では、genericと同じレイアウトに次のプロパティが追加されます。

• rating* - 評価に関するプロパティは、計算された星の数またはグラフィック形式のカスタム評価を表示するために使用されます。指定した場合、評価はprimaryTextの直後に表示されます。評価を表すプロパティの動作の詳細については、AlexaRatingを参照してください。
• ingredientsText - 材料の一覧の前に表示する見出しです。
• ingredientsHideDivider - trueの場合、材料の一覧で各材料の間に区切り線を表示しません。
• ingredientListItems - 材料の一覧として表示する項目の配列です。各項目には、ingredientsContentTextプロパティとingredientsPrimaryActionプロパティが含まれています。

recipeバリエーションでは、bodyTextプロパティは使用されません。

以下は、recipeに固有のプロパティの使用例を示しています。

• ingredientsText、ingredientsHideDivider、ingredientListItemsの各プロパティがすべて設定されています。
• ratingのプロパティは、ratingNumberプロパティに指定した数値を星評価として表示するように設定されています。

AlexaDetail： recipeバリエーション  

AlexaDetailの例

以下は、AlexaDetailを使用するドキュメントとデータソースの完全な例です。この例では、genericバリエーションが使用されています。

---

関連トピック

• APL向けAlexa Design System
• レスポンシブ対応コンポーネントとテンプレート
• Alexaデザインガイド： レスポンシブ対応テンプレート

---

---

最終更新日: 2025 年 09 月 30 日