javascript Archive

前エントリーに引き続き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のアニメーションを設定しています（とても無駄な感じが・・・、アドバイスください ； ；）。

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

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

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

昨日Google AJAX Feed APIに登録したので、早速使ってみました。
サンプルはこちら

APIドキュメントのサンプルを少し変更しただけで、javascriptだけでデータを取得し表示することができました。

ただ、上のサンプルだけでは味気ないのでTween.jsを利用したサンプルも作ってみました。

Tween.jsとはactionscriptのTweenクラスに似せた、インターフェースでDOM操作にアニメーションを着けられるjavascriptライブラリーです。Tweenの動作サンプル

　

はてなホットエントリーをTweenで表示
ソースはこちら

google.load("feeds", "1");

function initialize() {
   var feed = new google.feeds.Feed("http://b.hatena.ne.jp/hotentry.rss");
   feed.setNumEntries(30);

   function addhatenaEntry(ddiv, url) {
      return function(){
         ddiv.innerHTML += '&amp;amp;amp;amp;nbsp;<a href=http://b.hatena.ne.jp/entry/'+ url + ' target="_blank"><img src=http
://b.hatena.ne.jp/entry/image/small/' + url +' border="0"></a>';
      };
   }

   feed.load(function(result) {
      if (!result.error) {
         var objBody = document.getElementsByTagName("body").item(0);
         var yseq1 =  new Sequence();

         for (var i = 0; i < result.feed.entries.length; i++) {
            var entry = result.feed.entries[i];
            var ele = document.createElement('div');
            ele.id = 'h'+(i+1);
            ele.style.backgroundColor = (i+1)%2 ? "d8bfd8" : "ffffff";
            objBody.appendChild(ele);
            var t = new TextTween(ele,
                           'innerHTML',
                           '<a href='+ entry.link +'>'+ entry.title +'</a>&amp;amp;amp;amp;nbsp;&amp;amp;amp;amp;nbsp;<font color="#353535"><small>' + entry.publishedDate +'</small></font>',
                           Tween.strongEaseOut,
                           2
                           );
            t.onMotionFinished = addhatenaEntry(ele, entry.link);
            yseq1.addChild(t);
         }
      }

      yseq1.start();

   });
}

google.setOnLoadCallback(initialize);

Tween.jsはSequence.jsが提供している、Sequence()を利用することによってアニメーションをキューに追加して実行することができます。
このソースでは、for文のエントリ毎にtextのtweenを設定していき、全要素をキューにため操作が終わった後に実行しています。

エントリ数を表示する部分はonMotionFinished(アニメーション終了後に実行される)
として関数をセットしました。(TextTweenにimgタグも書き出そうとすると、サイズの関係かアニメーションがちらつくためNGにした)

次回は別のAPIで何か作ろうと思います。