A Day in the Life

他の鯖で勝手にAjaxしてユーザビリティの向上を考える

Ajaxを有益に使うにはちまちまちーさいギミックとして使うのが今のところ一番妥当そう。で、ウェブサービスでここでこういう風にAjax使ってれば便利そうなのになー、って思うこともしばしば。
そこでbookmarkletでxmlhttprequestを利用し、無理矢理Ajax組み込んでみてプロトタイプ作ってみるといいかもしんない、つーことでやってみた。こないだのbookmarletの文字数制限を取り払うアレで結構楽に作れそうだし。
ターゲットにしたのははてなキーワードの投票機能。いちいちリロードされなくてもAjax使える環境ならそこの部分だけ動的でもよさそー。
最初はIEとFirefox対応のつもりでコード書いてたんだけどなぜかIEだとstr.match(regexp)だとマッチするのにstr.replace(regexp,'foo')だと置換されないという現象に悩まされてIEはおいといてFirefoxのみ対応*1。とあるURLの環境下なら自動でuser JavaScriptを実行可能なextension、greasemonkeyにも対応してみたり。bookmarkletとして呼び出すには

javascript:(function(){var s=document.createElement(%22script%22);s.charset=%22UTF-8%22;s.src=%22http://gorou.zapto.org/js/dhatena_keyword/keyword_vote_ajax.user.js%22;document.body.appendChild(s)})();

を。greasemonkeyで利用するには

http://gorou.zapto.org/js/dhatena_keyword/keyword_vote_ajax.user.js

を登録すればOK。そしてはてなダイアリの適当なキーワードページ(例:しなもん)でbookmarkletを実行するとAjaxな動作をする投票フォームのできあがり。実際にラジオボックスをチェックして投票すると非同期で通信(通信中はフォームエリアに枠線が現れる)し、通信が完了すると投票結果が動的にロードされる。快適快適。オフィシャルでもほとんどのブラウザに対応したAjaxな投票システム実装してくれないかなぁー。実装コスト考えると割にあわなそうだけど、はてなアイデアで「こうゆうインターフェイスになると使い勝手が良くなるので実装して欲しい」つーのをbookmarkletで実際に実装してデモするとひょっとしたら機能として付けてくれるかも!じゃう゛ぁすくりぷたーな人はただ要望出すのじゃなくてこういう形で提案するのも面白いかもね。
しかし実際に外部の.jsを参照するbookmarkletを作ってみて、自分の管理外のJavaScriptの実行って怖いなー*2とあらためて感じた。たとえば俺が悪意のあるユーザだとしたら、途中で.jsファイルを書き換えてはてなで使われてるcookieをどっかに送信してなりすましログインする、つーこともできちゃうもんなぁ。またいくら俺に信頼があったとしても悪意の第三者によるDNS書き換えに対処できなかったりするしなー、、、。

*1:そして大変泥臭いコードに…

*2:主にcookieの処理。このスクリプトではPOSTする時に認証のためdocument.cookieの内容をはてなへ送信している

記事の一覧 >