Amazon アソシエイトで、テンプレート (XSLT) を使って商品情報や画像を表示する方法

先のエントリーで、「Amazon アソシエイトで、商品画像だけ表示する方法」とか「Amazon アソシエイトで、ウェブサービス (AWS) を REST で利用する方法」とか検討してきたが、結局これらをまとめるとどうなるのだろう？オールマイティな方法、もっと楽な方法はないのだろうか？いろいろ試しているうちに、要はアマゾンの商品情報や画像を表示したい HTML の中で iframe を使えばよいことがわかったのでその方法を紹介する。

ブログと連動したこんなサイトも（ある程度は）簡単に作れる（ちなみに、私が今までアマゾンで買ったアイテムです）。

まず、HTML に以下のようにインラインフレーム (iframe) を埋め込む。ASIN コードは、当然のことながら表示したい ASIN コードとなる。その他、自分の持っている ID とか青字の部分を変えて欲しい。

ちなみに、オレンジの部分は、AWS のユーザーガイドによると webservices.amazon.co.jp ということになってはいるけれども、このホスト名を指定しても結局は xml-jp.amznxslt.com にリダイレクトされるし、効果は同じようだ（注：その後、同ユーザーガイドを読んでいたら、XSLT スタイルシート用の URL は xml-xx.amznxslt.com だそうだ）。また、xml-jp のところを xml-us に変えたりすると米国アマゾンに接続される（この場合、アソシエイト ID も米国アマゾンのものを使うこと。登録したメールアドレスが同じ場合は Access Key ID は日米で同じであるが、まぁこんなことはほとんどの人には関係ないだろう）。


<iframe
↓ここからは説明のために各パラメータごとに改行してます。
src="https://<font color="orange">xml-jp.amznxslt.com</font>/onca/xml?Service=AWSECommerceService
&ItemId=<font color="blue">B000IDHI9A</font> ← 表示したい商品の ASIN コード
&AWSAccessKeyId=<font color="blue">152ZP71KPB47XM09CS02</font> ← あなたの Access Key ID
&AssociateTag=<font color="blue">twinklexxx-22</font> ←あなたのアソシエイトID
&Operation=ItemLookup
&IdType=ASIN
&ContentType=text%2Fhtml
&Version=2006-03-08
&Page=1
&ResponseGroup=ItemAttributes,Images,Offers
↑(1) 商品詳細情報、(2) 画像 URL、(3) 価格をまとめて受け取る
&Style=<font color="blue">https://perltips.twinkle.cc/amazon.xsl</font>" ←テンプレートの URL
↑よって、ここまでは、改行なしの 1行で記述すること。
scrolling="no" marginwidth="0" marginheight="0" frameborder="0" height="175">
</iframe>

さらに以下のようなテンプレートを用意する必要がある。CD、本、PC などの一般の商品によって、返される情報が微妙に違うので、それぞれ XSLT の中の条件文で判断する必要がある（アーティスト名（Artist）、著者（Author）、メーカー（Manufacturer）など）。以下は例である（表示が切れていて申し訳ないが、ドラッグして選択すれば、ちゃんとコピペできるはずである）。


<?xml version="1.0"?>




<html lang="ja">
    <head>
        <link rel="stylesheet" href="<$MTBlogURL$>styles-xsl.css" type="text/css" media="screen,tv" />
        <link rel="shortcut icon" href="<$MTBlogURL$>favicon.ico" />
    </head>
    <body>
        <xsl:apply-templates select="aws:ItemLookupResponse/aws:Items/aws:Item" />
    </body>
</html>


<xsl:template match="aws:Item">

    <xsl:variable name="detail"       select="aws:DetailPageURL"                />
    <xsl:variable name="image"        select="aws:MediumImage/aws:URL"          />
    <xsl:variable name="width"        select="aws:MediumImage/aws:Width"        />
    <xsl:variable name="height"       select="aws:MediumImage/aws:Height"       />
    <xsl:variable name="title"        select="aws:ItemAttributes/aws:Title"     />
    <xsl:variable name="ourprice"     select="aws:Offers/aws:Offer/aws:OfferListing/aws:Price/aws:FormattedPrice" />
    <xsl:variable name="availavility" select="aws:Offers/aws:Offer/aws:OfferListing/aws:Availability" />

    <table>
        <tr>
            <td>
                <a>
                    <xsl:attribute name="href"  ><xsl:value-of select="$detail" /></xsl:attribute>
                    <xsl:attribute name="target">_blank</xsl:attribute>
                    <img>
                        <xsl:attribute name="src"   ><xsl:value-of select="$image"  /></xsl:attribute>
                        <xsl:attribute name="height"><xsl:value-of select="$height" /></xsl:attribute>
                        <xsl:attribute name="width" ><xsl:value-of select="$width"  /></xsl:attribute>
                        <xsl:attribute name="alt"   ><xsl:value-of select="$title"  /></xsl:attribute>
                        <xsl:attribute name="title" ><xsl:value-of select="$title"  /></xsl:attribute>
                    </img>
                </a>
            </td>
            <td>
                <a>
                    <xsl:attribute name="href"  ><xsl:value-of select="$detail" /></xsl:attribute>
                    <xsl:attribute name="target">_blank</xsl:attribute>
                    <xsl:value-of select="$title" />
                </a><br /><br />

               <xsl:choose>
                   <xsl:when test="aws:ItemAttributes/aws:Author">
                       <xsl:value-of select="aws:ItemAttributes/aws:Author" />
                   </xsl:when>
                   <xsl:when test="aws:ItemAttributes/aws:Artist">
                       <xsl:value-of select="aws:ItemAttributes/aws:Artist" />
                   </xsl:when>
                   <xsl:when test="aws:ItemAttributes/aws:Director">
                       <xsl:value-of select="aws:ItemAttributes/aws:Director" />
                   </xsl:when>
                   <xsl:when test="aws:ItemAttributes/aws:Composer">
                        <xsl:value-of select="aws:ItemAttributes/aws:Composer" />
                    </xsl:when>
                    <xsl:when test="aws:ItemAttributes/aws:Manufacturer">
                        <xsl:value-of select="aws:ItemAttributes/aws:Manufacturer" />
                    </xsl:when>
                </xsl:choose>
                <xsl:choose>

                <xsl:when test="aws:ItemAttributes/aws:Author">
                    <xsl:if test="aws:ItemAttributes/aws:Publisher">
                        <br /><xsl:value-of select="aws:ItemAttributes/aws:Publisher" />
                    <xsl:if test="aws:ItemAttributes/aws:PublicationDate">
                    </xsl:if>
                        (<xsl:value-of select="aws:ItemAttributes/aws:PublicationDate" />)
                    </xsl:if>
                </xsl:when>
                <xsl:when test="aws:ItemAttributes/aws:ReleaseDate">
                    <br /><xsl:value-of select="aws:ItemAttributes/aws:ReleaseDate" />
                </xsl:when>
                </xsl:choose>

                <div id="price">
                    <xsl:value-of select="$ourprice"/><br />
                </div>
                <xsl:value-of select="$availavility" /><br />
                <div id="more">
                    <a>
                        <xsl:attribute name="href"  ><xsl:value-of select="$detail" /></xsl:attribute>
                        <xsl:attribute name="target">_blank</xsl:attribute>
                        <br />Amazon で詳しく見る
                    </a>
                </div>
            </td>
        </tr>
    </table>
</xsl:template>

非常に大事なのは

という行で、この宣言で生成される HTML の最初の行に

という 1行が出力される（実際には 1行）。これがないと IE ではスタイルシートを別ファイルに指定したときにうまく表示されない （Firefox はこれがなくてもきちんと表示されていたので、私はこのことですごく悩んだ）。

上の XSLT への実際のファイルへのリンクと、画像だけのテンプレートのリンクは、以下に挙げた。

イメージ的には、以下のようになる。