LabMemo

CSVやRSSなど、どこかのデータソースを上手に利用してマッシュアップをしたいと考えているなら、YQLとgetJSON()の組みあわせが、なんとも素敵すぎるくらいにシンプルに物事を解決してくれる。

XMLをそのまま力技でparseしても良いのだろうけど。しかし実際には必要ないデータをクライアント側へ送って帯域を無駄にしてしまうのはやはりエレガントではない。どこかでJSONに畳み込んで非同期でクライアント側へ投げるのが、最低限の今どきのお作法なのだろうと思う。ならば自らのサーバサイドでLLを使ってXMLからJSONへポロリと吐き出そう、と、短絡的に考えてしまうのも悪くないが、なんだか3年前に戻ったようなDéjà vuを覚えなくもないし、せっかくだからもうひとひねりしてみたいと思うのが人情というものだろう。

すこし前に、IBMのdeveloperWorks JapanにJSONP、jQuery、Yahoo! Query Language を使ってREST クエリを使ってマッシュアップを作成すると言うエントリが掲載されていた。それを思い出し、参考にしてYQL（Yahoo! Query Language）を使ってJSONP(JSON with Padding)を生成し、クロスドメインなgetJSON()で遊んでみた。

このブログのトップページの中間カラムにある「Top news@sfgate.com」の内容は、ページがロードされた時点での最新のsfgate.comのトップニュース内容のRSSをYQL側で取り込み、ヘッドラインと記事へのURLという必要な情報だけをもったJSONPへ畳み込んでjQueryのgetJSON()で読み込んでエレメントの追加したもの。

コードは以下のとおり：

var yqlUrl4="http://query.yahooapis.com/v1/public/yql?q=select%20title%2C%20link%20from%20rss%20where%20url%3D%22http%3A%2F%2Fwww.sfgate.com%2Frss%2Ffeeds%2Fnews.xml%22&format=json&callback=?";

jQuery.getJSON(yqlUrl4, function(data){
jQuery.each(data.query.results.item, function(index, item){
$("＜a href='" + item.link + "' target=\"_blank\"/＞")
.html(item.title) .appendTo($('#sfgate'))
.wrap('＜li/＞');
});
});


コード中にもあるように、getJSONで得た値を各々「sfgate」という識別子を持つエレメント（ここではul）に追加している。文字列へのタグの修飾（ここではliとa）も見てのとおり。YQLが生成するRESTクエリはけっして美しいとは言えないが、YQLの書きやすさと柔軟さを考えれば、差し引きしてもじゅうぶんにおつりがくる。このRESTクエリの生成に必要なYQLは以下のとおり。

select title, link from rss where url=”http://www.sfgate.com/rss/feeds/news.xml”

YQLとgetJSON()の組みあわせれは、マッシュアップのアイデアを形にするために必要な時間を大幅に短縮できる。ちょと素敵すぎるくらいに自分好みだ。

P.S.
ちなみにjQueryのドキュメントの例にあるとおり、Flickrのようにデータフォーマット変換用APIオプションが用意されている場合はYQLを通す必要はない。便利になった反面、このあたりのチェックを怠ると「気が利いて、間が抜けてる」状態に陥りかねない。