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でガンガン作れちゃいますよ?とかそういう話でした。

追記

SearchIndexBlendedにして、なんとなく全体から検索できるようにしたつもり。ていうかBlendedダメダメすぎてヤバイ。他にもハッシュにクエリをプットしたり、HTMLを読み込んだ時にハッシュに何か文字列が指定されていたら自動的にその検索を実行したりするようにとか。XSLTスタイルシートもBlended用に書き換えてみたりもしました。JSONの出力の仕方は、アーティスト(Artist)とか著者(Author)とかその他諸々の情報をいちいち考えるのが面倒なので、見つかった重要そうな情報を添え字なしでDetailsというリストに放り込んでみました。ちょっとずるい感じ。

追記 #2

Blendedはダメすぎるのでストアごとに検索できるようにしました。そのついでにlocation.hashにクエリを保存するようにして、ハッシュ付きでHTMLにアクセスがあった場合は検索を実行するようにとか。なので、

  • 和書から"Perl"を検索
  • エレクトロニクスから"iPod"を検索

といったように検索結果をブックマークできます。