このサンプルは、Yahoo! Query Language(YQL)を利用してFlickrから写真を検索して表示します。テキストボックスに検索キーを入力して[Search]ボタンをクリックすると10件の写真が表示されます。
YQL(Yahoo! Query Language)は、データベースのSQL言語のようにSELECTステートメントを利用してWebサービスが提供するデータを抽出することができます。ここでは、FlickrのDataTable(flickr.photos.search)を利用して写真を抽出します。抽出条件はSelectステートメントのwhere句で指定します。
var keyword = $('#txtKeyword').val();
var url = 'http://query.yahooapis.com/v1/public/yql?callback=?'
var sql = 'select * from flickr.photos.search where text="{keyword}" limit 10';
var params = {
q: sql.replace('{keyword}', keyword),
format: 'json'
}
$.getJSON(url, params, function(data) {
if (data.query.count == 0) return;
var photos = data.query.results.photo;
var html = '';
for (var i in photos) {
var id = photos[i].id;
var title = photos[i].title;
var server = photos[i].server;
var secret = photos[i].secret;
var temp = 'http://static.flickr.com/{server}/{id}_{secret}_s.jpg'
var src = temp.replace('{server}', server).replace('{id}', id).replace('{secret}', secret);
html += tempalte.replace('{src}', src).replace('{title}', title);
}
$('#pics').empty().html(html);
});