Amazonの画像置換 #2

Posted at 2004-05-30T05:53:00+09:00 in Coding

以前書いたAmazonの画像置換というエントリででっち上げた、無理やり09を01に置換して表示してみるJavaScriptには「09で類推できるURLと01で類推できるURLのどちらにも画像がなかった場合はどうするのよ？」という問題がありました(てか、無限ループします)。JavaScriptのコードを少し追加すれば、「両方ともなかった場合は無いよ画像を返す」ということが実現できたので、エントリにしてみる。

とりあえずコード(把握しやすいように改行つけてますが、実際には一行でガッと解た方が良いと思います)。

<img src="http://images-jp.amazon.com/images/P/XXXXXXXXXX.09.MZZZZZZZ.jpg"
 onload="if (this.width=='1' && this.src.match(/\.01\./)) {
   this.src='/images/music-no-image.png';
 } else if (this.width=='1') {
   this.src=this.src.replace('.09.','.01.');
 }" />

imgのsrcにまず09で類推した画像のURLを入れます。もし、この画像のURLが幅1pxの画像を返した場合は、01で類推される画像のURLに置き換わります(else ifの方)。するとonloadイベントが再び起きます。もし、01で類推される画像のURLも幅1pxの画像を返した場合は、画像が無いよ画像(ここでは/images/no-image.png)に置き換わるというわけ。

うむ。完璧？

追記

異様にわかりにくそうなので例を挙げてみる。

Led ZeppelinのHow the West Was WonのASINコードは「B0000CDLC8」です。これから類推される画像のURLは、

http://images-jp.amazon.com/images/P/B0000CDLC8.09.MZZZZZZZ.jpg

または、

http://images-jp.amazon.com/images/P/B0000CDLC8.09.MZZZZZZZ.jpg

となります。が、双方共に幅1pxの画像を返します(つまり画像は無いということ)。そこで、上記のコードに従ってimg要素を記述する(詳細はHTMLソースを参照)と、このように画像が無いよ画像(この言い方けっこう気に入った)が出てくると。

OK？

追記

Bookmarkletも作ってみた。ベースにしたのはmiyagawaさんのAmazon bookmarkletです。タイトルの替わりに画像という感じのもの。Firefoxでは動きました。これ以上は確認するのメンドウ。hail2unet-22を自分のアソシエイトIDに書き換えて利用してください。

Bookmarklet: このアイテムに画像でリンク (Amazonアソシエイト)

追記

以下のようなコードを書いた外部JavaScriptファイルを読み込んでおけば、もっとすっきりとしたHTMLになるかも(ちゃんとは試してないですので多分)。

function replaceImage(img) {
  if (img.width == '1' && img.src.match(/\.01\./)) {
    img.src = '/images/music-no-image.png';
  } else if (img.width == '1') {
    img.src = img.src.replace('.09.','.01.');
  }
}

img要素は以下のように記述することになります。

<img src="http://images-jp.amazon.com/images/P/XXXXXXXXXX.09.MZZZZZZZ.jpg" onload="replaceImage(this)" />

すっきり。

追記ばっか。