JSONでBiddersインクリメンタル検索、をブログに貼ってみる

前回皆様方への御礼を書いてからまたずいぶん経ってしまった。BiddersMapAds配布は頓挫したわけではなく、単に時間がないだけです。すいません。

さて、JSONという技術が流行っているらしい。JSONというのはJavaScript Object Notationの略で、その名のとおり、サーバからクライアントにデータを送るときにJavaScriptのObjectの表記法で送ってあげる手法のことだ。
ここでJavaScriptのObjectの表記法とは何ぞやという話になるが、その前に、誰もが最初に覚えるであろうJavaScriptでのObjectのProperty（値や機能）の定義方法をおさらいしておきたい。色んな入門書を見ると次のような書き方が挙げられている。

var args.x=1;
var args.y=1;
var args.methodA=function() {...}

ひとつひとつ定義するから分かりやすくはあるんだろうけど、如何にも冗長だ。それとは別に、JavaScriptでは下記のようなObjectのPropertyのセット方法が準備されている。

var args={x:1, y:2}

たとえばプロパティとして関数を追加する（メソッドを追加する）場合には下記のようになる。

var args={
methodA : function() { ... },
methodB : function() { ... },
...
methodZ : function() { ... }
}

この{x:1,y:2}という表記方法こそがJSONである。但し、この形式でサーバからデータを送られただけではJavaScript内で利用することはできない。よって、例えばXMLHTTPオブジェクトでサーバから得たJSONアウトプットを下記のようにevalを使って評価してやることで初めてスクリプトにデータが受け渡されることになる。

eval ('var args=' + JSONアウトプット );

さて、ここからが本題であるが、最速インタフェース研究会さんのところで、このJSONを利用して他ドメインから動的にデータを取得する（関数をロードする）というHackが発表されていた。
一般に、JavaScriptで動的にデータを利用する際にはXMLHTTP ObjectというHTTPクライアントを利用する。非同期（Asynchronically）にXMLデータを読み込めば、所謂AJAX（Asynchornically JavaScript with XML）である。但し、XMLHTTP Objectでは同一ドメインからしかデータをロードすることができない。そこで、AJAXでAmazon Webサービスからデータを読む為には、Amazon Webサービスの吐き出すXMLを中継するプロキシ（代理人）をPerlだのPHPだのRubyだので作って自分のドメインに置いておいて、そこからデータを読む必要がある。よって、例えココログみたいにJavaScriptが使えるブログであっても、動的に外部データを読み込んで何かするというWeb2.0でRemixなHackは使えないのである。
ところが、上述の最速インタフェース研究会さんのHackにある通り、サービス側がJSONでデータを吐き出していれば、それをJavaScriptとして読み込むことで、他ドメインのデータの動的ロードが可能となるのだ。具体的には、SCRIPTタグでJSONアウトプットを「JavaScriptとして」読み込めばよい。SCRIPTタグ自体はAppendChildメソッドで動的に生成できるから、必要に応じてSCRIPTタグを増やせばよいのだ。

というわけで、これを利用して作ったのがこのブログの左サイドバーに貼り付けてある「Bidders検索」である。キーワードを入力すると、インクリメンタル検索した結果がその下にずらずらと表示されるようになっている。
当初、上述のSCRIPTタグの動的生成時にロード後に実行したいイベント（関数）をaddEventListnerメソッド（Mozilla系）或いはonLoad属性（IE）で指定するようにしていたのだが、完全にロードし終わる前にイベントに飛んでしまうようだったので、Googleサジェスト同様、関数そのものを読み込む形に変更した（うーん…）。
BiddersはJSON形式ではデータを吐き出していないが、XMLアウトプットをXSLTで変換するサービスを提供している。それを使ってもよかったが、汎用性を持たせたかったので、PEAR/XML_UnserializerでXMLアウトプットを解析し、解析結果をPEAR/JSONでJSONに直すプロキシを作って使っている。なお、PEAR/JSONは開発がStopしたくさいので、PEAR/HTML_AJAXのパッケージにあるHTML_AJAX_JSONを使ったほうがいいかもしれない。

一応Bidders MapAdsを作る過程で生まれたものなので、Biddersアフィリエイトの方であれば、「暗号化されたアフィリエイトID」と「リンクID」を入れれば貼り付け用のタグが生成されるものを作っておいた。

BWS2Blog

「暗号化されたアフィリエイトID」と「リンクID」の説明はこちらの10/27のQ&A参照。Biddersアフィリエイトへの登録はこちら。
BiddersMapAdsへのsatokotoさんの意見を採り入れ、5件に1件は私のIDが挿入されるようにした。この5件に1件というのはDrk7.jpさんのAmazon AdSenseをパクったものだが、高校の確率の問題に出てきた「5回に1度帽子を忘れる癖のあるまさお君」をいっつも思い出す。そんな奴いねーよ、ってどうでもいいな。ココログのほか、JavaScriptが使えるブログであればコードを貼り付けるだけで使えるはずだが、テストしてないので各々どういう動作をするかは不明。誰かテストしたら教えてください。なお、普通のレンタルHPスペースでもローカル環境でも動作するはずである。

他にもGoogle Map APIとも連動できるものとか作ってみたので、追って公開します。

【参考】
introducing JSON
最速インターフェース研究会：[Ajax] JSAN構想とリモートデータの取得とUserJavaScript
Hatena::Diary::naoya：prototype.js でデザインパターン
Web Design Forumのとあるスレ