以前書いたAmazonの画像置換というエントリででっち上げた、無理やり09を01に置換して表示してみるJavaScriptには「09で類推できるURLと01で類推できるURLのどちらにも画像がなかった場合はどうするのよ?」という問題がありました(てか、無限ループします)。JavaScriptのコードを少し追加すれば、「両方ともなかった場合は無いよ画像を返す」ということが実現できたので、エントリにしてみる。
とりあえずコード(把握しやすいように改行つけてますが、実際には一行でガッと解た方が良いと思います)。
<img src="https://m.media-amazon.com/images/P/XXXXXXXXXX.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は、
https://m.media-amazon.com/images/P/B0000CDLC8.jpg
または、
https://m.media-amazon.com/images/P/B0000CDLC8.jpg
となります。が、双方共に幅1pxの画像を返します(つまり画像は無いということ)。そこで、上記のコードに従ってimg
要素を記述する(詳細はHTMLソースを参照)と、このように画像が無いよ画像(この言い方けっこう気に入った)が出てくると。
追記
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="https://m.media-amazon.com/images/P/XXXXXXXXXX.jpg" onload="replaceImage(this)" />
すっきり。
追記ばっか。