先のエントリーで、「
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"?>
<xsl:stylesheet xmlns:xsl="https://www.w3.org/1999/XSL/Transform" xmlns:aws="https://webservices.amazon.com/AWSECommerceService/2006-03-08" exclude-result-prefixes="aws" version="1.0">
<xsl:output method="html"
doctype-public="-//W3C//DTD XHTML 1.0 Transitional//EN"
doctype-system="https://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd" />
<xsl:template match="/">
<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>
<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>
</xsl:stylesheet>
非常に大事なのは
<xsl:output method="html"
doctype-public="-//W3C//DTD XHTML 1.0 Transitional//EN"
doctype-system="https://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd" />
という行で、この宣言で生成される HTML の最初の行に
<!DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"https://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
という 1行が出力される（実際には 1行）。これがないと
IE ではスタイルシートを別ファイルに指定したときにうまく表示されない （Firefox はこれがなくてもきちんと表示されていたので、私はこのことですごく悩んだ）。
上の XSLT への実際のファイルへのリンクと、画像だけのテンプレートのリンクは、以下に挙げた。
イメージ的には、以下のようになる。
つまるところ、
amazon.xsl が、iframe に表示される内容（HTML）となる。なので、この XSLT を自分用にカスタマイズすれば、お望みの表示ができると思う。
それでは、Enjoy!
トラックバック URL:
https://perltips.twinkle.cc/trackback/102