Detail


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

背景色として使用する色です。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

文字列

button1Text

ボタン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に使用する色のテーマを指定します。lightまたはdarkに設定します。

サポートされません

1.2.0

button2AccessibilityLabel

文字列

button2Text

ボタン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に使用する色のテーマを指定します。lightまたはdarkに設定します。

サポートされません

1.2.0

detailImageAlignment

文字列

left

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

サポートされません

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

externalLinkButtonAccessibilityLabel

文字列

externalLinkButtonText

ユーザーが外部リンクボタンを選択すると、ボイスオーバーでこの文字列が読み上げられます。

サポートされません

1.6.0

externalLinkButtonPrimaryAction

コマンド

ユーザーが外部リンクボタンを選択したときにトリガーするアクションです。

サポートされません

1.6.0

externalLinkButtonText

文字列

コンテンツブロックの外部リンクボタンに表示されるテキストです。

サポートされません

1.6.0

externalLinkButtonTheme

文字列

外部リンクボタンに使用するカラーテーマです。lightまたはdarkに設定します。

サポートされません

1.6.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です。headerAttributionPrimacytrueの場合、またはタイトル/サブタイトルとアトリビューションの両方を表示するデバイスの場合に表示されます。

サポートされません

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

文字列

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です。画像の配置の詳細については、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

文字列

表示する画像のURIです。

サポートされません

1.2.0

ingredientListItems

任意

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

ingredientsContentText - 表示するテキストを指定します。
ingredientsPrimaryAction - ユーザーが材料の項目を選択したときに実行するコマンドです。

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

サポートされません

1.2.0

ingredientsHideDivider

ブール値

false

trueの場合、各材料項目の間の区切り線を非表示にします。

サポートされません

1.2.0

ingredientsText

文字列

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

サポートされません

1.2.0

lang

文字列

${environment.lang}

テンプレートに表示されるテキストの言語です。この言語によって、テキストに使用されるデフォルトのフォントが決まります。たとえば、ar-SAに設定すると、コンポーネントはデバイスでアラビア語フォントが利用可能であれば使用します。BCP-47文字列に設定します。

レスポンシブ対応コンポーネントの言語固有のフォントの詳細については、コンポーネントとテンプレートでの言語固有のフォントを参照してください。

サポートされません

1.4.0

layoutDirection

文字列

${environment.layoutDirection}

コンテンツのレイアウト方向を指定します。このプロパティは、LTR(左から右)またはRTL(右から左)に設定します。このプロパティには、コンポーネントの親コンテナーのlayoutDirectionは継承されません。このため、必要に応じて明示的にこのプロパティを設定してください。

レスポンシブ対応コンポーネントでの右から左に記述する言語のサポートの詳細については、右から左に記述する言語のサポートを参照してください。

サポートされません

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プロパティに単一のグラフィックアセットを指定します。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

文字列

コンテンツの表示に使用する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* - 評価に関するプロパティは、計算された星の数またはグラフィック形式のカスタム評価を表示するために使用されます。指定した場合、評価はtertiaryTextと同じ行に表示されます。評価を表すプロパティの動作の詳細については、AlexaRatingを参照してください。

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

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

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

場所

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

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

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

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

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

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

レシピ

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

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

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

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

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

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

AlexaDetailの例

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



このページは役に立ちましたか?

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