Amazon商品画像を表示する

Amazonアソシエイトの「個別商品リンク」で生成されるパーツだと「Amazonで買う」ボタンなどが表示されるのが、「美しくないな」と思って使わないようにしていました。
そうは言っても、やっぱり商品画像を掲載した方が見た目にもいいはず、とずっと思っていてやりたかったのですが、なかなかできないでいました。

で、やっとですが、以下の記事を参考にやってみました。

Amazon商品画像のカスタマイズ（理論編） - Shiz Labs

本当ならAmazonの公式なドキュメントを参照したいところなのですが。

とりあえず、ASINコードの調べが付けば、後は大きさの指定だけで、簡易にURLを生成して、表示も試してみるツールを書いてみた。いろいろと凝ってみてもキリがないし、実用上はこんなんで十分だろう、という事で。ちゃんと探せばもっと高機能なものはいくらでもあると思いますが。
HTMLでローカルに保存しておいて使う事にします。
Javascriptは見よう見まねで。もっとうまい書き方があるんだろうな．．．と思いつつ。

<script Language="javascript">
<!--
  function showimg(){
      var imgsize = "";
      for (i = 0; i < document.f1.imgsize.length; i++){
          if ( document.f1.imgsize[i].checked ) {
              imgsize = document.f1.imgsize[i].value;
              break;
          }
      }
      var imgsizeid = (imgsize + "ZZZZZZZZ").substr(0, 8);
      
      var imgurl = document.getElementById('baseurl').value
                   + document.getElementById('asin').value
                   + '.09.' + imgsizeid + '.jpg';
      
      document.getElementById('urldisp').innerHTML = imgurl;
      document.getElementById('imgdisp').innerHTML = '<img src="' + imgurl + '" />';
  }
--></script>
<form name="f1">
<table border="0">
<tr>
  <td align="right">Base Url：</td>
  <td><input type="text" id="baseurl" size=60 value="http://images-jp.amazon.com/images/P/"/></td>
</tr>
<tr>
  <td align="right">ASIN：</td>
  <td><input type="text" id="asin" /></td>
</tr>
<tr>
  <td align="right">画像サイズ：</td>
  <td>
    <input type="radio" name="imgsize" value="THUMB">サムネイル
    <input type="radio" name="imgsize" value="T">小
    <input type="radio" name="imgsize" value="M" checked="true">中
    <input type="radio" name="imgsize" value="L">大
  </td>
</tr>
<tr>
  <td align="right"></td>
  <td>
    <input type="submit" name="btn1" value=" 表 示 " onclick="showimg(); return false;" >
  </td>
</tr>
</table>
</form>
<div id="urldisp"></div>
<div id="imgdisp"></div>

気が向いた時には、過去記事にも商品画像を載せるように更新するかも。