2005年9月7日（水）「アマゾンリンクシステム３」Tweet

　集計結果自体とは関係ない話。日記なので、日々感じたこととかはメモしておきたい。

　特に作る苦労も少ない終了番組調査の集計結果ページを作るのに何で３日もかかっていたかというと、セコくASINからアマゾンリンクを自動作成するJavaScriptを作っていたからだったり。「アマゾンリンク自動作成システムならアマゾン個別商品案内システムをこの前作ったばかりじゃないか…」と思われた某こころあたりの方、各ページを見ればわかりますが、あのアマゾン個別リンクを自動作成する仕組みとはちょっと違うものを今回作ろうとしました。

　

　アマゾン商品個別リンクといえば、アマゾン推奨で作ると、左のような縦長のIFRAMEが作成されますが、これだといっぱい貼ると重いし、画像も小さく、余計な情報も多い。

　そこで、よく見かける画像と、軽いコメントで構成されたアマゾンリンクをASINから自動生成できないものかと、悩んでいたら１日じゃできないというていたらく。

　いや、画像のアドレスはASINから導き出せることはすぐわかったし、その画像を表示させて、リンクを張るシステムは案外簡単にできた。つっかかったのは「目的とする画像がなかったとき」の処理でした。

　画像がなかったとき、アマゾンはそのURIで1x1の白い画像を返してくるので、条件として「返ってきたきた画像の横幅が１ピクセルのとき…」で処理をすれば問題ないかな？　と安易に想像してやってみたところ、Netscapeではうまくいくのに、InternetExplorerではうまくいかない。

　というかNetscapeだけ見て作っていたから、IEの問題に気づいたときにはずいぶん時間が経っていた。

　問題は、for文（複数回処理を繰り返す）で画像（のタグ）を書き、今書いた画像の大きさをそのfor文の中ですぐ見る処理にあった。

　Netscapeでは、今書いたばかりの画像情報も、すぐ拾うことができるのに対し、IEでは、そのfor文が終わったあとでないと、画像の大きさなどの情報が拾えないというトラップでした。

　Netscapeだけで見ていたときは、「どうせ1x1の画像なんだから、それをそのまま残して下に大きい画像入れちゃえ」という処理をさせていたから、「for文以降で再処理」と言われたらシステムを大幅変更するしかない状態に…。

　そしてたどり着いたのが、画像書き換える、「document.images[ImageID].src = 書き換えるURI」というやつ。これで、一度書いた画像が1x1なら、新しい画像に書き換えると言う仕組みが作れる…のですが、ここでさらに問題が。

　ここまでで作ろうとしていたのは、ただ 画像がない＞[No Image]画像に差し替え という１段の単純なものではなく、 第１候補の画像がない＞第２候補の画像をさがす＞なければ仕方がないので[No Image]画像に という２段処理のあるものでした。

　エルフェンリート７巻を例にすると、


　左側の画像（ドロップシャドウ付き）はないけど、右側の画像（影なし）ならある商品がいくつかあったので、ドロップシャドウつきがないだけで、画像なしにしてしまうのは見た目的に勿体ないな…ということでの２段処理でした。

　で、ここで発生した問題というのが、この[No Image]画像に行くまでの流れ、

　第１候補を表示する
　　＞第１候補が1x1の画像なら第２候補へ
　　　＞第２候補も1x1の画像なら[No Image]画像に

　の中にあり、さっきも書いたとおり、for文が終わるまでは画像情報は更新されないため、それぞれ別のfor文にしました。ですが、第２候補が表示されることは皆無で、第１候補が1x1だとほぼ全部が[No Image]画像になってしまう現象になりました。

　そこで、document.images.width で、各段階で認識されている画像の横幅を表示させてみたところ、「第１位候補で1pxだったやつは最後まで1px」であることがほとんどでした。…つまり、切り替わった画像の情報を取得するいとまがない内に処理が進んでいるということらしく。

　なので上手いこと画像表示タイミングが合うと表示されるという不思議な状態になりました。…これで時間的な問題であることがわかったので、ウエイトをかければ上手く動く…とまではわかったのですが、setTimeout() の使い方がよくわからず（どうやらBODY中のdocument.writeなどには使えないらしい）、setTimeout() を使うためにさらに JavaScript文を大幅修正…。

　画像書き換え関数を時間差で動かすことにより、だいたい目的の画像を表示させることに成功…したのはまたもNetscapeだけ。IEはsetTimeout()もsetInteval()も何か思うように動いてくれない…。

　そしてここであきらめ。相変わらずIEで第２候補が表示されるかどうかは運です。まぁ画像をReloadする関数をHTMLの下の方に書いたので、前よりは出る確率が上がっている感じですが…。

　微妙に報われない苦労の話でした…このスクリプトにしたせいで、Netscapeでも表示されないことがあるようになっちゃったしな…。あとIEで配列名にnameを使うとsplit()で分割できない。なら名前に使えるようにしておくなよ…と。

　おわり。ExcelやってPHPやってJavaScriptやって、かなり頭が混乱した…。特にPHPとJavaScript。文字列結合をつい「.」でやろうとしてしまってエラーが出ること数回。