Rating

Rating

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

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

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

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

AlexaRatingのパラメーター

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

名前 型 デフォルト 説明 追加されたバージョン

emptyRatingGraphic

any

empty

「空」のレーティングスロット（中が空の星など）を表すグラフィックです。ratingSlotModeがmultipleの場合に使用されます。AVGへの参照または画像のURLを指定できます。ratingGraphicTypeがAVGの場合、このプロパティにgraphicsプロパティまたは読み込まれたパッケージで定義されているグラフィックの名前を設定します。ratingGraphicTypeがimageの場合、表示する画像のURLを指定します。

1.1.0

fullRatingGraphic

any

full

「満点」のレーティングスロット（完全な星など）を表すグラフィックです。ratingSlotModeがmultipleの場合に使用されます。AVGへの参照または画像のURLを指定できます。ratingGraphicTypeがAVGの場合、このプロパティにgraphicsプロパティまたは読み込まれたパッケージで定義されているグラフィックの名前を設定します。ratingGraphicTypeがimageの場合、表示する画像のURLを指定します。

1.1.0

halfRatingGraphic

any

half

「半分」のレーティングスロット（半分の星など）を表すグラフィックです。ratingSlotModeがmultipleの場合に使用されます。AVGへの参照または画像のURLを指定できます。ratingGraphicTypeがAVGの場合、このプロパティにgraphicsプロパティまたは読み込まれたパッケージで定義されているグラフィックの名前を設定します。ratingGraphicTypeがimageの場合、表示する画像のURLを指定します。

1.1.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プロパティに1つのグラフィックアセットを指定します。multipleの場合は、ratingNumberで数値のレーティングを指定します。multipleでは、デフォルトの星画像を使用するか、星ごとに異なる状態（full、half、またはempty）を表す独自の画像を指定できます。単一スロットモードと複数スロットモードについてを参照してください。

1.1.0

ratingSlotPadding

ディメンション

3dp

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

1.1.0

ratingText

文字列

レーティングのほかに表示されるテキストです。

1.1.0

singleRatingGraphicWidth

ディメンション

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

1.1.0

singleRatingGraphic

any

レーティングを表すために表示するグラフィックです。ratingSlotModeがsingleの場合に使用されます。AVGへの参照または画像のURLを指定できます。ratingGraphicTypeがAVGの場合、このプロパティにgraphicsプロパティまたは読み込まれたパッケージで定義されているグラフィックの名前を設定します。ratingGraphicTypeがimageの場合、表示する画像のURLを指定します。

1.1.0

theme

文字列

dark

指定したテーマ（lightまたはdark）に応じて色が切り替わります。デフォルトのテーマはdarkです。

1.1.0

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

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

  • 単一 - 1つの静的グラフィックを表示します。表示するAVGまたは画像と、画像に使用する幅を指定できます。
  • 複数 - 0～5の数値（「3.5」など）を使用して、レーティングを表すグラフィックのセットを動的に決定します。このオプションは、各「スロット」の状態（full、half、empty）を表す3つの異なるグラフィックを使用します。たとえば、レーティングが3.5の場合、このオプションでは「full」のグラフィックが3回、「half」のグラフィックが1回、最後に「empty」のグラフィックが1回表示されます。

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

以下は、デフォルトの星のグラフィックを使用して3.5のレーティングを表示する例です。

{
  "type": "AlexaRating",
  "ratingSlotPadding": "4dp",
  "ratingSlotMode": "multiple",
  "ratingNumber": 3.5,
  "ratingText": "509件の評価"
}
複数スロットモードの場合のデフォルトの星のグラフィック
複数スロットモードの場合のデフォルトの星のグラフィック

以下は、“customRating”として定義された1つのグラフィックを表示する例です。


{
  "type": "AlexaRating",
  "ratingSlotMode": "single",
  "singleRatingGraphic": "customRating",
  "ratingText": "609件の評価"
}

緑色と赤色の星のある1つのグラフィック
緑色と赤色の星のある1つのグラフィック

AlexaRatingの例

以下は、複数レーティングスロットと単一レーティングスロットの両方の例を表示する包括的なドキュメントの例です。