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

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 )

Profile

著者 / TATSUO IKURA

これからIT関連の学習を始めようと考えている初心者～中級者の方を対象としたプログラミング方法や開発環境の構築の解説を行うサイトの運営を多数行っています。

≫ 詳しいプロフィール