del.idcio.usのJSONでブログパーツを作ってみた
けどはてなには設置不可。
なので主ブログの方に置いておく。News Handler[WEBLOG SYSTEM]
右の柱を見てみるヨロしね。
JSONのこと
最近流行のJSONとはなんじゃがねと思ってたんですけど、実際のところ、配列を内容とするJavaScriptスクリプトの形式でデータを提供するものなんですね。
こう書くと「嘘だっ！」とか言われちゃうかもしれないんですけど。
でも実際問題として、JavaScript以外の言語から使うならパーサを咬ませなきゃいけないわけで、XMLほどアレでは無いにせよ、YAMLあたりと比較して特別素晴らしい物では無さげ。XMLにしたって例えばJavaScriptなら"JKL.ParseXML"みたいな既存の素晴らしいライブラリを使えば簡単に扱える。
むしろ最大のメリットはJavaScriptのスクリプトであるが故にscriptタグで外部スクリプトとして読み込むことができる点じゃないでしょうか。
Ajaxで多くの人が躓いてるっぽい物に、XMLHttpRequestはセキュリティ上の都合で、そのjsファイルがあるドメインにしかアクセスできないという物があるわけで(例：オケラボブログ : 自分のIPを調べるbookmarklet開発失敗。)、おかげで(XMLを利用した)APIを提供している多くのWebサービスはJavaScriptのみでは扱えない。
でも、外部スクリプトなら普通に読める。なのでJSONならCGIとかを咬ませるまでもなくJavaScriptのみで、そのAPIを自由に使える。クライアントサイドで出来る事はクライアントサイドでやらせたい私としてはこれは凄く嬉しい。
(20060925追記)この辺の記述はdel.icio.usの拡張をJSON一般だと思ったが故の勘違い。後述の通り。だめじゃん。
「配列」って言ってしまったけど、実際中身は連想配列で、ただJavaScriptでは連想配列のキーをプロパティと同様に扱えるということ。array["foo"]はarray.fooでも良い、ということ。話はJSONから逸れるけど、配列に関数オブジェクトをぶち込むこともできる。Javaの国の人だった私はかなり驚いた。
っていうかJSONは普通のスクリプトなんだから、悪意があれば変なコードを忍ばせておくことだってできる。まぁ忍ばせてもJavaScriptの砂場で何をするのかって話ですけど。JSONとしては正しくないかもしれないけど、どうせJavaScriptからしか使われないと割り切ってしまえば、例えば日付にはDateオブジェクトを生で挿入というのもアリかもしれない。いや、やっぱ生は危険だしまずいか。
結局、技術的にはAjax以上に目新しくない気がするんですけど(Ajaxも実際ロストテクノロジーの発掘だったけど)、動的にJavaScriptファイルを生成するというネタは面白いし、ブラウザ相手にあれこれするにはとても便利なのでもっと流行って欲しいところ。
そういえば普通に使うならscriptタグで読み込むから同期通信だけど、例えばXMLHttpRequestを使って非同期でJSONを取得してもresponseTextをeval()にぶち込めば使える、のかな？もしかしたら使う時が来るかもしれないのでメモ。
(同日追記)
しかしXMLHttpRequestを使うとドメインの壁を越えられない罠。動的にscriptタグを付け足すのが正解らしい。そのためのライブラリも既に作った人がいるみたい。
JSON and the Dynamic Script Tag: Easy, XML-less Web Services for JavaScript
ところで↑のサンプルコードでは、読み込んだJSONに対しコールバック関数を指定している。というかこれをしなきゃ読み込んだだけで何もできない。
Firefoxの場合は動的に追加するscript要素のonload属性で読み込んだJavaScriptファイルを処理するfunctionを指定してやれば問題ない。しかし、これをクロス・ブラウザで実現するには違ったアプローチが必要になる。
JSONScriptRequest - Hail2u
そこで、JSONを呼び出す際にコールバック関数を指定するためのやり方が考えられて、JSONPなんて呼ばれてるみたいだ。Getの引数にcallback=コールバック関数名とすることで、引数にJSONオブジェクトが入れて指定した関数を呼び出した形式のJavaScriptスクリプトを吐き出してくれるという物らしい。といってもGetするときに当該文字列をつけてくれるように頼み込むわけだから、これはWebサービスの側がJSONPに対応してくれてないと使えない。
それはそうとJSON and the Dynamic Script Tag: Easy, XML-less Web Services for JavaScriptのライブラリ、コールバック関数を指定するにはURL文字列を自力で操作して引数に渡さなきゃいけない。これは煩雑。私が書くなら、第１引数でJSONのURL、第２引数にコールバック関数を渡すようにする。URLの加工の手間が省けることに加え、Firefoxのようにscriptのonloadに対応したブラウザではJSONPを使わずにイベントハンドラで呼び出させるように分岐することで、JSONP未対応でもFxでは動くようにできる。
(追記ここまで)
(20060925追記)えっと、del.icio.usでは外部スクリプトとして取得できるようにしてくれてましたけど、普通のJSONは変数名を指定しない配列、なので、取得しても使いようが無いです。
結局XMLHttpRequestを使わなきゃいけないみたい。で、それだとドメインの壁は越えられない、と。
なので、JSONPにするかdel.icio.usのように遊んでくれるかをしないと意味無しです。ヒデぇ。
SBMとdel.icio.usのこと
で、見たらdel.icio.usがJSON APIを提供してたので、del.icio.usに乗り換えたわけですよ。
以前はドリコムRSSの旧myClipを使ってたんですけど、これは再検索性が殆ど皆無。んで、はてなの垢は持ってるからはてブも一瞬試したんですけど、はてなダイアリーではてブを表示してる物を見る限り、コメントの表示が無いっぽい(これはどうやらはてなダイアリーのRSSモジュールの仕様らしい)。私はSBMブログパーツはコメントの顕示用に欲しいので、これは要件を満たさないので没でした。
調べたら2006-09-19からはてブでもJSONを提供してるみたいなんだけど、これで提供されているのは「あるページに関するブックマーク」であって「自分のブックマーク集」ではない。ので却下。
del.icio.us、サービスは英語だけど日本語でも全く問題無いので問題ないです。はてブには無いっぽい機能として、タグをグルーピングできるようです。
で、作ったブログパーツのこと。
JSONでデータを取得できると何が便利かって、巷の「RSSリーダパーツ」みたいな物と違って、作ったパーツについて普通にHTML,CSSでデザインを弄れる。なのでページのデザインと完全に整合的にできる。これ萌え。
スクリプト自体は、del.icio.usのサンプルコードを元に、アレがulだったのを、コメントを載せる分dlを使うように変えただけです。
ところで今回はdlにしたから使えなかったけど、del.icio.usのサンプルコードはfaviconをimgで表示してるけど、あれはli.style.listStyleImageでやった方が論理的に綺麗な気がしました。手元で試したけど、やっぱそっちのが好みだったし。
本当はdelicious2dl.jsという形で外部スクリプトにしてたのだけど、オケラボが使ってるbanana-milkは外からの呼び出しに制限がかかってるので使えなかった。残念。
