画像の表示

広告

商品の画像を取得する方法を確認します。画像を取得するには画像データが含まれるResponseGroupプロパティの値を指定して下さい。(詳しくは「取得する情報の種類(ResponseGroup)」を参照して下さい)。

取得したデータの中で画像に関するデータは「Item」要素の中に含まれています。 

<SmallImage>
  <URL>http://ecx.images-amazon.com/images/I/51Xz3SfWU9L._SL75_.jpg</URL> 
  <Height Units="pixels">75</Height> 
  <Width Units="pixels">52</Width> 
</SmallImage>
<MediumImage>
  <URL>http://ecx.images-amazon.com/images/I/51Xz3SfWU9L._SL160_.jpg</URL> 
  <Height Units="pixels">160</Height> 
  <Width Units="pixels">111</Width> 
</MediumImage>
<LargeImage>
  <URL>http://ecx.images-amazon.com/images/I/51Xz3SfWU9L.jpg</URL> 
  <Height Units="pixels">500</Height> 
  <Width Units="pixels">346</Width> 
</LargeImage>
<ImageSets>
  <ImageSet Category="primary">
    <SwatchImage>
      <URL>http://ecx.images-amazon.com/images/I/51Xz3SfWU9L._SL30_.jpg</URL> 
      <Height Units="pixels">30</Height> 
      <Width Units="pixels">21</Width> 
    </SwatchImage>
    <SmallImage>
      <URL>http://ecx.images-amazon.com/images/I/51Xz3SfWU9L._SL75_.jpg</URL> 
      <Height Units="pixels">75</Height> 
      <Width Units="pixels">52</Width> 
    </SmallImage>
    <ThumbnailImage>
      <URL>http://ecx.images-amazon.com/images/I/51Xz3SfWU9L._SL75_.jpg</URL> 
      <Height Units="pixels">75</Height> 
      <Width Units="pixels">52</Width> 
    </ThumbnailImage>
    <TinyImage>
      <URL>http://ecx.images-amazon.com/images/I/51Xz3SfWU9L._SL110_.jpg</URL> 
      <Height Units="pixels">110</Height> 
      <Width Units="pixels">76</Width> 
    </TinyImage>
    <MediumImage>
      <URL>http://ecx.images-amazon.com/images/I/51Xz3SfWU9L._SL160_.jpg</URL> 
      <Height Units="pixels">160</Height> 
      <Width Units="pixels">111</Width> 
    </MediumImage>
    <LargeImage>
      <URL>http://ecx.images-amazon.com/images/I/51Xz3SfWU9L.jpg</URL> 
      <Height Units="pixels">500</Height> 
      <Width Units="pixels">346</Width> 
    </LargeImage>
  </ImageSet>
  <ImageSet Category="variant">
    ...
  </ImageSet>
  <ImageSet Category="variant">
    ...
  </ImageSet>
</ImageSets>

1つの商品に対して数多くの画像が用意されています。今回は「ImageSets」要素の中の「ImageSet」要素の中にある「MediumImage」要素を使ってみます。img要素を作成し、src属性、width属性、height属性、alt属性を設定しています。 

<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>

なお「ImageSet」要素は複数含まれている場合があります。「Category」属性の値が「primary」の要素を対象とする場合は明示的に次のように記述することもできます。 

<xsl:element name="img">
  <xsl:attribute name="src">
    <xsl:value-of select="aws:ImageSets/aws:ImageSet[@Category='primary']/aws:MediumImage/aws:URL" />
  </xsl:attribute>
  <xsl:attribute name="width">
    <xsl:value-of select="aws:ImageSets/aws:ImageSet[@Category='primary']/aws:MediumImage/aws:Width" />
  </xsl:attribute>
  <xsl:attribute name="height">
    <xsl:value-of select="aws:ImageSets/aws:ImageSet[@Category='primary']/aws:MediumImage/aws:Height" />
  </xsl:attribute>
  <xsl:attribute name="alt">
    <xsl:value-of select="aws:ItemAttributes/aws:Title" />
  </xsl:attribute>
</xsl:element>

「Category」属性の値が「primary」のものを対象とする場合は「ImageSets」要素の中で最初に記載されていますのであえて指定する必要はありません。

サンプル

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

ecs8-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>
</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
&Operation=ItemSearch
&SearchIndex=Books
&Keywords=Java
&ContentType=text/html
&Style=http://www.example.com/ecs8-1.xsl

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

画像の表示

( Written by Tatsuo Ikura )