Rating

---

Alexa Ratingレスポンシブ対応コンポーネント（AlexaRating）は、非対話型のグラフィックを使用して項目の評価を表示します。デフォルトの星画像か、グラフィック用の独自のカスタムアセットを使用できます。

互換性

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

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

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

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

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

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

AlexaRatingのパラメーター

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

名前	型	デフォルト	説明	ウィジェットのサポート	追加されたバージョン
accessibilityLabel	文字列	"[ratingNumber] out of five stars from [ratingText]"	評価を説明する文字列です。ユーザーが項目を選択すると、ボイスオーバーでこの文字列が読み上げられます。	サポートされません	1.4.0
emptyRatingGraphic	任意	empty	「空」の評価スロットを表すグラフィックです（塗りつぶされていない星など）。ratingSlotModeがmultipleの場合に使用されます。AVGへの参照または画像のURLを指定できます。ratingGraphicTypeがAVGの場合、このプロパティには、graphicsプロパティまたはインポートされたパッケージで定義されているグラフィックの名前を設定します。ratingGraphicTypeがimageの場合、表示する画像のURLを指定します。	サポートされません	1.1.0
entities	配列	—	このテンプレートにバインドするentityデータの配列です。	サポートされません	1.2.0
fullRatingGraphic	任意	full	「フル」の評価スロットを表すグラフィックです（完全に塗りつぶされた星など）。ratingSlotModeがmultipleの場合に使用されます。AVGへの参照または画像のURLを指定できます。ratingGraphicTypeがAVGの場合、このプロパティには、graphicsプロパティまたはインポートされたパッケージで定義されているグラフィックの名前を設定します。ratingGraphicTypeがimageの場合、表示する画像のURLを指定します。	サポートされません	1.1.0
halfRatingGraphic	任意	half	「半分」の評価スロットを表すグラフィックです（半分の星など）。ratingSlotModeがmultipleの場合に使用されます。AVGへの参照または画像のURLを指定できます。ratingGraphicTypeがAVGの場合、このプロパティには、graphicsプロパティまたはインポートされたパッケージで定義されているグラフィックの名前を設定します。ratingGraphicTypeがimageの場合、表示する画像のURLを指定します。	サポートされません	1.1.0
layoutDirection	文字列	${environment.layoutDirection}	レーティングのレイアウト方向を指定します。このプロパティは、LTR（左から右）またはRTL（右から左）に設定します。このプロパティには、コンポーネントの親コンテナーのlayoutDirectionは継承されません。このため、必要に応じて明示的にこのプロパティを設定してください。 レスポンシブ対応コンポーネントでの右から左に記述する言語のサポートの詳細については、右から左に記述する言語のサポートを参照してください。	サポートされません	1.4.0
ratingGraphicType	文字列	AVG	評価に使用するグラフィックのタイプです。AVGまたはimageに設定します。imageに設定した場合は、関連するグラフィックプロパティに、使用する画像のURLを指定します。AVGに設定した場合は、ドキュメントのgraphicsプロパティでAVGを定義するか、インポートされたパッケージで定義されているグラフィックを使用します。	サポートされません	1.1.0
ratingNumber	数値	—	0～5の数値の評価です。ratingSlotModeがmultipleの場合に使用されます。	サポートされません	1.1.0
ratingSlotMode	文字列	multiple	評価用の1つのグラフィックアセットを表示するか、複数の画像アセットから評価度を構成するかを決定します。singleに設定した場合は、singleRatingGraphicプロパティに単一のグラフィックアセットを指定します。multipleの場合は、ratingNumberに数値の評価を指定します。multipleでは、デフォルトの星画像を使用するか、異なる状態の星（フル、半分、空）を表す独自の画像を提供できます。単一スロットモードと複数スロットモードについてを参照してください。	サポートされません	1.1.0
ratingSlotPadding	ディメンション	3dp	評価スロット間に使用するパディングです。ratingSlotModeがmultipleの場合に使用されます。0dp～4dpの間で指定します。	サポートされません	1.1.0
ratingText	文字列	—	評価に加えて表示するテキストです。	サポートされません	1.1.0
ratingTextOpacity	数値	0.8	評価の横に表示されるテキストの不透明度（opacity）です。0～1の間の数値を設定します。	サポートされません	1.3.0
singleRatingGraphic	任意	—	評価を表すために表示するグラフィックです。ratingSlotModeがsingleの場合に使用されます。AVGへの参照または画像のURLを指定できます。ratingGraphicTypeがAVGの場合、このプロパティには、graphicsプロパティまたはインポートされたパッケージで定義されているグラフィックの名前を設定します。ratingGraphicTypeがimageの場合、表示する画像のURLを指定します。	サポートされません	1.1.0
singleRatingGraphicWidth	ディメンション	—	評価を表す単一グラフィックのバウンディングボックスの幅です。ratingSlotModeがsingleの場合に使用されます。	サポートされません	1.1.0
theme	文字列	dark	色のテーマをダークまたはライトに設定します。選択されたテーマによってコンポーネントの色が制御されます。	サポートされません	1.1.0
type	文字列	—	常にAlexaRatingに設定します。	サポートされません	1.1.0

単一スロットモードと複数スロットモードについて

AlexaRatingには、評価を表示するための2つの異なるモードがあり、ratingSlotModeプロパティで設定されます。

• 単一 - 1つの静的グラフィックを表示します。表示するAVGまたは画像と、画像に使用する幅を指定できます。
• 複数 - 0～5の数値（「3.5」など）を使用して、評価を表すグラフィックのセットを動的に決定します。このオプションでは、各「スロット」の状態（フル、半分、空）を表す3つの異なるグラフィックが使用されます。たとえば、評価が3.5の場合、このオプションでは「フル」のグラフィックが3つ、「半分」のグラフィックが1つ、最後に「空」のグラフィックが1つ表示されます。alexa-layouts 1.6.0以降では、評価は星半分単位で切り上げられます。たとえば、評価が3.1の場合は星3つ半が表示され、評価が3.6の場合は星4つが表示されます。

AlexaRatingレスポンシブ対応コンポーネントには、フル、半分、空の状態を表すデフォルトの「星」のグラフィックが含まれています。これらを使用することも、独自の画像またはAVGを指定することもできます。

次の例では、デフォルトの星のグラフィックを使用して3.5の評価を表示します。

次の例は、AlexaRatingで数値が次の星半分まで切り上げられるようすを示しています。1.6.0より前のバージョンのalexa-layoutsでは、この切り上げは行われませんでした。

---

次の例では、「customRating」として定義された単一のグラフィックを表示します。

customRatingのAVGの定義  

AlexaRatingの例

次の例は、複数スロットと単一スロットの両方の評価を表示するドキュメント全体を示しています。

---

関連トピック

• APL向けAlexaデザインシステム
• レスポンシブ対応コンポーネントとテンプレート
• Alexaデザインガイド： レスポンシブ対応コンポーネント（英語のみ）

---

---

最終更新日: 2025 年 11 月 19 日