flickr api jsonとTween.js,YUI libraryで画像検索

前エントリーに引き続きjavascriptのみでflickr apiを利用して画像検索を作ってみました。
　
前エントリーで紹介したGoogle AJAX Feed APIを利用してgoogle経由でflickrのデータを引っ張って来ようと思っていたのですが、
flickrでは元々json形式でのAPIを提供していたので素直にそちらを利用させてもらいました。
　
flickr　APIのjsonフォーマットでは、画像パスの生成は取得したデータの組み合わせで作らなければならないので注意が必要です。
javascriptでのデータの取得はこちらを参考にしました。（そのまんま流用しましたが＾＾；）
　

データの出力には前エントリー同様にTween.jsと今回新たにYUI libraryを利用しました。
YUI libraryとは米のYahooが提供しているjavascriptライブラリーで名前の通りUIに特化していて、様々な場面を想定したライブラリーを提供してくれています。
今回は表示した画像のドラッグアンドドロップがしたかったので、YUI library　: Drag & Dropを利用しました。

　
flickr api　json と Tween.js,YUI library で画像検索
ソースはこちら

function photo_search ( param ) {
	param.api_key  = 'ほげ';
	param.method   = 'flickr.photos.search';
	param.per_page = 30;
	param.sort     = 'date-posted-desc';
	param.format   = 'json';
	param.jsoncallback = 'jsonFlickrApi';

	// APIリクエストURLの生成(GETメソッド)
	var url = 'http://www.flickr.com/services/rest/?'+
	obj2query( param );

	// script 要素の発行
	var script  = document.createElement( 'script' );
	script.type = 'text/javascript';
	script.src  = url;
	document.body.appendChild( script );
};

// 現在の表示内容をクリアする
function remove_children ( id ) {
	var div = document.getElementById( id );
	while ( div.firstChild ) {
		div.removeChild( div.lastChild );
	}
};

// オブジェクトからクエリー文字列を生成する関数
function obj2query ( obj ) {
	var list = [];
	for( var key in obj ) {
		var k = encodeURIComponent(key);
		var v = encodeURIComponent(obj[key]);
		list[list.length] = k+'='+v;
	}
	var query = list.join( '&' );
	return query;
}

// Flickr検索終了後のコールバック関数
function jsonFlickrApi ( data ) {
	// データが取得できているかチェック
	if ( ! data ) return;
	if ( ! data.photos ) return;
	var list = data.photos.photo;
	if ( ! list ) return;
	if ( ! list.length ) return;

	// 現在の表示内容をクリアする
	remove_children( 'photos_here' );

	// 各画像を表示する
	// 親divの設定
	var divm = document.getElementById('photos_here');
	divm.style.position = 'relative';
	var img_size = 75;
	var yseq1 =  new Sequence();
	var s = new browser_w(img_size);
	var divls = new Array();
	var divls_s = new Array();
	var img = new Array();
	var img_s = new Array();
	var dd = new Array();
	for( var i = 0; i < list.length; i++ ) {
		var photo = list[i];
		// 各子divの生成
		divls[i] = document.createElement('div');
		divls[i].id = 'f'+(i+1);
		divls_s[i] = divls[i].style;
		divls_s[i].position = 'absolute';
		divls_s[i].top = Math.floor(Math.random()*s.height);
		divls_s[i].left = Math.floor(Math.random()*s.width);
		divls_s[i].width = img_size+'px';
		divls_s[i].height = img_size+'px';
		dd[i] = new YAHOO.util.DD(divls[i].id);

		// img 要素の生成
		img[i] = document.createElement('img');
		img[i].src = 'http://static.flickr.com/'+photo.server+
				'/'+photo.id+'_'+photo.secret+'_s.jpg';
		img_s[i] = img[i].style;
		img_s[i].border = '0';
		img_s[i].cursor = 'pointer';
		divls[i].appendChild(img[i]);
		divm.appendChild(divls[i]);

		var tw = new Tween(img_s[i], 'width' , Tween.elasticEaseOut, 0, 100, 1,'%');
		yseq1.addChild(tw);

	}

	yseq1.start();
}

var browser_w = function(margin){
	if (window.innerHeight){
		this.width = (window.innerWidth - margin);
		this.height = (window.innerHeight - margin);
	}else if(document.documentElement &amp;amp;amp;amp;amp;&amp;amp;amp;amp;amp; document.documentElement.clientHeight){
		this.width = (document.documentElement.clientWidth - margin);
		this.height = (document.documentElement.clientHeight - margin);
	}else if(document.body.clientHeight){
		this.width = (document.body.clientWidth - margin);
		this.height = (document.body.clientHeight - margin);
	}else{
		this.width = 500;
		this.height = 500
	}
}

画像の要素は全てDOMの操作で生成し、その度にYUIのドラッグアンドドロップ、Tween.jsのアニメーションを設定しています（とても無駄な感じが・・・、アドバイスください ； ；）。

画像の表示位置はランダムにするために、ブラウザの縦横を計算し表示領域が大きくならないようにしています。

入力フィールドには検索を促すようにこちらのスクリプトを利用させていただきました。

さて次は何をつくろうかな。