POPSブログ

CreateJS FlickrAPI photos.search メソッド利用のjQuery.ajax()画像表示

330

  Category:  javascript2014/11/27 pops 

前ページ、「FlickrAPI photos.search メソッド利用でデータをjQuery.getJSONで読み込み、画像をCreateJSでCanvas表示」の続きになります。jQuery.ajax()処理に変更した場合のテストとデモです。
easeljs-0.7.1 でテストしました。

 

前ページ、に収まりませんので、2つに分離しますが、jQuery.getJSON処理の方が簡単ですので「興味のある方のみ」ご覧ください。スクリプトはFlickr処理に関わる部分のみです。CreateJS部分は「前ページ」を参照ください。

【前ページ】当方の記事: CreateJS FlickrAPI photos.search メソッド利用のjQuery.getJSON画像表示


重要、easeljs-0.8用について

2014/12/13/にeaseljs-0.8がリリースされましたが、クロスドメイン画像の取得が困難になっています。このページ下記デモJSは、easeljs-0.7.1用でありバージョン違いでは動きません。
よって、easeljs-0.8用に作り直しましたので、デモを参照ください。機能、レイアウトなどはまったく同じです。


 

簡単な説明


[ 簡単な説明の目次 ]


3. jQuery.ajax()処理 (興味の有る方のみお読みください)

3-1. jQuery.ajax()でJSON処理した場合

3-2. jQuery.ajax()でXML処理した場合

3-3. jQuery1.8以降の$.ajax通信の変更について


5. DEMO2 実際のXML処理とDEMO (jQuery.ajax() XML処理)


 

jQuery.ajax()処理

jQuery.ajax()処理を、JSON、XMLの2通りでテストしてみます。処理内容は同じです。
Flickrへのアクセス処理関数getFlickrData()の処理の違いだけで、CreateJSでCanvas処理は同一です。
色々な方法があり混乱しますが、勉強にはなると思います。

▲[ 目次 ]


JSON XML処理に関わらず、 関数 getFlickrData() の中以外は全て同じになります。但し、CreateJSでの処理に都合の良い処理内容になっています。createJS112.jsは前ページを参照ください。


//createJS112.js
//初期設定

略す

//ステージ
var stage,stage2;

略す

//ステージ周りセット
function init() {

	略す

}

略す

function getFlickrData(){

	ここの処理だけが変更になる

}

//---------------------------------------------------------------------------------------------

//START
window.onload=function() {
	getFlickrData();//Flickr

}

jQuery.ajax()でJSON処理した場合

▲[ 目次 ]


jQuery.ajax()でフォーマットを json に指定して処理します。jQuery1.8以降の書き方です。
success()、error()、がそれぞれ.done()、.fail()、に変更になっています。処理内容は同じです。

ajax()通信、データ処理、エラー処理、と独立して処理できるのが特長だそうです。
api_key は自分の「FlickrAPIキー」を取得して使用ください。


json処理ですから、format:"json" とURLに jsoncallback の記載を忘れずにします。
シャッフル無しに変更するには、こちらの書き方の方が簡単に成るかも。



//jQuery-ajax/1.8以降
function getFlickrData(){

	$.ajax({
		type:"GET",
		url:"https://api.flickr.com/services/rest?jsoncallback=?",
		data:{
			method:"flickr.photos.search",
			api_key:"32dbd23f3f7e6d0ae494b99eebb57c93",
			tags:"Tokyo",
			tag_mode:"any",
			extras:"owner_name",
			format:"json"
		},
		dataType:"json"
	})
	.done(function(data){

			flickr=false;
			var photos=data.photos.photo;
			//検索item数エラー処理
			var item_len=photos.length || 0;
			loadItem=item_len;//データ数保存
			//補正
			if(item_len < loadImage_len){loadImage_len=item_len;}

			//DATAがあれば
			if(item_len > 0) {

				//シャッフル配列に数字を入れるphotos.length
				var arr_no=[];
				for(var i=0; i < photos.length; i++){
					arr_no.push(i);
				}
				//配列をシャッフル/0はエラー
				arr_no.sort(function() {return Math.random()-0.5;});

				for(var i=0; i < photos.length; i++){

					var no=arr_no[i];

					var farmId=photos[no].farm;
					var serverId=photos[no].server;
					var id=photos[no].id;
					var secret=photos[no].secret;
					var title=photos[no].title;
					var owner=photos[no].owner;
					var ownername=photos[no].ownername;

					var img_url="https://farm" + farmId + ".staticflickr.com/"+ serverId +"/" + id + "_"+ secret +"_z.jpg";
					//実際画像
					flickrImages.push(img_url);
					flickrTitles.push(title);
					flickrOwners.push(ownername);
					//定量break
					if(i == loadImage_len-1){break;}

				}
				flickr=true;

			} else {
				flickr=false;
				loadImage_len=0;
			}

			init();

	})
	.fail(function(){
		flickr=false;
		init();
	});
}

 

jQuery.ajax()でXML処理した場合

▲[ 目次 ]


以下、FlickrでのXML処理です。一般的なクロスドメインXML処理とは違いますので留意ください。

photos.searchメソッドでの出力のデータ形式は json などの指定が無ければxml形式に成ります。
以下、正常な検索結果と、検索に失敗した場合の返り値です。


● 検索に成功した場合の「xml形式データ」は次の様になります。
複数の、<photo> の中に個々の写真データが存在することになります。



https://api.flickr.com/services/rest?method=flickr.photos.search&api_key=FlickrAPIキー&tags=JAL

<rsp stat="ok">
<photos page="1" pages="376" perpage="100" total="37592">
<photo id="15212405343" owner="78999227@N07" secret="ddf8613d72" server="7539" farm="8" title="JAL Boeing 767-346/ER JA651J Tokyo Haneda [HND RJTT]" ispublic="1" isfriend="0" isfamily="0"/>

以下検索数分繰り返し

</photos>
</rsp>

● 検索に失敗した場合の「xml形式データ」は次の様になります。
<photos> だけで<photo>は存在しません。検索に失敗してもファイルは返ります。



https://api.flickr.com/services/rest?method=flickr.photos.search&api_key=FlickrAPIキー&tags=hogehogehoge

<rsp stat="ok">
<photos page="1" pages="0" perpage="100" total="0"/>
</rsp>

--------------------------------------------------------------

参考、メソッドなしでアクセスした場合(都合で略記)
https://api.flickr.com/services/rest/

<rsp stat="fail">
<err code="112" msg="Method unknown not found"/>
</rsp>

Flickr出力の「json形式」と中の「明細データProperty名称」などはほとんど同様ですから、処理は似通っている。(Flickr側で処理し易いように配慮している)


実際のXML処理例とDEMO

▲[ 目次 ]


easeljs-0.8.0用 JSなどはデモページに有ります。2015/01/01


easeljs-0.7.1用


● Javascriptと併用例 1 [DEMO例]

上記の例の様に、それぞれ.done()、.fail()、に成っています。jQuery1.8以降で機能します。
上の「シャッフルしてランダム表示」と処理内容は同じです。


XML処理なので明示的に dataType を"xml"にします。Flickr側には format の指定は省略できます。


dataType:"xml"


//jQuery-ajax-Xml
//XMLデータ取得100件以内シャッフル
function getFlickrData(){

	$.ajax({
		type:"GET",
		url:"https://api.flickr.com/services/rest",
		data:{
			method:"flickr.photos.search",
			api_key:"32dbd23f3f7e6d0ae494b99eebb57c93",
			tags:"新幹線,東北新幹線,山形新幹線,Shinkansen",
			tag_mode:"any",
			extras:"owner_name"
		},
		dataType:"xml"
	})
	.done(function(data){

		flickr=false;
		var photos=data.getElementsByTagName('photo');

		//検索item数エラー処理
		var item_len=photos.length || 0;
		loadItem=item_len;//データ数保存
		//補正
		if(item_len < loadImage_len){loadImage_len=item_len;}

		//DATAがあれば
		if(item_len > 0) {

			//シャッフル配列に数字を入れるphotos.length
			var arr_no=[];
			for(var i=0; i < item_len; i++){
				arr_no.push(i);
			}
			//配列をシャッフル/0はエラー
			arr_no.sort(function() {return Math.random()-0.5;});

			//ループ処理
			for(var i=0; i < item_len; i++){

				var farmId=photos[arr_no[i]].getAttribute('farm');
				var serverId=photos[arr_no[i]].getAttribute('server');
				var id=photos[arr_no[i]].getAttribute('id');
				var secret=photos[arr_no[i]].getAttribute('secret');
				var title=photos[arr_no[i]].getAttribute('title');
				var owner=photos[arr_no[i]].getAttribute('owner');
				var ownername=photos[arr_no[i]].getAttribute('ownername');

				var img_url="https://farm" + farmId + ".staticflickr.com/"+ serverId +"/" + id + "_"+ secret +"_z.jpg";
				//実際画像
				flickrImages.push(img_url);
				flickrTitles.push(title);
				flickrOwners.push(ownername);
				//定量break
				if(i == loadImage_len-1){break;}

			}
			flickr=true;

		} else {
			flickr=false;
			loadImage_len=0;
		}

		init();
	})
	.fail(function(){
		flickr=false;
		init();
	});
}

● Javascriptと併用例 2

尚、下記例は、success()、error()、で処理していますが、jQuery1.8以降も機能します。
上の「シャッフルしてランダム表示」と処理内容は同じです。2つに分離していますが纏めることも可能。
処理する内容を複数置きたい場合などは良いかも知れません。好みの問題ですが。



//jQuery-ajax-Xml 3
//XMLデータ取得100件以内シャッフル
function getFlickrData(){

	$.ajax({
		type:"GET",
		url:"https://api.flickr.com/services/rest",
		data:{
			method:"flickr.photos.search",
			api_key:"32dbd23f3f7e6d0ae494b99eebb57c93",
			tags:"新幹線,東北新幹線,山形新幹線,Shinkansen",
			tag_mode:"any",
			extras:"owner_name"
		},
		dataType:"xml",
		success:function(data){
			setFlickrData(data);//画像URL取得シャッフル
		},
		error:function(XMLHttpRequest,textStatus,errorThrown){
			flickr=false;
			init();
		}
	});
}
//URL取得 XML/シャッフルを使用している
function setFlickrData(data){

	var photos=data.getElementsByTagName('photo');

	//検索item数エラー処理
	var item_len=photos.length || 0;
	loadItem=item_len;//データ数保存
	//補正
	if(item_len < loadImage_len){loadImage_len=item_len;}

	//DATAがあれば
	if(item_len > 0) {

		//シャッフル配列に数字を入れるphotos.length
		var arr_no=[];
		for(var i=0; i < item_len; i++){
			arr_no.push(i);
		}
		//配列をシャッフル/0はエラー
		arr_no.sort(function() {return Math.random()-0.5;});

		//ループ処理
		for(var i=0; i < item_len; i++){

			var farmId=photos[arr_no[i]].getAttribute('farm');
			var serverId=photos[arr_no[i]].getAttribute('server');
			var id=photos[arr_no[i]].getAttribute('id');
			var secret=photos[arr_no[i]].getAttribute('secret');
			var title=photos[arr_no[i]].getAttribute('title');
			var owner=photos[arr_no[i]].getAttribute('owner');
			var ownername=photos[arr_no[i]].getAttribute('ownername');

			var img_url="https://farm" + farmId + ".staticflickr.com/"+ serverId +"/" + id + "_"+ secret +"_z.jpg";
			//実際画像
			flickrImages.push(img_url);
			flickrTitles.push(title);
			flickrOwners.push(ownername);
			//定量break
			if(i == loadImage_len-1){break;}

		}
		flickr=true;

	} else {
		flickr=false;
		loadImage_len=0;
	}

	init();
}

● 全てjQuery each()処理の場合

このデモ例では、全てjQuery each()処理の方が処理し難い。上記の如く Javascript と併用の方が処理し易い。

注意、each()から途中抜けるに return false で無いと抜けない。検索item数は perpage の値を読み出した。



<photos page="1" pages="376" perpage="100" total="37592">


//jQuery-XML/全てjQuery処理
function getFlickrData(){
	$.ajax({
		type:"GET",
		url:"https://api.flickr.com/services/rest",
		data:{
			method:"flickr.photos.search",
			api_key:"32dbd23f3f7e6d0ae494b99eebb57c93",
			tags:"新幹線,東北新幹線,山形新幹線,Shinkansen",
			tag_mode:"all",
			extras:"owner_name"
		},
		dataType:"xml",
		success:function(xml){

			flickr=false;
			//検索item数perpage取得エラー処理
			var item_len=$(xml).find("photos").attr('perpage') || 0;
			item_len *=1;
			loadItem=item_len;//データ数保存
			//補正
			if(item_len < loadImage_len){loadImage_len=item_len;}

			//DATAがあれば
			if(item_len > 0) {

				var count=0;
				$(xml).find("photo").each(function(i) {

					var farmId=$(this).attr('farm');
					var serverId=$(this).attr('server');
					var id=$(this).attr('id');
					var secret=$(this).attr('secret');
					var title=$(this).attr('title');
					var owner=$(this).attr('owner');
					var ownername=$(this).attr('ownername');

					var img_url="https://farm" + farmId + ".staticflickr.com/"+ serverId +"/" + id + "_"+ secret +"_z.jpg";
					//実際画像
					flickrImages.push(img_url);
					flickrTitles.push(title);
					flickrOwners.push(ownername);
					//定量BREAK
					if(count == loadImage_len-1){flickr=true;return false;}
					count ++;
				});
				flickr=true;
				loadImage_len=count;

			} else {
				flickr=false;
				loadImage_len=0;
			}
			init();
		
		},
		error:function(){
			flickr=false;
			init();
		}
	});
}

どちらにしろ、{}羅列の処理記述ですから、「{}」「()」「,」の組み合わせに注意が必要です。


 

jQuery1.8以降の$.ajax通信の変更について

▲[ 目次 ]


jQuery1.8以降では少々$.ajax通信に変更があります、.done()、.fail()、を使用して記述する方法です。
上記のJSなどは動作はしますが「旧式」の記述も有ります。
より詳細は、下記サイト記事などを参考にして下さい。


【参考】blog.toshimaru.netの記事: jQuery モダンAjaxな書き方を目指して

【参考】koikikukan.comの記事: jQueryのgetJSON()でエラーをハンドリングする

 



一応、完動しますが全てテストです。効率化のため、予告無くJSなど修正する場合がありますので了承下さい。

CreateJSは結構「仕様」が変わりますので特に注意が必要です。


以上です。

 


[ この記事のURL ]


 

ブログ記事一覧

年別アーカイブ一覧



[1]