SIXTY-SIXとかいうの

Amazon E-Commerce Service 4.0のXSLTサービスを利用してJSONに整形するというひとつ前のエントリでのアイディアを利用した和書ストアのAmazon.co.jpを検索をするSIXTY-SIXってものを作ってみました。作ってみただけ・・・ですが、一応あまりメジャーでない感じのJavaScriptテクニックも使ったりしたのでそれの紹介も兼ねてエントリってみた。

JSONへの変換はXSLTがなんとなくわかってれば簡単です。注意するのはちゃんと値が帰ってきているかチェックしてやることくらい。前回のエントリでも言及したように、ContentTypeパラメータでtext-javascriptも指定するのも忘れずに。

問題はどうやってそのJSONに整形された検索結果を動的に(フォームに入力されたキーワードに合わせて)受け取ってやるかってことです。どうやるかというとJSONに整形されているのでscript要素で読み込んでやれば良いわけです。つまり、

var s = document.createElement("script");
s.setAttribute('type', 'text/javascript');
s.setAttribute('src', 'http://webservices.amazon.co.jp/...&Keywords=' + q);
document.body.appendChild(s);
showResults();

とまあこんな感じ。

しかし、このままではJSONに整形された結果を受け取る前に結果をHTMLとして表示する関数、showResults()が実行されてしまいます。そこで上記コードを、

var s = document.createElement("script");
s.setAttribute('type', 'text/javascript');
s.setAttribute('src', 'http://webservices.amazon.co.jp/...&Keywords=' + q);
s.addEventListener('load', showResults, true);
document.body.appendChild(s);

と、script要素のloadイベントに、結果をHTMLとして表示する関数を登録してやると、JSONに整形された結果を受け取った後にshowResults()が実行されるようになります。Firefoxでは。このテクニックはJavaScriptマイスターの人のスクリプトを見て知りました。モテメン！　モテメン！

Amazonの検索ならXSLT+JavaScriptでガンガン作れちゃいますよ？　とかそういう話でした。