« PCクラッシュに際し、高度情報化社会の問題を垣間見る(Bidders MapAdsへのコメントの御礼) | Main | Google Mapsをブログに貼ってみる、超微妙にアップグレード、あとGoogle Date Map(笑) »

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のとあるスレ

|

« PCクラッシュに際し、高度情報化社会の問題を垣間見る(Bidders MapAdsへのコメントの御礼) | Main | Google Mapsをブログに貼ってみる、超微妙にアップグレード、あとGoogle Date Map(笑) »

「WEBサービス」カテゴリの記事

「インターネット」カテゴリの記事

Comments

Две недели назад со своей женой наконец-то окончили ремонт и задумались о заказе новой мебели для спальни, в частности, такого нужного предмета интерьера как http://shkafy.com/prixogie/ - шкафы прихожие. подумали о новой покупке и осознали, что не сможем дать ответ на многочисленные вопросы, вызванные этим решением. Без опыта (пускай если и не своего), как говорится, трудно! дайте совет! какой выбрать шкаф, и какие детали посоветуете учитывать при покупке? На что нужно обратить внимание, приобретая шкаф в магазине? а, возможно, его все-таки заказать? и какие материалы и комплектующие приобрести? Для меня эти все и многие другие детали являются неразрешимой загадкой. кроме того интересны шкафы купе. в каком случае приобретение шкафа купе будет куда разумнее, нежели покупка простого шкафа? мы хотели бы услышать мнение людей, которые купили шкаф и могли бы дать дельный совет. Буду крайне благодарен за ваши рекомендации.заранее спасибо!

Posted by: seefeusepay | 2011.05.05 at 09:19 AM

I'm not sure where you're getting your information, but good topic. I needs to spend some time learning much more or understanding more. Thanks for excellent information I was looking for this info for my mission. http://www.crayonpedia.org/mw/Wrinkle_creams

Posted by: http://www.soulpeace-jhs.com | 2013.12.03 at 10:46 PM

I am really inspired along with your writing talents and also with the format on your blog. Is this a paid subject or did you customize it your self? Either way keep up the excellent high quality writing, it is rare to look a nice blog like this one these days..

Posted by: Gilberto | 2014.03.18 at 02:37 AM

I loved as much as you'll receive carried out right here. The sketch is attractive, your authored material stylish. nonetheless, you command get got an impatience over that you wish be delivering the following. unwell unquestionably come further formerly again since exactly the same nearly a lot often inside case you shield this hike.

Posted by: programa de dj | 2014.10.02 at 04:54 PM

Your style is very unique compared to other people I've read stuff from. Many thanks for posting when you have the opportunity, Guess I will just book mark this page.

Posted by: programa de dj | 2014.10.04 at 04:24 PM

Heya i am for the first time here. I came across this board and I find It really useful & it helped me out much. I hope to give something back and help others like you aided me.

Posted by: Mens Nike Air Max Skyline | 2015.01.18 at 05:41 AM

Post a comment



(Not displayed with comment.)




TrackBack

TrackBack URL for this entry:
http://app.cocolog-nifty.com/t/trackback/20589/6351334

Listed below are links to weblogs that reference JSONでBiddersインクリメンタル検索、をブログに貼ってみる:

» Google Mapsをブログに貼ってみる、超微妙にアップグレード、あとGoogle Date Map(笑) [TEDDY-G本家]
Google Maps->Blogをまたしても超微妙にアップグレード。メッセージ [Read More]

Tracked on 2005.10.13 at 10:06 AM

« PCクラッシュに際し、高度情報化社会の問題を垣間見る(Bidders MapAdsへのコメントの御礼) | Main | Google Mapsをブログに貼ってみる、超微妙にアップグレード、あとGoogle Date Map(笑) »