Amazon

Drupal を使うと以下のようなサイトが簡単に作れてしまう。Movable Type のようにテンプレートタグとの格闘はまったくなかった。Ruby on Rails だと、サイトデザインも含めどのくらいプログラミングするだろうか。

このブログのトップページや個別エントリーのページにあるように、Amazon アソシエイトの商品を出すには、今まで紹介してきたような方法を使ってシコシコ手で入力したり、ほとんどワンクリックでリンクを入力する方法（ASIN コードの入力をラクにする方法）もあるが、これらリンクを Movable Type のテンプレートに組み込んでもう少し自動化する方法はないのだろうか？

その方法は、ズバリ MTAmazon という Movable Type 用のプラグインを使うことである。MTAmazon のページからモジュールをダウンロードして、plugins というディレクトリに放り込めば、テンプレートで Amazon アソシエイト用のタグが使えるようになる。各国のアマゾンに対応している（もちろん日本も！）ので、試してみて欲しい。

「Amazon アソシエイトで、画像の表示を自由に変更する方法」では、アマゾンにアクセスして得られる画像のリンクの仕様を紹介した。

これがわかれば、ブログの個々のページに貼付けた iframe（インライン）経由でアマゾンにアクセスし、XSLT を使って画像を表示するときにも応用できる。その方法は「Amazon アソシエイトで、テンプレート (XSLT) を使って商品情報や画像を表示する方法」で紹介した通りであるが、このテンプレートを変更して画像の大きさを変えてみよう。

変更部分は青色で示した部分で、

大きな画像 (Large) を右からのドロップシャドウ付きで取得して、そのサイズの 1/2 の大きさで表示するというものである。

XSLT では、割り算は div を使い、アマゾンから取得した URL 文字列の操作は concat(substring-before($image, '.jpg'), 'PC_.jpg') で行っている。

<body>
    <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="<font color="blue">concat(substring-before($image, '.jpg'), 'PC_.jpg')</font>" /></xsl:attribute>
            <xsl:attribute
                name="height"><xsl:value-of select="<font color="blue">$height div 2"</font> /></xsl:attribute>
            <xsl:attribute
                name="width" ><xsl:value-of select="<font color="blue">$width div 2</font>"  /></xsl:attribute>
            <xsl:attribute name="alt"   ><xsl:value-of select="$title"  /></xsl:attribute>
            <xsl:attribute name="title" ><xsl:value-of select="$title"  /></xsl:attribute>
            <xsl:attribute name="border">0</xsl:attribute>
        </img>
    </a>
</body>

Amazon アソシエイトでは AWS (Amazon Web Services、要はウェブ経由の API) を使ってアマゾンのデータベースに蓄えられている商品情報やカスタマーレビューなどのさまざまな情報を一般の人でも無料でアクセスできよるようになっている。

もちろんアマゾンにアクセスしたときに表示される CD や DVD などのさまざまな商品の画像も表示させることができる。この画像を表示するときは、今までは大、中、小くらいは API で取れたのだが、実はサイズを任意に変更したり、例えば以下のようにドロップシャドウ（影）を付けたりすることができるのであった。

さて、その方法、つまりアマゾンにアクセスして得られる画像のリンクだが、以下に仕様を示すので、この仕様に沿ってXSLT テンプレートをカスタマイズすれば、希望の大きさの画像が得られたりするだろう。

上の表のそれぞれの記号の意味は以下のとおり。 例えば右上の画像の URL は http://images.amazon.com/images/P/B000C5PNUA.01._SCLZZZZZZZ_PC_.jpg である。

<img src="/files/sites/perltips/images/amazon_image_format_legend.gif" width=550" border="no"> </p>

1. まず、/mt-static/images に ←の画像をアップロード /mt-static/mt_ja.js に以下のコードを追加 function AmazonLink(e) { if (!canFormat) return; var associate_id = 'twinklexxx'; // 自分のアソシエイト ID に変更 var xslt = 'http://aws.twinkle.cc/amazon.xsl'; // 自分の XSLT のアドレスに変更 var access_key = '152ZP71KPB47XM09CS02'; // 自分の Web サービス Access Key ID に変更 var str = getSelected(e); var asin = prompt('Enter Amazon ASIN',''); var country = prompt('Enter Country (us or jp)', 'us'); if (asin != null && country != null) {

   if (str == '') {
     if(country == 'jp') {
       code = '-22';
     } else if(country == 'us') {
       code = '-20';
     }
     setSelection(e, '<iframe src="http://xml-' + country + '.amznxslt.com/onca/xml?Service=AWSECommerceService&ItemId=' + asin + '&AssociateTag=' + associate_id + code + '&AWSAccessKeyId=' + access_key + '&Operation=ItemLookup&IdType=ASIN&ContentType=text%2Fhtml&Version=2006-03-08&Page=1&ResponseGroup=ItemAttributes,Images,Offers&Style=' + xslt + '" scrolling="no" marginwidth="0" marginheight="0" frameborder="0" height="175"></iframe>\n');
   } else {
     setSelection(e, '<iframe src="http://xml-' + country + '.amznxslt.com/onca/xml?Service=AWSECommerceService&ItemId=' + asin + '&AssociateTag=' + associate_id + code + '&AWSAccessKeyId=' + access_key + '&Operation=ItemLookup&IdType=ASIN&ContentType=text%2Fhtml&Version=2006-03-08&Page=1&ResponseGroup=ItemAttributes,Images,Offers&Style=' + xslt + '" scrolling="no" marginwidth="0" marginheight="0" frameborder="0" height="175"></iframe>\n');
   }
   

   } return false; }
2. 次に、/tmpl/cms/edit_entry.tmpl 583 と 642 行目あたりに以下のコードをそれぞれ追加（通常のエントリー書き込み部分と「続きを読む」用に、2ヶ所修正が必要）

       write('<img title="<MT_TRANS phrase="Quote">" onclick="return formatStr(document.entry_form.text, \'blockquote\')" src="<TMPL_VAR NAME=STATIC_URI>images/formatting-icons/quote.gif" alt="<MT_TRANS phrase="Quote">" width="26" height="19" />');
       <strong>write('<a title="<MT_TRANS phrase="AmazonLink">" href="#" onclick="return AmazonLink(document.entry_form.text)"><img src="<TMPL_VAR NAME=STATIC_URI>images/amazon.gif" alt="<MT_TRANS phrase="AmazonLink">" width="26" height="19" /></a>');</strong>
   

       write('<img title="<MT_TRANS phrase="Quote">" onclick="return formatStr(document.entry_form.text_more, \'blockquote\')" src="<TMPL_VAR NAME=STATIC_URI>images/formatting-icons/quote.gif" alt="<MT_TRANS phrase="Quote">" width="26" height="19" />');
       write('<a title="<MT_TRANS phrase="AmazonLink">" href="#" onclick="return AmazonLink(document.entry_form.text_more)"><img src="<TMPL_VAR NAME=STATIC_URI>images/amazon.gif" alt="<MT_TRANS phrase="AmazonLink">" width="26" height="19" /></a>');
   

3. 最後に、/tmpl/cms/bm_entry.tmpl 334 と 373 行目あたりに以下のコードをそれぞれ追加（同様に通常のエントリー書き込み部分と「続きを読む」用に、2ヶ所修正が必要）

       write('<a title="<MT_TRANS phrase="Quote">" href="#" onclick="return formatStr(document.entry_form.text, \'blockquote\')"><img src="<TMPL_VAR NAME=STATIC_URI>images/html-quote.gif" alt="<MT_TRANS phrase="Quote">" width="22" height="16" /></a>');
   

   write('<a title="<MT_TRANS phrase="AmazonLink">" href="#" onclick="return AmazonLink(document.entry_form.text)">images/amazon.gif" alt="" width="26" height="19" />');

       write('<a title="<MT_TRANS phrase="Quote">" href="#" onclick="return formatStr(document.entry_form.text_more, \'blockquote\')"><img src="<TMPL_VAR NAME=STATIC_URI>images/html-quote.gif" alt="<MT_TRANS phrase="Quote">" width="22" height="16" /></a>');
       <strong>write('<a title="<MT_TRANS phrase="AmazonLink">" href="#" onclick="return AmazonLink(document.entry_form.text_more)"><img src="<TMPL_VAR NAME=STATIC_URI>images/amazon.gif" alt="<MT_TRANS phrase="AmazonLink">" width="26" height="19" /></a>');</strong>
   

Updated: 2007/04/21
Created: 2007/07/01

「Amazon アソシエイトで、テンプレート (XSLT) を使って商品情報や画像を表示する」 ためのカラクリはどうなっているのだろうか？

シーケンス図を描いてみたので、参考にしてみて欲しい。

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

REST とは、REpresentational State Transfer の略で、クライアントが HTTP の GET または POST でリクエストした内容を、サーバ通常の HTML ページの代わりに XML ドキュメントで返すもののことである。つまりは SOAP を使わなくてもサーバからクライアントがデータを受信するようなもので、従来の HTTP の Request - Response のスキームは何ひとつ変わらない。なので決して難しいことはない。

アマゾン・アソシエイトで、商品の画像だけ表示する方法は述べた通りだが、現在の価格を表示したり、「24時間以内に発送可能」 などの在庫状況を表示したりするにはどうしたらいいのだろう？たとえば、以下のように表示したい場合である。

必要な情報・手順としては以下の通りである。

1. アマゾン・アソシエイトの ID を取得する。
2. Amazon Web サービスの Access Key ID を取得する。
3. XSLT を用意する。
4. 商品リンクの URL を作成する。
5. リンクを自分のサイトに貼り付ける。

まず、XSLT を作成し、自分のサイトのどこか（たとえば、http://perltips.twinkle.cc/amazon_price.xsl）に保存しておく。

あとは、以下の URL からアクセスするだけである。

4534033427/twinklexxx-22/ref=nosim/" target="_blank"> 4534033427.09._SCMZZZZZZZ_.jpg" border="0" alt="4534033427" />

4534033427/twinklexxx-22/ref=nosim/" target="_blank">試験に受かる超効率勉強法 井藤 公量 日本実業出版社 2002-01 <iframe scrolling="no" frameborder="0" width="200" height="40" hspace="0" vspace="0" marginheight="0" marginwidth="0" src="http://xml-jp.amznxslt.com/onca/xml?Service=AWSECommerceService&AWSAccessKeyId=<font color="blue"> 152ZP71KPB47XM09CS02</font>&AssociateTag=<font color="blue">twinklexxx-22</font>&Operation=ItemLookup&IdType=ASIN&ContentType=text/html&Version=2006-03-08&Page=1&ResponseGroup=Offers&ItemId=<font color="blue">4534033427</font>&Style=<font color="blue">http://perltips.twinkle.cc/amazon_price.xsl</font>"></iframe> 4534033427/twinklexxx-22/ref=nosim/" target="_blank">Amazonで詳しく見る

この中で、REST として AWS (Amazon Web Services) に渡す重要なパラメータは以下の通り。青字は、自分の環境に合わせて変更する部分である。

• Operation=ItemLookup
• IdType=ASIN
• ContentType=text/html
• Version=2006-03-08
• Page=1
• ResponseGroup=Offers
• AWSAccessKeyId=152ZP71KPB47XM09CS02
• AssociateTag=twinklexxx-22
• Style=http://perltips.twinkle.cc/amazon_price.xsl
• ItemId=4534033427

ネットサーフィン（死語？）をしていたある日、アマゾンアソシエイトにリンクしている商品画像で、ほかの余分な情報が一切なく、画像だけでリンクしているものがあった。今まで私はアマゾン・アソシエイトのサイト内にあるリンク作成の機能を使ってそこから生成される HTML のインラインフレーム (iframe) を自サイトに貼り付けていたのだが、これだとデザイン上の自由度があまりなかった。たとえば純粋に商品画像だけ表示する場合である（以下参照）。

実際に両画像をクリックして比べてみていただければわかるのだが、アソシエイトで作成した左側のデフォルトのものはアマゾンであまりなじみのないページに飛ばされる。その一方で、右側の画像をクリックすると、いつものアマゾンのページにアクセスできる。この違いは何なんだ？

右側のようにする仕様は amazon.com の、Amazon Web Services (AWS) のどこに書いてあるのか教えて欲しいくらい（AWS のサイト、まじでわかりづらいと思いませんか？？？→答えはここです。）なのだが、世にあるいろいろなサイトの例を見ていて、右側の方は以下のようにすればいいことがわかった。右側の方が画像が大きく表示できるので、商品画像だけを表示したい場合は以下のようにすればよいだろう。

4774122955/twinklexxx-22/ref=nosim" target="_blank"> 4774122955.09.MZZZZZZZ.jpg" alt="Web+DB press (特別総集編)" border="0" width="113" height="160" />

青字の部分が変更する部分である。ASIN とは、アマゾンが独自に割り振っている商品コードのことで、上の例でいうと赤字の 4774122955 の部分がそれにあたる。ここはそれぞれの商品ごとに変える部分である。

その他、twinklexxx-22 の部分は、自分のアソシエイト ID に変更して欲しい。

ちなみに、

が、より一般化された URL ということになるだろう。最後に ref=nosim とすると、紹介料率が 3% から 5% にアップするらしい。