Detail



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

なし

背景色として使用する色です。backgroundImageSourcebackgroundVideoSourceのいずれにも値が含まれない場合に使用します。

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

ビデオを再生する際に流すオーディオトラックです。foregroundbackgroundnoneのいずれかを指定できます。デフォルトはforegroundです。

1.2.0

backgroundVideoAutoPlay

ブール値

false

trueの場合、ドキュメントがデバイスに表示されるとビデオが自動的に再生されます。backgroundVideoSourceに値が指定された場合に適用します。デフォルトはfalseです。

1.2.0

backgroundVideoSource

ビデオソース

なし

背景ビデオのソースです。Videoコンポーネントのsourceプロパティと同様の形式でソースを指定します。

1.2.0

bodyText

文字列

なし

表示するメインの本文テキストです。レイアウト全体がスクロールするため、本文テキストは長くなる可能性があります。detailTyperecipeの場合、このプロパティは無視されます。

1.2.0

button1AccessibilityLabel

文字列

なし

ボタン1を説明する文字列です。ユーザーがボタンを押したときに、この文字列が読み上げられます。

1.2.0

button1PrimaryAction

コマンド

なし

ユーザーがボタン1を選択したときに実行されるアクションです。

1.2.0

button1Style

文字列

contained

ボタン1に使用されるスタイルです。containedまたはoutlinedに設定します。オプションについての詳細は、AlexaButtonbuttonStyleプロパティを参照してください。

1.2.0

button1Text

文字列

なし

ボタン1上に表示するテキストを指定します。テキストはボタンの目的を示す必要があります。このプロパティを設定しない場合、レイアウトからボタン1が削除されます。button1Textbutton2Textの両方を省略すると、ボタンの行全体が削除されます。

1.2.0

button1Theme

文字列

dark

ボタン1に使用する色のテーマを指定します。lightdarkのいずれかに設定します。

1.2.0

button2AccessibilityLabel

文字列

なし

ボタン2を説明する文字列です。ユーザーがボタンを押したときに、この文字列が読み上げられます。

1.2.0

button2PrimaryAction

コマンド

なし

ユーザーがボタン2を選択したときに実行されるアクションです。

1.2.0

button2Style

文字列

contained

ボタン2に使用されるスタイルです。containedまたはoutlinedに設定します。オプションについての詳細は、AlexaButtonbuttonStyleプロパティを参照してください。

1.2.0

button2Text

文字列

なし

ボタン2上に表示するテキストを指定します。テキストはボタンの目的を示す必要があります。このプロパティを設定しない場合、レイアウトからボタン2が削除されます。button1Textbutton2Textの両方を省略すると、ボタンの行全体が削除されます。

1.2.0

button2Theme

文字列

dark

ボタン2に使用する色のテーマを指定します。lightdarkのいずれかに設定します。

1.2.0

detailImageAlignment

文字列

left

Viewportの幅いっぱいに画像を配置して画像とコンテンツを並べて表示するかどうかを決定します。startendのいずれかに設定します。AlexaDetailは、layoutDirectionの値に基づいて画像を配置します。下位互換性を維持するため、このプロパティをleftrightのいずれかに設定することもできます。

1.2.0

detailType

文字列

generic

表示するレイアウトの種類を指定します。genericmoviesTVlocationrecipeのいずれかに設定します。レイアウトの各種類については、AlexaDetailのコンテンツタイプとレイアウトを参照してください。

1.2.0

emptyRatingGraphic

任意

empty

「空」のレーティングスロット(中が空の星など)を表すグラフィックです。ratingSlotModemultipleの場合に使用されます。AVGへの参照または画像のURLを指定できます。

評価を表示するバリエーション(moviesTVlocationrecipe)で使用します。AlexaRatingの使用方法については、AlexaRatingを参照してください。

1.2.0

entities

配列

[]

このテンプレートにバインドするentityデータの配列です。

1.2.0

fullRatingGraphic

任意

full

「満点」のレーティングスロット(完全な星など)を表すグラフィックです。ratingSlotModemultipleの場合に使用されます。AVGへの参照または画像のURLを指定できます。

評価を表示するバリエーション(moviesTVlocationrecipe)で使用します。AlexaRatingの使用方法については、AlexaRatingを参照してください。

1.2.0

halfRatingGraphic

任意

half

「半分」のレーティングスロット(半分の星など)を表すグラフィックです。ratingSlotModemultipleの場合に使用されます。AVGへの参照または画像のURLを指定できます。

評価を表示するバリエーション(moviesTVlocationrecipe)で使用します。AlexaRatingの使用方法については、AlexaRatingを参照してください。

1.2.0

headerAttributionImage

文字列

なし

アトリビューションの画像ソースのURLです。headerAttributionPrimacyがtrueの場合、またはタイトル/サブタイトルとアトリビューションの両方を表示するデバイスの場合に表示します。

1.2.0

headerAttributionPrimacy

ブール値

true

trueの場合、画面サイズの制約のため1つの要素だけを表示するデバイスにheaderAttributionImageを表示します。falseの場合、headerTitleheaderSubtitleを表示します。

1.2.0

headerAttributionText

文字列

なし

ヘッダーで表示するアトリビューションのテキストです。headerAttributionImageに値が含まれず、かつ、headerAttributionPrimacytrueの場合、またはデバイスがタイトル/サブタイトルとアトリビューションの両方を表示する場合に表示されます。

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です。画像の配置について詳しくは、AlexaImageimageAlignmentプロパティを参照してください。

1.2.0

imageAspectRatio

文字列

square

画像バウンディングボックスに使用するアスペクト比です。画像の幅は、アスペクト比に基づいた規格のデフォルト値に設定されます。オプションは、square、round、standard_landscape、standard_portrait、poster_landscape、poster_portrait、widescreenです。

アスペクト比の詳細については、AlexaImageimageAspectRatioプロパティを参照してください。ただし、AlexaDetailで画像の幅を指定することはできません。アスペクト比に基づく画像サイズを計算するには、imageHeightを設定しないでください。

1.2.0

imageBlurredBackground

ブール値

false

trueの場合、画像の背後にその画像のコピーをぼかして表示します。imageScalefillまたはbest-fillに設定されている場合は無視されます。このプロパティの詳細については、AlexaImageimageBlurredBackgroundプロパティを参照してください。

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のいずれかです。画像のスケーリングの詳細については、AlexaImageimageScaleプロパティを参照してください。

1.2.0

imageShadow

ブール値

true

trueの場合、画像の背後にドロップシャドウが表示されます。

1.3.0

imageSource

文字列

none

表示する画像のURLです。

1.2.0

ingredientListItems

任意

[]

detailTyperecipeの場合に適用されます。レシピの材料をリスト形式で表示するオブジェクトの配列です。各オブジェクトには、次の2つのプロパティがあります。

ingredientsContentText – 表示するテキストが含まれます。
ingredientsPrimaryAction – ユーザーが材料の項目を選択したときに実行されるcommandです。

レシピを参照してください。

1.2.0

ingredientsHideDivider

ブール値

false

trueに設定すると、各材料項目の間の区切り線を非表示にします。

1.2.0

ingredientsText

文字列

なし

detailTyperecipeの場合に適用されます。材料のリストの前に表示する見出しです。レシピを参照してください。

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

文字列

なし

detailTypelocationの場合に適用されます。primaryTextの後に表示され、場所の名前や住所を表すテキストです。場所を参照してください。

1.2.0

primaryText

文字列

なし

コンテンツ領域に表示する第1テキストです。primaryTextは、大きいフォントで表示されてタイトルを表します。

1.2.0

quaternaryText

文字列

なし

detailTypemoviesTVの場合に適用されます。コンテンツブロック内に表示する4番目のテキストブロックです。映画や番組の長さや項目に関するその他の詳細を表示するのに便利です。映画・テレビを参照してください。

1.2.0

ratingGraphicType

文字列

AVG

レーティングに使用するグラフィックのタイプです。AVGまたはimageに設定します。

評価を表示するバリエーション(moviesTVlocationrecipe)で使用します。AlexaRatingの使用方法については、AlexaRatingを参照してください。

1.2.0

ratingNumber

数値

なし

0~5の数値のレーティングです。ratingSlotModemultipleの場合に使用されます。

評価を表示するバリエーション(moviesTVlocationrecipe)で使用します。AlexaRatingの使用方法については、AlexaRatingを参照してください。

1.2.0

ratingSlotMode

文字列

multiple

レーティング用の1つのグラフィックアセットを表示するか、複数の画像アセットから評価度を構成するかを決定します。singleに設定した場合、singleRatingGraphicプロパティに1つのグラフィックアセットを指定します。multipleの場合は、ratingNumberで数値のレーティングを指定します。

評価を表示するバリエーション(moviesTVlocationrecipe)で使用します。AlexaRatingの使用方法については、AlexaRatingを参照してください。

1.2.0

ratingSlotPadding

ディメンション

3dp

レーティングスロット間に使用するパディングです。ratingSlotModemultipleの場合に使用されます。0dpから4dpの範囲内です。

評価を表示するバリエーション(moviesTVlocationrecipe)で使用します。AlexaRatingの使用方法については、AlexaRatingを参照してください。

1.2.0

ratingText

文字列

なし

レーティングの横に表示するテキストです。

評価を表示するバリエーション(moviesTVlocationrecipe)で使用します。AlexaRatingの使用方法については、AlexaRatingを参照してください。

1.2.0

scrollViewId

文字列

none

コンテンツの表示に使用するScrollViewのコンポーネントIDです。このプロパティは、コマンドでコンポーネントを指定する必要があるときに設定します。

1.2.0

secondaryText

文字列

なし

コンテンツ領域に表示する第2テキストです。primaryTextの後に表示されます。

1.2.0

singleRatingGraphic

任意

なし

レーティングを表すために表示するグラフィックです。ratingSlotModesingleの場合に使用されます。AVGへの参照または画像のURLを指定できます。

評価を表示するバリエーション(moviesTVlocationrecipe)で使用します。AlexaRatingの使用方法については、AlexaRatingを参照してください。

1.2.0

singleRatingGraphicWidth

ディメンション

なし

レーティングを表す1つのグラフィックのバウンディングボックスの幅です。ratingSlotModesingleの場合に使用されます。

評価を表示するバリエーション(moviesTVlocationrecipe)で使用します。AlexaRatingの使用方法については、AlexaRatingを参照してください。

1.2.0

tertiaryText

文字列

なし

detailTypemoviesTVの場合に適用されます。コンテンツブロック内に表示する3番目のテキストブロックです。映画や番組の長さや項目に関するその他の詳細を表示するのに便利です。映画・テレビを参照してください。

1.2.0

theme

文字列

dark

色のテーマをダークまたはライトに設定します。テーマを選択することでコンポーネントの色を制御します。

1.2.0

type

文字列

なし

常にAlexaDetailに設定されます。

1.2.0

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

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

detailTypeパラメーターを使ってバリエーションを指定します。

一般

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

AlexaDetail:genericバリエーション
AlexaDetail: genericバリエーション

映画・テレビ

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

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

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

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

AlexaDetail:moviesTVバリエーション
AlexaDetail:moviesTVバリエーション

場所

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

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

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

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

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

AlexaDetail:locationバリエーション
AlexaDetail:locationバリエーション

レシピ

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

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

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

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

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

AlexaDetail:recipeバリエーション
AlexaDetail:recipeバリエーション

AlexaDetailの例

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

AlexaDetailの例
AlexaDetailの例