おすすめ度を星の画像で表示

広告

Amazonのサイトではおすすめ度が星の画像で表されています。そこで取得したレビューのおすすめ度や、おすすめ度の平均について星の画像を使って表示させてみます。

レビューに付けることが出来る評価は「1」「2」「3」「4」「5」の5段階となっています。その為「Rating」要素に設定される値も1から5の値となっています。また商品に対するおすすめ度の平均が含まれる「AverageRating」要素の値は「1.0」「1.5」「2.0」「2.5」「3.0」「3.5」「4.0」「4.5」「5.0」の9種類となります。

これらのおすすめ度を表す値に対して次のような画像がAmazonでは使われています。

1.0

1.5

2.0

2.5

3.0

3.5

4.0

4.5

5.0

今回はこの画像をそのまま使わせて頂き、「Rating」要素及び「AverageRating」要素の内容に応じて画像を表示するようにテンプレートルールを記述してみます。

XSLにて条件分岐を記述する場合は次の書式を使います。

<xsl:choose>
  <xsl:when test="式1">
    式1が真のときの処理1
  </xsl:when>
  <xsl:when test="式2">
    式2が真のときの処理2
  </xsl:when>
  <xsl:when test="式n">
    式nが真のときの処理n
  </xsl:when>
</xsl:choose>

上記では「式1」が真の時には処理1を、「式2」が真の時には処理2を行います。そこで「Rating」要素の値が「1」「2」「3」「4」「5」の値と等しいかどうかを順に判断するルールを記述します。

<xsl:choose>
  <xsl:when test="aws:Rating = 5">
    星5つの画像を表示
  </xsl:when>
  <xsl:when test="aws:Rating = 4">
    星4つの画像を表示
  </xsl:when>
  <xsl:when test="aws:Rating = 3">
    星3つの画像を表示
  </xsl:when>
  <xsl:when test="aws:Rating = 2">
    星2つの画像を表示
  </xsl:when>
  <xsl:when test="aws:Rating = 1">
    星1つの画像を表示
  </xsl:when>
</xsl:choose>

同じように「AverageRating」要素についても条件分岐を記述します。ただしこちらの場合は0.5きざみで値を比較します。より具体的な記述方法は下記のサンプルで確認して下さい。

サンプル

では実際に試してみます。まず次のようなXSLTスタイルシートを用意します。

ecs10-1.xsl

<?xml version="1.0" encoding="UTF-8"?>
<xsl:stylesheet 
  xmlns:xsl="http://www.w3.org/1999/XSL/Transform" 
  xmlns:aws="http://webservices.amazon.com/AWSECommerceService/2009-07-01"
  version="1.0">
<xsl:output method="html" encoding="UTF-8"/>

<xsl:template match="/">
  <html lang="ja">
  <head>
  <title>XSLサンプル</title>
  </head>
  <body>

  <xsl:apply-templates select="aws:ItemSearchResponse/aws:Items/aws:Item"/>

  </body>
  </html>
</xsl:template>

<xsl:template match="aws:ItemSearchResponse/aws:Items/aws:Item">
  <p>
  <xsl:element name="img">
    <xsl:attribute name="src">
      <xsl:value-of select="aws:ImageSets/aws:ImageSet/aws:MediumImage/aws:URL" />
    </xsl:attribute>
    <xsl:attribute name="width">
      <xsl:value-of select="aws:ImageSets/aws:ImageSet/aws:MediumImage/aws:Width" />
    </xsl:attribute>
    <xsl:attribute name="height">
      <xsl:value-of select="aws:ImageSets/aws:ImageSet/aws:MediumImage/aws:Height" />
    </xsl:attribute>
    <xsl:attribute name="alt">
      <xsl:value-of select="aws:ItemAttributes/aws:Title" />
    </xsl:attribute>
  </xsl:element>
  </p>

  <p>
  <xsl:variable name="starurl">http://g-ec2.images-amazon.com/images/G/09/x-locale/common/customer-reviews/</xsl:variable>
  <xsl:choose>
    <xsl:when test="aws:CustomerReviews/aws:AverageRating = 5.0">
      [おすすめ度] 
      <xsl:element name="img">
        <xsl:attribute name="src">
          <xsl:value-of select="concat($starurl,'stars-5-0._V45731007_.gif')" />
        </xsl:attribute>
      </xsl:element>
    </xsl:when>
    <xsl:when test="aws:CustomerReviews/aws:AverageRating = 4.5">
      [おすすめ度] 
      <xsl:element name="img">
        <xsl:attribute name="src">
          <xsl:value-of select="concat($starurl,'stars-4-5._V45727989_.gif')" />
        </xsl:attribute>
      </xsl:element>
    </xsl:when>
    <xsl:when test="aws:CustomerReviews/aws:AverageRating = 4.0">
      [おすすめ度] 
      <xsl:element name="img">
        <xsl:attribute name="src">
          <xsl:value-of select="concat($starurl,'stars-4-0._V45729814_.gif')" />
        </xsl:attribute>
      </xsl:element>
    </xsl:when>
    <xsl:when test="aws:CustomerReviews/aws:AverageRating = 3.5">
      [おすすめ度] 
      <xsl:element name="img">
        <xsl:attribute name="src">
          <xsl:value-of select="concat($starurl,'stars-3-5._V45728391_.gif')" />
        </xsl:attribute>
      </xsl:element>
    </xsl:when>
    <xsl:when test="aws:CustomerReviews/aws:AverageRating = 3.0">
      [おすすめ度] 
      <xsl:element name="img">
        <xsl:attribute name="src">
          <xsl:value-of select="concat($starurl,'stars-3-0._V45728225_.gif')" />
        </xsl:attribute>
      </xsl:element>
    </xsl:when>
    <xsl:when test="aws:CustomerReviews/aws:AverageRating = 2.5">
      [おすすめ度] 
      <xsl:element name="img">
        <xsl:attribute name="src">
          <xsl:value-of select="concat($starurl,'stars-2-5._V45728383_.gif')" />
        </xsl:attribute>
      </xsl:element>
    </xsl:when>
    <xsl:when test="aws:CustomerReviews/aws:AverageRating = 2.0">
      [おすすめ度] 
      <xsl:element name="img">
        <xsl:attribute name="src">
          <xsl:value-of select="concat($starurl,'stars-2-0._V45731245_.gif')" />
        </xsl:attribute>
      </xsl:element>
    </xsl:when>
    <xsl:when test="aws:CustomerReviews/aws:AverageRating = 1.5">
      [おすすめ度] 
      <xsl:element name="img">
        <xsl:attribute name="src">
          <xsl:value-of select="concat($starurl,'stars-1-5._V45730841_.gif')" />
        </xsl:attribute>
      </xsl:element>
    </xsl:when>
    <xsl:when test="aws:CustomerReviews/aws:AverageRating = 1.0">
      [おすすめ度] 
      <xsl:element name="img">
        <xsl:attribute name="src">
          <xsl:value-of select="concat($starurl,'stars-1-0._V45727811_.gif')" />
        </xsl:attribute>
      </xsl:element>
    </xsl:when>
  </xsl:choose>
  </p>

  <xsl:apply-templates select="aws:CustomerReviews/aws:Review"/>
</xsl:template>

<xsl:template match="aws:CustomerReviews/aws:Review">
  <p>
  <xsl:variable name="starurl">http://g-ec2.images-amazon.com/images/G/09/x-locale/common/customer-reviews/</xsl:variable>
  <xsl:choose>
    <xsl:when test="aws:Rating = 5">
      <xsl:element name="img">
        <xsl:attribute name="src">
          <xsl:value-of select="concat($starurl,'stars-5-0._V45731007_.gif')" />
        </xsl:attribute>
      </xsl:element>
    </xsl:when>
    <xsl:when test="aws:Rating = 4">
      <xsl:element name="img">
        <xsl:attribute name="src">
          <xsl:value-of select="concat($starurl,'stars-4-0._V45729814_.gif')" />
        </xsl:attribute>
      </xsl:element>
    </xsl:when>
    <xsl:when test="aws:Rating = 3">
      <xsl:element name="img">
        <xsl:attribute name="src">
          <xsl:value-of select="concat($starurl,'stars-3-0._V45728225_.gif')" />
        </xsl:attribute>
      </xsl:element>
    </xsl:when>
    <xsl:when test="aws:Rating = 2">
      <xsl:element name="img">
        <xsl:attribute name="src">
          <xsl:value-of select="concat($starurl,'stars-2-0._V45731245_.gif')" />
        </xsl:attribute>
      </xsl:element>
    </xsl:when>
    <xsl:when test="aws:Rating = 1">
      <xsl:element name="img">
        <xsl:attribute name="src">
          <xsl:value-of select="concat($starurl,'stars-1-0._V45727811_.gif')" />
        </xsl:attribute>
      </xsl:element>
    </xsl:when>
  </xsl:choose>
  <xsl:value-of select="aws:Summary" />
  </p>
</xsl:template>

</xsl:stylesheet>

次のようなリクエストを送信します。(「Style」パラメータにはXSLTスタイルシートを設置したURLを指定して下さい)。

http://xml-jp.amznxslt.com/onca/xml?
Service=AWSECommerceService
&AWSAccessKeyId=[AccessKey]
&Version=2009-07-01
&ResponseGroup=Small,Images,Reviews
&Operation=ItemSearch
&SearchIndex=Books
&Keywords=Java
&ContentType=text/html
&Style=http://www.example.com/ecs10-1.xsl

結果として取得したXMLデータがXSLTスタイルシートによって変換され次のように出力されます。

おすすめ度を星の画像で表示

( Written by Tatsuo Ikura )

関連記事 (一部広告含む)