[tips] Amazon の商品画像を入れ替える
- 2007-08-02T14:30 追記：
- 本スクリプトは、ここ最近 Amazon を通じて登録した商品画像に適用されない不具合があります。今後の対応については、Amazon の商品画像差し替えについてを参照下さい。
sb で『オススメ商品紹介』の機能を使ってアマゾンアソシエイトのリンクを挿入すると、たまに商品の見本画像がないものがあります。この場合、商品画像は自動的に 1px×1px の透明 gif 画像になって配信されますが、これが不都合な場合があります。例えば私などはリンクを貼る場合に画像しか使わないので、書影やジャケ写がないとクリックする場所が見えなくなってしまいます。そこで、それを回避するためのスクリプトを書いてみました。…といっても、Amazon Web Service の Discussion Board に載っていたサンプルと殆ど違わないですが。てか、開発者向け掲示板にそんなもん貼っても、本当に欲しい人には届かないような。正直、影つきとかどうでもいいので『No Image』画像を選べるようにしてほしいと思うのは私だけでしょうかね…。
閑話休題。これは sb のプラグインではなくただの JavaScript になりますので、tips ということで。お望みなら sb 以外でも使えます。
まず、以下のようなスクリプトファイルを作成します。
- amazon.js:
-
function amazonNoImg(imgSrc) { var imgs = this.document.images; for (var i = 0; i < imgs.length; i++) { if ( imgs[i].src.match('http://images-[a-z]+.amazon.com/') && imgs[i].width == 1 && imgs[i].height == 1 ) { imgs[i].src = imgSrc; } } } amazonNoImg('画像の URI');
画像の URI
にはご自分の好きな『No Image』用画像の URI を入れます。なお、画像 URI は http で始まる絶対 URI 指定にした方がトラブルの心配をしなくてすみます。また、シングルクオート（'）で囲むのを忘れないで下さい。
こうしてできた amazon.js をサーバの好きなところにアップロードします。これは sb のファイルアップロード
メニューではなく、FTP 等のアップロードツールで行って下さい。
アップロードした後は、テンプレートの </body> タグの前あたりに以下のスクリプトを記述します。
<script type="text/javascript" src="amazon.js の URI"></script>
amazon.js の URI も http で始まるものにした方がトラブル予防になるでしょう。
- comments (14)
- trackback (9) ⇒ http://distro.sweet-smile.org/tb.cgi/22
コメント（日付順）
初めまして。
何度かsbのカスタマイズにてお世話になっていました。
今回初めて書き込みさせていただきます。
以前からアマゾンの画像無しには残念な思いをしておりました。
以前パティオにも質問をして、回答がつかず諦めていたところでした。
が、こちらのエントリを拝見しまして、非常に感動しております。
管理人様に大感謝です！！
本当に、本当に嬉しいです。ありがとうございます！！
ありがたくお借りして参ります。大切に使わせて頂きます。
本当にありがとうございましたm(__)m
私も非常に欲しかった機能でしたので
すごくすごく助かります。
うちのブログにも使わせていただきます。
こんな素敵なスクリプトを作っていただき
ありがとうございました！
いつも利用させていただいております。
今回のこのScriptも、前々から気になっていたことでしたので
さっそく利用させていただいたのですが、
なぜか「BLOG PET（こうさぎ）」のScriptに反応するのか、
該当FLASHの下に「no image」の画像が出てしまいます。
回避作があるようでしたら、ご教授いただきたいのですが･･･
その他は問題なく動きます。
（JUGEMカスタマイズ講座さんの「"続きを読む"を隠す」Scriptを
使用している場合、開くとが消えたりしますが…
大きな問題ではないかな…と。）
すみません。自己解決してしまいました。
FLASHを折り畳んでいたのですが、
それをやめたら「no image」は消えました。
お騒がせしましたm(__)m
コメントいただき、すっ飛んできました！
早速書き換えましたら、キレイさっぱり。
ありがとうございました。
なんだかんだと、いろいろあるもんなんですねー。
勉強になりました。
こんにちは、初めまして。
今日、sbに移行して、アマゾンの画像無しに
対応できるスクリプトを発見し、早速使わせて頂いたのですが
何度やってもあらかじめ用意したNo imageの画像が出てくれません。
何度も見直して確認したのですがどこが間違っているのか
分かりません。
amazon.jsファイルはこうなっております。
function amazonNoImg(imgSrc) {
var imgs = this.document.images;
for (var i = 0; i < imgs.length; i++) {
if ( imgs[i].src.match('http://images-[a-z]+.amazon.com/') && imgs[i].width == 1 && imgs[i].height == 1 ){
imgs[i].src = imgSrc;
}
}
}
amazonNoImg('http://everfree.vivian.jp/hry3.gif');
おかしい箇所はありますでしょうか？
お手数お掛けしますがご教授願います。
☆ haruki さま
スクリプトの記述自体はおかしくありませんが、サイトを訪問して script タグの src 属性に書かれたアドレスをブラウザで直接表示すると、スクリプトファイルが壊れているのが見えます。
どうやらリッチテキスト形式で保存されているようですね。
JavaScript のファイルはプレーンなテキスト形式で保存しなければ動作しません。
ふうこさん
ご丁寧に有難うございます。
確かにamazon.jsをリッチテキストで保存していました。
ワードパットを使ってファイルを作ったのですが
拡張子がjsのファイルをプレーンなテキスト形式で
保存する方法が良く分からないのですが…。
初心者ですみませんがもう少しご教授して頂けると
幸いです。
☆ haruki さま
ワードパッドではなくメモ帳を使えばよいと思います。
後、個別のツールに関する質問はなるべく避けて頂けると助かります。
今回はついででお答えしましたが、私はそもそも Mac 使いで Windows のアプリケーションには明るくないですし、皆さんの個別の環境に全て対応することはできませんので…。
ふうこさま
度々申し訳ありませんでした。
無事に設置することが出来ました。
今後このようなことが無いよう、気を付けたいと
思います。本当に失礼しましたそして有難うございました。
ふうこさま
はじめまして 便利なプラグイン重宝しております。
以前より使わせて頂いていた、Amazonの商品画像入れ替えが先日より一部できなくなっているようです。
もし解決方法などが有ればアドバイス頂けないでしょうか？
☆ しほ さま
こちらではその現象は確認できていません。
特に、この tips は JavaScript を利用しているため、ブラウザの変更やテンプレートの変更で問題が発生する可能性もあります。
いずれにしても実際に問題が発生している環境をご提示頂かない限りは何もアドバイスできかねます。
申し訳ございません アドレスはこちらです
http://kaworry.yh.land.to/ma/
代替画像が表示されるものとそうでないものがある状態です。
他のテンプレートでも同様でした。
ブラウザはIE7、Firefox、Operaいずれも同じように表示されていないものは表示されていません。
☆ しほ さま
確認しましたが、画像が表示されていないところはそもそも img タグの src 属性に何も指定されていません。
こちらで仮に登録をしてみましたが、何故か Amazon から画像のアドレスが発行されていないようです。
このスクリプトは src 属性に指定されたアドレスが Amazon のものの場合にのみ処理をするので、src 属性が空だと代替画像が表示できません。
src 属性が空のものに処理をするように追加することも不可能ではないですが、画像が Amazon のものかどうかを判定することができないと誤動作する可能性があるので、まずは何故画像アドレスが発行されないかについて調査したいと思います。