Image List Item

---

Alexa Image List Itemレスポンシブ対応コンポーネント（AlexaImageListItem）は、リスト内の項目として画像とテキストを表示します。このコンポーネントは、AlexaImageレスポンシブ対応コンポーネントを使用して項目のサイズと形式を設定します。AlexaImageListItem項目のリストを表示するには、AlexaImageListレスポンシブ対応テンプレートを使用します。

互換性

AlexaImageListItemは、alexa-viewport-profilesパッケージのすべての標準Viewportプロファイルで動作するように設計されています。次のプロファイルに対応しています。

• すべての円形デバイスプロファイル
• すべての横長デバイスプロファイル
• すべての縦長デバイスプロファイル
• すべてのモバイルプロファイル
• すべてのテレビプロファイル

サポートされていないViewportでAlexaImageListItemを使用すると、予期しない結果になることがあります。Viewportプロファイルの詳細については、Viewportプロファイルを参照してください。

alexa-layoutsパッケージをインポートする

AlexaImageListItemを使用するには、alexa-layoutsパッケージをインポートします。

alexa-layoutsパッケージの最新バージョンは1.7.0です。AlexaImageListItemはバージョン1.1.0で導入されました。

AlexaImageListItemパラメーター

type以外のパラメーターはすべてオプションです。

名前	型	デフォルト	説明	ウィジェットのサポート	追加されたバージョン
accessibilityLabel	文字列	"[ordinal] [imageAltText] [primaryText] [secondaryText] [tertiaryText/ratings]"	リスト項目を説明する文字列です。ユーザーが項目を選択すると、ボイスオーバーでこの文字列が読み上げられます。	サポートされません	1.4.0
contentDirection	文字列	column	画像とテキストのコンテンツの方向です。columnまたはrowに設定します。	サポートされません	1.4.0
defaultImageSource	文字列		imageSourceが指定されていない場合に使用するデフォルト画像のURIです。画像コンテナーが空にならないようにするには、defaultImageSourceを指定します。	サポートされません	1.1.0
emptyRatingGraphic	任意	empty	「空」の評価スロット（中が空の星など）を表すグラフィックです。ratingSlotModeがmultipleの場合に使用されます。AVGへの参照または画像のURLを指定できます。 小さいviewport上では、スペースの制約で評価が表示されません。 AlexaRatingのプロパティを使用する方法の詳細については、AlexaRatingを参照してください。	サポートされません	1.2.0
entities	配列	—	このコンポーネントにバインドするentityデータの配列です。	サポートされません	1.2.0
fullRatingGraphic	任意	full	「満点」の評価スロット（完全な星など）を表すグラフィックです。ratingSlotModeがmultipleの場合に使用されます。AVGへの参照または画像のURLを指定できます。 小さいviewport上では、スペースの制約で評価が表示されません。 AlexaRatingのプロパティを使用する方法の詳細については、AlexaRatingを参照してください。	サポートされません	1.2.0
halfRatingGraphic	任意	half	「半分」の評価スロット（半分の星など）を表すグラフィックです。ratingSlotModeがmultipleの場合に使用されます。AVGへの参照または画像のURLを指定できます。 小さいviewport上では、スペースの制約で評価が表示されません。 AlexaRatingのプロパティを使用する方法の詳細については、AlexaRatingを参照してください。	サポートされません	1.2.0
hasPlayIcon	ブール値	false	trueの場合、secondaryTextの前に「再生」アイコンが表示されます。	サポートされません	1.2.0
hideDivider	ブール値	true	各「水平方向の項目」の下／右に表示される、次のコンテンツと区別するための区切り線の非表示を切り替えます。デフォルトはtrueです。	サポートされません	1.6.0
hideOrdinal	ブール値	false	trueの場合、リスト項目の横に番号を表示しません。	サポートされません	1.1.0
imageAlignment	文字列	center	バウンディングボックス内での画像の位置を設定する方法を決定します。画像がバウンディングボックスより小さい場合に使用されます。オプションは、bottom、bottom-left、bottom-right、center、left、right、top、top-left、top-rightです。このプロパティは、AlexaImageレスポンシブ対応コンポーネントのimageAlignmentプロパティと同じように機能します。	サポートされません	1.1.0
imageAltText	文字列	—	画像の代替テキストです。ボイスオーバーはこの文字列を読み取ります。	サポートされません	1.4.0
imageAspectRatio	文字列	square	アイテムの画像バウンディングボックスに使用するアスペクト比です。オプションは、square、round、standard_landscape、standard_portrait、poster_landscape、poster_portrait、widescreenです。このプロパティは、AlexaImageレスポンシブ対応コンポーネントのimageAspectRatioプロパティと同じように機能します。ただし、バウンディングボックスの高さと幅はアスペクト比に基づいて事前に定義され、変更することはできません。	サポートされません	1.1.0
imageBlurredBackground	ブール値	false	trueの場合、画像の背後にその画像のコピーをぼかして表示します。imageScaleがfillまたはbest-fillに設定されている場合は無視されます。このプロパティは、AlexaImageレスポンシブ対応コンポーネントのimageBlurredBackgroundプロパティと同じように機能します。	サポートされません	1.1.0
imageHeight	ディメンション	—	画像のバウンディングボックスの高さです。画像は、この高さに収まるようにimageScale設定を使用して拡大縮小されます。 imageHeightを設定しない場合、画像のバウンディングボックスはデフォルトの幅を使用し、選択されたimageAspectRatioに基づいて高さを計算します。 imageHeightを設定した場合、画像のバウンディングボックスは指定された高さと、選択されたimageAspectRatioに基づくデフォルトの幅を使用します。結果の画像は、指定されたimageAspectRatioとは一致しないことがあります。最良の結果を得るには、imageAspectRatioを目的の形状に設定し、imageHeightは未設定のままにします。 AlexaImageList内でAlexaImageListItemを使用する場合、このプロパティは無視されます。AlexaImageListテンプレートではimageHeightが指定されるため、画像の高さはすべてのリスト項目で同じになります。	サポートされません	1.2.0
imageHideScrim	ブール値	false	trueの場合、画像とテキストコンテンツの間のオーバーレイ（スクリム）を非表示にします。	サポートされません	1.1.0
imageMetadataPrimacy	ブール値	false	trueの場合、画面サイズの制約のために1つの要素しか表示できないデバイスでは、hintTextよりもsecondaryTextとtertiaryTextを優先します。falseの場合、小型の画面ではsecondaryTextとtertiaryTextを非表示にします。	サポートされません	1.1.0
imageProgressBarPercentage	数値	0	1～100の数値に設定すると、指定したパーセンテージに基づいて画像に進行状況バーが表示されます。これにより、ユーザーは項目のステータスをひとめで確認できます。進行状況バーは、imageShowProgressBarがtrueで、imageProgressBarPercentageパラメーターが0より大きい値に設定されている場合に表示されます。imageAspectRatioがroundの場合、進行状況バーは表示されません。	サポートされません	1.1.0
imageRoundedCorner	ブール値	true	trueの場合、画像の角を丸くします。	サポートされません	1.1.0
imageScale	文字列	best-fit	バウンディングボックス内に収まるように画像を拡大縮小する方法を決定します。オプションは、none、fill、best-fit、best-fill、best-fit-downです。このプロパティは、AlexaImageレスポンシブ対応コンポーネントのimageScaleプロパティと同じように機能します。	サポートされません	1.1.0
imageShadow	ブール値	true	trueの場合、画像の背後にドロップシャドウを表示します。	サポートされません	1.3.0
imageShowProgressBar	ブール値	true	画像のオーバーレイに進行状況バーを表示します。進行状況バーは、imageShowProgressBarがtrueで、imageProgressBarPercentageパラメーターが0より大きい値に設定されている場合に表示されます。imageAspectRatioがroundの場合、進行状況バーは表示されません。	サポートされません	1.1.0
imageSource	文字列		表示する画像のURIです。	サポートされません	1.1.0
layoutDirection	文字列	${environment.layoutDirection}	コンテンツのレイアウト方向を指定します。このプロパティは、LTR（左から右）またはRTL（右から左）に設定します。このプロパティには、コンポーネントの親コンテナーのlayoutDirectionは継承されません。このため、必要に応じて明示的にこのプロパティを設定してください。 レスポンシブ対応コンポーネントでの右から左に記述する言語のサポートの詳細については、右から左に記述する言語のサポートを参照してください。	サポートされません	1.4.0
primaryAction	コマンド		ユーザーがリスト項目を選択したときに実行されるアクションです。	サポートされません	1.1.0
primaryText	文字列		リスト項目に表示する第1テキストです。	サポートされません	1.1.0
providerText	文字列		画像の上に表示するプロバイダーテキストです。	サポートされません	1.1.0
ratingGraphicType	文字列	AVG	評価に使用するグラフィックのタイプです。AVGまたはimageに設定します。 小さいviewport上では、スペースの制約で評価が表示されません。 AlexaRatingのプロパティを使用する方法の詳細については、AlexaRatingを参照してください。	サポートされません	1.2.0
ratingNumber	数値	—	0～5の数値の評価です。ratingSlotModeがmultipleの場合に使用されます。 小さいviewport上では、スペースの制約で評価が表示されません。 AlexaRatingのプロパティを使用する方法の詳細については、AlexaRatingを参照してください。	サポートされません	1.2.0
ratingSlotMode	文字列	—	評価用の1つのグラフィックアセットを表示するか、複数の画像アセットから評価度を構成するかを決定します。singleに設定した場合は、singleRatingGraphicプロパティに単一のグラフィックアセットを指定します。multipleの場合は、ratingNumberに数値の評価を指定します。 小さいviewport上では、スペースの制約で評価が表示されません。 AlexaRatingのプロパティを使用する方法の詳細については、AlexaRatingを参照してください。	サポートされません	1.2.0
ratingText	文字列	—	評価の横に表示するテキストです。 小さいviewport上では、スペースの制約で評価が表示されません。 AlexaRatingのプロパティを使用する方法の詳細については、AlexaRatingを参照してください。	サポートされません	1.2.0
secondaryText	文字列		リスト項目の第2テキストです。	サポートされません	1.1.0
singleRatingGraphic	任意	—	評価を表すために表示するグラフィックです。ratingSlotModeがsingleの場合に使用されます。AVGへの参照または画像のURLを指定できます。 小さいviewport上では、スペースの制約で評価が表示されません。 AlexaRatingのプロパティを使用する方法の詳細については、AlexaRatingを参照してください。	サポートされません	1.2.0
singleRatingGraphicWidth	ディメンション	—	評価を表す1つのグラフィックのバウンディングボックスの幅です。ratingSlotModeがsingleの場合に使用されます。 小さいviewport上では、スペースの制約で評価が表示されません。 AlexaRatingのプロパティを使用する方法の詳細については、AlexaRatingを参照してください。	サポートされません	1.2.0
speech	任意	—	SpeakItemコマンドまたはSpeakListコマンドで読み上げるコンテンツです。textToSpeechまたはssmlToSpeechトランスフォーマーの出力を指定する必要があります。	サポートされません	1.2.0
tertiaryText	文字列		リスト項目の第3テキストです。	サポートされません	1.1.0
theme	文字列	dark	色のテーマをダークまたはライトに設定します。テーマを選択することでコンポーネントの色を制御します。	サポートされません	1.1.0
type	文字列	—	常にAlexaImageListItemに設定されます。	サポートされません	1.1.0

画像サイズ、アスペクト比、拡大縮小

AlexaImageListItemレスポンシブ対応コンポーネントでは、事前に定義された高さと幅が使用されます。この高さと幅は、指定したimageAspectRatioとViewportの特性によって決まります。

アスペクト比、拡大縮小、配置は、AlexaImageレスポンシブ対応コンポーネントの場合と同じように機能します。詳細については、画像のアスペクト比と拡大縮小の例を参照してください。

AlexaImageListItemの例

次の例は、すべてのテキストオプション、進行状況バー、評価が設定されたAlexaImageListItemを示しています。

---

関連トピック

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

---

---

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