はじめてのYUI3 > YQLと連携してみる

YUI3を使って、YQLと連携してみる。
JSONPと同様にプラグインが存在するので、
そちらをロードして使う。

デモページはこちら。

コードは以下。

// yqlとnodeを使う
YUI().use('yql', "node", function(Y) {
    // flickrから"Cat"を含む画像を最大10件検索する。検索結果はrという変数に格納する
    var q1 = new Y.yql('select * from flickr.photos.search where text="Cat" limit 10', function (r){
        var content = "";
        // 画像のURLを作成してcontent変数に文字列として連結
        for(var i=0;i<r.query.count;i++){
            var p = r.query.results.photo[i];
            content += '<img src="http://farm'+p.farm+'.static.flickr.com/'+p.server+'/'+p.id+'_'+p.secret+'_m.jpg"><br>';
        }
        // idがflickrのタグ内にcontent変数の文字列をHTMLとして展開する
        Y.one("#flickr").setContent(content);
    });
});

Flickrから"Cat"という文字を含む画像を最大10件取得するYQL。
YQLの部分を変えれば、任意の結果が取得できる。
フォームも設置して、動的に画像検索できるようにしようとしたが、
ボタンなどのクリックイベントを取得する方法がまだわからなかったので、
とりあえず、べた書きで今回はよしとしました。

これからそこら辺のイベントまわりを調査します。
何か分かったらまた更新します。