Ajax 第二弾 流れるはてなブックマーク
流れるはてなブックマーク(http://sshi.s57.xrea.com/ajax/hatena.html)。
はてなブックマークを眺めるAjaxを作ってみた。はてなブックマークに登録されたURL情報が流れていくのを眺められます。一応、カテゴリーとキーワードで絞りこむことが可能。最初はちょっともたつくけど、あとは非同期にデータを取得しているので、そこそこスムーズに流れるはず。
Firefox,IE,operaで動作確認済み。XMLHttpRequestが使えなければ、IFRAMEを使うようにしてあるので、operaでも動作します。でもたまにopera固まります。ごめんなさい。Firefox推奨。
うーん、今、もう一度試してみたら、絞り込みはFirefoxじゃないと上手く動作しないようだ。DOMの扱い方、間違えてるかな。というわけで、やっぱりFirefox推奨。
仕組みはCGIとJavascriptのハイブリッドで、CGI側に蓄えたはてなブックマーク情報をJSONにした上で、XMLHttpRequestを使ってブラウザと通信してます。xrea上のデータをばかすか太らせる勇気もないので、CGI側のデータ更新はしてないです。とりあえず昨日、今日の2000件ほどのみ。でもまだ、ちゃんとJSONを作れていないようで、たまにJSON読みこみエラーになっちゃいます。愛敬愛敬。
ブラウザ上での表示も、工夫すればもっと変わったこと(本当にスムーズにスクロールさせるとか)ができるはずだけど、とりあえずここまで。誰か手を加えてみませんか？
クライアント側で使っている、xmlhttprequest.jsはAjaxでの通信を受けもつモジュール。ブラウザによってXMLHttpRequestかIFRAMEを切りかえて通信に使います。http://ma.la/mirrorman/wiki.cgi/IFRAMEHttpRequest で公開されているものを加工して作りました。あ、でもIFRAMEでのPOSTのところはややこしそうだったので、けずっちゃいました。IFRAME使う場合は、GETしかできません。加工にあたっては、http://www.interq.or.jp/student/exeal/dss/ejs/を参考にオブジェクト指向的にしてみました。貴重な情報を公開されているお二人に感謝。
