Detail

---

AlexaのDetailテンプレート（AlexaDetail）は、テキストや画像を表示して人物、場所、ものなどのエンティティに関する情報を表します。AlexaDetailには、4つのバリエーションがあります。 一般、映画・テレビ、場所、レシピです。AlexaDetailは、短い音声のあらすじの付いた長い形式の構造化コンテンツに使用します。

このテンプレートは全画面対応のため、ヘッダー、フッター、背景を含めることができます。

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

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

alexa-layoutsパッケージの最新バージョンは1.4.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	文字列	なし	ボタン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	文字列	なし	ボタン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
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	文字列	なし	スクリーンリーダーを使用するユーザーに、戻るボタンについて説明するアクセシビリティラベルです。	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
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	文字列	none	表示する画像のURLです。	1.2.0
ingredientListItems	任意	[]	detailTypeがrecipeの場合に適用されます。レシピの材料をリスト形式で表示するオブジェクトの配列です。各オブジェクトには、次の2つのプロパティがあります。 ingredientsContentText – 表示するテキストが含まれます。 ingredientsPrimaryAction – ユーザーが材料の項目を選択したときに実行されるcommandです。 レシピを参照してください。	1.2.0
ingredientsHideDivider	ブール値	false	trueに設定すると、各材料項目の間の区切り線を非表示にします。	1.2.0
ingredientsText	文字列	なし	detailTypeがrecipeの場合に適用されます。材料のリストの前に表示する見出しです。レシピを参照してください。	1.2.0
lang	文字列	""	テンプレートに表示されるテキストの言語です。この言語によって、テキストに使用されるデフォルトのフォントが決まります。たとえば、ar-SAを設定すると、コンポーネントはデバイスで利用できる場合にアラビア語のフォントを使用します。BCP-47文字列に設定します。 レスポンシブ対応コンポーネントの言語固有フォントについて詳しくは、Language-specific fonts in the components and templatesを参照してください。	1.4.0
layoutDirection	文字列	LTR	コンテンツのレイアウト方向を指定します。このプロパティをLTR（左から右）、RTL（右から左）のいずれかに設定します。このプロパティは、コンポーネントの親コンテナからlayoutDirectionを継承しません。このため、必要に応じて明示的にこのプロパティを設定してください。 レスポンシブ対応コンポーネントでの右から左に記述する言語のサポートについて詳しくは、Support for Right-to-left Languagesを参照してください。	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プロパティに1つのグラフィックアセットを指定します。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	文字列	none	コンテンツの表示に使用する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* – ratingプロパティは、計算された星の数、グラフィック形式のカスタム評価のいずれかを表示できます。指定した場合、評価はtertiaryTextと同じ行に表示されます。ratingプロパティのしくみについて詳しくは、AlexaRatingを参照してください。

以下は、moviesTV固有のプロパティの例です。

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

AlexaDetail：moviesTVバリエーション

場所

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

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

以下は、location固有のプロパティの例です。

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

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

AlexaDetail： locationバリエーション

レシピ

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

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

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

以下は、recipe固有のプロパティの例です。

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

AlexaDetail： recipeバリエーション

AlexaDetailの例

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

サンプルドキュメント： AlexaDetail

データソース： AlexaDetail

関連トピック

• APL向けAlexa Design System
• レスポンシブ対応コンポーネントとテンプレート

---

---

最終更新日: 2021 年 10 月 12 日