POPSブログ

CreateJS FlickrAPIのデータをjQuery.getJSONで読み込み画像を表示する

328

  Category:  javascript2014/11/19 pops 

FlickrAPIのデータをjQuery.getJSONで読み込み、サムネール画像をCreateJSで表示しactive時のボタン背景色などを変えます。表示中のOWNERのページにリンクできます。また、jQuery.ajax()で読み込み画像表示をもしてみました。
easeljs-0.7.1 でのテストです。

 

CreateJS FlickrAPIのデータをjQuery.getJSONで読み込み画像を表示するテスト

JSは基本的に「前ページ」のものを改造しただけです。
基本的にFlickrAPIを利用する場合は、Flickrに登録して「FlickrAPIキー」を取得しなければなりません。画像検索には以下2つの方法があります。


1. 「FlickrAPIキー」なしで最新更新サムネール画像を得る方法。
(JSON形式は簡単ですが、XML形式はクロスドメインのため少し面倒です)
2. 「FlickrAPIキー」を取得して自由に画像検索して大きな画像を表示する方法。
(JSON、XML形式共に取得は簡単であり、且つ、色々なFlickrAPI機能を利用できます)


「FlickrAPIキー」なしでは、「最新更新」の小さなサムネール画像のみの取得に制限されますから、「登録」せずに簡単に表示出来ても画像が小さい故に楽しむには限界があります。


今回は、1番の「FlickrAPIキー」なしで最新の更新サムネールを得る方法です。
次回は、2番の「FlickrAPIキー」を取得しての画像検索表示する方法を考えて見ます。


追記、CreateJSがバージョンアップになり、easeljs-0.8.0になりローダーの仕組みが変わり、外部画像の読み込みが標準では困難と成りますので、一部補正したものを「デモ2」に収録します。
easeljs-0.8.0用のJSは「デモ2」ページに有ります。2014/12/25

 

zu

 

DEMO (jQuery.getJSON処理)


CreateJS FlickrAPIのデータをjQuery.getJSON()で読み込み画像を表示するデモ

このページはHTML5では有りませんので、デモページでご覧ください。「IE7.8」ではご覧いただけません。
/// 注意、ブラウザ、マシン性能により描画品質などに大きな差が有ります事了承下さい ///


デモ1、easeljs-0.7.1用

demo


デモ2、easeljs-0.8.0用

easeljs-0.8.0用のJSは「デモ2」ページに有ります。レイアウトなどはまったく同じです。

demo


Chrome Opera Firefox Safari(Win) IE9-11で動作確認済み。 Safari(Mac)、は未確認です。


 

HTML JS CSS


使用するライブラリ

easeljs preloadjs tweenjs

配布元 : CreateJS createjs.com


ライブラリの読み込み

ダウンロードしたJSを使用する場合。記述は一例です。(バージョン 0.7.1 使用)


<script type="text/javascript" src="js/easeljs-0.7.1.min.js"></script>
<script type="text/javascript" src="js/preloadjs-0.4.1.min.js"></script>
<script type="text/javascript" src="js/tweenjs-0.5.1.min.js"></script>

重要、バージョン違いでは動かない場合が有りますので必ず合わせて下さい。


jQuery処理用に、事前にjQueryが必要です。最近のものならバージョンは何でも良い。


HTML (HTML5)



<div id="demo-wrap">
	<div id="image-box" class="radius">
		<canvas id="mainCanvas" width="640" height="400"></canvas>
	<div id="ownerlinkblock"><p>OWNER: <a id="ownerlinks" target="blank"></a></p></div>
	</div><div class="clear"></div>
	<div id="btn-box">
		<canvas id="subCanvas" width="640" height="60"></canvas>
	</div>
</div>

JS

createJS111.js、JS名は任意に変更可。注意、easeljs-0.7.1用です。



//日本語
//createJS111.js
//Flickr角丸サムネールとスライドのテスト
//easeljs-0.7.1 デモ用

//------------------------------------------------------
//初期設定

var speed=1000;//拡大移動、アニメ速度
var delay_speed=2000;//1000-5000最初の遅延用に使用
var slide_time;//未使用

//canvasの大きさ/全てこの値を使用
var canvasWidth=640;
var canvasHeight=400;

//タイマーの使用/常時使用、判定なし
var timer_use;
//タイマー値 5000-10000
var time=8000;

//clickbtnの使用 useのこと
var clickbtn_use="use";
//クリック専用ボタン
var hitbtn=true;//true false

//Loading AUTOの文字を表示するかuse
var text_use="use";

//表示スケール
var image_scale=1.25;//1-2
//Flickr読み込み画像数最大20
var loadImage_len=20;//6-20

//サムネールボタンの大きさ
var btnW=24;//幅 40
var btnH=24;//高さ 40
var btnR=3;//角丸半径 5
//ボタン間の間隔 -10から10
var btnSpace=4;

//画像manifestリスト空白
var manifest=[];

//最初の画像0のこと
var image_no=0;
//画像数
var image_max;

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

//ステージ
var stage,stage2;
//Loader
var loader;
//コンテナ
var container,backcontainer,loadingcontainer,progresscontainer;
var btncontainer;//stage2
//画像
var welcomeImage,mainImage,backImage,topImage;
//Loading関連
var loadingShape,progressbar,progtext,bar_v;
//TEXT
var viewtext;

//読み込み画像の大きさcanvasと同じ
var imageW=canvasWidth;
var imageH=canvasHeight;

//ボタンが押された/有効
var btnValidity=false;

//読み込み画像result保存容器
var assets=[];
var thumb_assets=[];

//変数
var globalflag=false,timerID=null;
//loading変数
var loading=false;

//shadowフィルター
var shadow=new createjs.Shadow("#000000",0,0,4);
var once=true;
//ボタン
var myBtn=[];
var labels=["BOTTUN1","BOTTUN2","BOTTUN3"];//未使用
var pos_dx=[0,0,0,1,-1,0,0];
var pos_dy=[0,0,0,0,0,1,-1];


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

	//ステージ
	stage=new createjs.Stage('mainCanvas');
	//ステージ2
	stage2=new createjs.Stage('subCanvas');
	//MouseOver重要
	stage2.enableMouseOver(20);

	//バックRect/最下位色背景層、無くとも良い
	var backrect=new createjs.Shape();
	backrect.graphics.beginFill("#000000").drawRect(0,0,canvasWidth,canvasHeight);
	stage.addChild(backrect);

	//welcome画像層画像表示
	welcomeImage=new createjs.Bitmap("/main/images/flickr_back2b.jpg");//640x400
	stage.addChild(welcomeImage);

	//下画像層、空画像コンテナを作る
	backcontainer=new createjs.Container();
	backImage=new createjs.Bitmap();
	backcontainer.addChild(backImage);
	stage.addChild(backcontainer);
	
	//上画像層、空コンテナを作る
	container=new createjs.Container();
	topImage=new createjs.Bitmap();
	container.addChild(topImage);
	stage.addChild(container);

	//flickrFeed読み込み成功
	if(flickr) {
		//flickrのmanifestリスト作成
		manifest=[];
		for (var i=0; i < flickrImages.length; i++) {
			var src=flickrImages[i];
			var id="PHOTO";
			manifest.push({
				src:src,
				id:id
			});
		}

		//loadingコンテナを作る
		loadingcontainer=new createjs.Container();
		stage.addChild(loadingcontainer);
		//LOADINGを作る
		loadingShape=loadingIndicator();
		loadingShape.x=canvasWidth/2;
		loadingShape.y=canvasHeight/2;
		//tickを設定
		loadingShape.tick=function (){
			if(loading) {
				loadingShape.rotation +=5;
			}
		}
		//loading addEventListenerを設定
		createjs.Ticker.addEventListener('tick',loadingShape.tick);
		//コンテナに貼り付け
		loadingcontainer.addChild(loadingShape);
		loading=true;//loading表示判定

		//ProgressBar
		progresscontainer=new createjs.Container();
		progressbar=new createjs.Shape();
		progtext=new createjs.Text("0","12px Arial","#FFFFFF");
		progtext.x=0;
		progtext.y=15;
		progtext.maxWidth=80;
		progtext.textAlign="center";
		progtext.shadow=shadow;//shadow
		//alpha
		progressbar.alpha=0.5;

		//bar_v判定tickを設定(butt round)
		//90度是正-Math.PI/2
		progressbar.tick=function (){
			if(bar_v > 0) {
				progressbar.graphics.clear();
				progressbar.graphics.setStrokeStyle(8,"butt").beginStroke("#FF69B4");
				progressbar.graphics.arc(0,0,40,-Math.PI/2,Math.PI*2*bar_v-Math.PI/2);
				progtext.text=Math.floor(bar_v*100);
				stage.update();
			}
		}
		//Ticker.Listener設定
		createjs.Ticker.addEventListener('tick',progressbar.tick);
		//addChild
		progresscontainer.x=canvasWidth/2;
		progresscontainer.y=canvasHeight/2;
		progresscontainer.addChild(progressbar,progtext);
		stage.addChild(progresscontainer);

		//ステージ2サムネールコンテナ、あとで作る
		btncontainer=new createjs.Container();
		btncontainer.x=0;
		btncontainer.y=30;//半分の高さ
		//サムネールコンテナをステージ2にaddChild
		stage2.addChild(btncontainer);
		//createjs.Ticker.addEventListener('tick',tick2);

	}

	//簡易TEXT
	viewtext=new createjs.Text("","12px Arial","#FFFFFF");
	viewtext.x=20;
	viewtext.y=15;
	viewtext.maxWidth=canvasWidth-40;
	viewtext.lineHeight=20;
	viewtext.textBaseline="bottom";
	viewtext.shadow=shadow;//SHADOW処理
	stage.addChild(viewtext);

	stage.update();

	//Ticker設定
	createjs.Ticker.setFPS(30);
	createjs.Ticker.addEventListener('tick',tick);

	//調整
	setTimeout(function() {

		//flickrFeed読み込み成功、画像ロードに進む
		if(flickr) {
			if(loadImage_len > 0) {
				set_text("Loading Now!");
				//set_text("検索ヒット数" + loadItem + "より、表示枚数" + loadImage_len + "の画像を読み込みます。");
				bulkload();
			}
		}
		//失敗
		if(!flickr) {
			var mass="Flickrの読み込み失敗、表示出来ませんので停止します!";
			if(loadImage_len == 0) {mass="Tag検索結果が有りません、表示出来ませんので停止します!";}
			viewtext.x=100;
			viewtext.y=canvasHeight/2;
			set_text(mass);
		}
		
	},1000);

}

//progressBar
function progress(event) {

	//loadedのみ効く
	bar_v=event.loaded;
}

//bulk-load、画像一括ロード
function bulkload() {

	//Loaderを作る
	loader=new createjs.LoadQueue(false);
	//全体、progressがあれば先に設定
	loader.addEventListener("progress",progress);

	//loader EventListener設定
	loader.addEventListener("fileload",fileload);
	loader.addEventListener("complete",complete);
	//Manifestを使用、manifest読み込み開始
	loader.loadManifest(manifest);

}

//各画像読み込み完了
function fileload (event) {

	var id=event.item.id;
	//画像選別
	if (id == 'PHOTO') {
		//エラー無しの画像をassets容器に保存
		assets.push(event.result);
		thumb_assets.push(event.result);
	}
}
//全ての画像読み込み完了
function complete (event) {

	//画像数確認、再計算
	image_max=assets.length;
	//簡易TEXT
	set_text("Loading End!")
	//loader Listener削除
	loader.removeEventListener("fileload",fileload);
	loader.removeEventListener("complete",complete);

	//loading EventListener削除
	createjs.Ticker.removeEventListener('tick',loadingShape.tick);
	//非表示でも良い
	loadingcontainer.visible=false;
	loading=false;//loading表示判定

	if(flickr) {set_text("Flickr画像読み込み完了!");}

	//画像整形getBounds方式
	if(flickr) {
		for (var i=0; i < image_max; i++) {
			var bmp=new createjs.Bitmap(assets[i]);
			//大きさ取得
			flickrW.push(bmp.getBounds().width);
			flickrH.push(bmp.getBounds().height);

			//画面にあわせる
			var scale_v=1;
			if(flickrH[i] > canvasHeight) {scale_v=canvasHeight/flickrH[i];}
			if(flickrW[i] > canvasWidth) {scale_v=canvasWidth/flickrW[i];}

			assets[i]=createFlickrCanvas(canvasWidth,canvasHeight,assets[i],flickrW[i],flickrH[i],image_scale*scale_v,"#000000");
		}
	}

	//Create-Bottunボタンを作る
	if (clickbtn_use == 'use') {
		for (var i=0; i < image_max; i++) {

			//サムネールthumb_assets
			var img=createImgCanvas(btnW,btnH,thumb_assets[i]);
			//番号受け渡し
			var no=i;

			//アクションつき、create-サムネールボタン2
			//X、Y、幅、高さ、角丸半径、色、HitBTN、HitBT色、画像、番号
			myBtn[i]=createThumbCenterbtn2(0,0,btnW,btnH,btnR,"#FF0000",hitbtn,'rgba(0,0,0,0.1)',img,no);

			//ボタン間隔ステージ2用
			myBtn[i].x=i*(btnW+btnSpace);
			//ボタン判別用のidを書き込む、未使用
			myBtn[i].id=i;

			//myBtn addChild
			btncontainer.addChild(myBtn[i]);

		}

		//ボタンコンテナを中央に修正
		var btncont_x=canvasWidth/2-(btnW+btnSpace)*(image_max-1)/2;
		btncontainer.x=btncont_x;
		stage2.update();
	}

	//画像があれば、最初の画像表示
	if (image_max) {

		//早すぎるので調整
		setTimeout(function() {

			//遅延progressbar最後の前にcompleteが反応する
			event.target.removeEventListener("progress",progress);
			//progressTicker削除
			createjs.Ticker.removeEventListener('tick',progressbar.tick);
			//progress非表示
			progresscontainer.visible=false;

			//簡易TEXTクリア
			set_text("");
			//viewtext.visible=false;

			//画像表示に進む
			draw();

		},delay_speed);
	}

}

//DRAW、アニメ
function draw() {

	globalflag=false;

	//AUTO文字表示/ボタン有効判定
	if (!btnValidity) {
		set_text("AUTO");
	};

	//activeボタン色変更
	if (clickbtn_use == 'use') {
		for (var i=0; i < image_max; i++) {

			//Active背景処理
			var target2=myBtn[i].getChildByName("aline");
			target2.visible=false;
			if(i==image_no) {target2.visible=true;}
		}
		stage2.update();
	}

	//MODE
	var mode=1;
	//位置データ
	var rno=Math.floor(Math.random()*pos_dx.length);
	//移動
	var px = pos_dx[rno];
	var py = pos_dy[rno];
	if (px+py == 0) {mode=0;}//移動なし

	//最初は強制FADE
	if(once) {
		mode=0;
		once=false;
	}

	//リンク処理
	$("#ownerlinks").text(flickrLinks[image_no]);
	$("#ownerlinks").attr({href:flickrLinks[image_no]});

	//画像result取得/Tween後も使用する
	mainImage=assets[image_no];

	//上画像更新画像Bitmap挿入、中央補正なし回転は出来ない
	topImage.image=new createjs.Bitmap(mainImage).image;
	if (mode == 0) {
		//FADE透明度0
		topImage.alpha=0;
		topImage.x=0;
		topImage.y=0;
	} else {
		//SLIDE
		topImage.alpha=1;
		topImage.x=canvasWidth*px;
		topImage.y=canvasHeight*py;
	}

	//TWEENの実行
	var tw=createjs.Tween.get(topImage)
	.to({x:0,y:0,alpha:1},speed)
	.wait(200)
	.call(finshtween);

}

//フェードアニメ完了
function finshtween () {

	//ボタン有効解除
	btnValidity=false;

	//Tween全てが完了してから下画像表示
	backImage.image=new createjs.Bitmap(mainImage).image;

	//上画像に空Bitmap挿入
	topImage.image=new createjs.Bitmap();
	stage.update();

	//アニメ作業中である、現在は未使用
	globalflag=true;

	//画像処理に時間がかかるので、少し遅延させる、あったほうが良い
	setTimeout(function() {

		//タイマー常時使用
		set_timer();

	},500);

}

//tickステージ
function tick() {
	stage.update();
}
//tick2ステージ2
//アニメなどなければ特別いらないようだ、ボタンでupdateしているから
function tick2() {
	//stage2.update();
}

//次ぎの開く要素を計算
function next_set() {

	//次ぎの番号
	image_no +=1;
	if (image_no > (image_max-1)) {image_no=0;}
	draw();

}

//タイマー
function set_timer() {

	//一旦切ってからセット
	clearTimeout(timerID);
	timerID=setTimeout(next_set,time);
}

//VIEWTEXT
function set_text(t) {
	if (text_use=='use') {
		viewtext.text=t;
	}
}

//BtnClick/on
function handleclick (event,no) {
	//アニメ中は機能しない
	if (!globalflag) {return;}
	//on
	var hit_no=no;
	//表示中番号なら戻る
	if (hit_no == image_no) {

		return;

	} else {

		//ボタン有効/AUTO文字書き換え
		btnValidity=true;
		viewtext.text="";
		//タイマー強制停止
		clearTimeout(timerID);
		//指定番号の画像表示
		image_no=hit_no;
		draw();

	}
}

//create-サムネールボタン2
//X、Y、幅、高さ、角丸半径、色、HitBTN、HitBT色、画像、番号
function createThumbCenterbtn2 (x,y,w,h,r,acolor,btn_make,btncolor,img,no) {

	//BTNコンテナ
	var btn=new createjs.Container();
	btn.x=x;
	btn.y=y;
	var s=new createjs.Shape();
	//角丸画像挿入
	s.graphics.beginBitmapFill(img).drawRoundRect(x,y,w,h,r);//画像はクリック無効
	//s.graphics.beginFill("#CCCCCC").drawRoundRect(x,y,w,h,r);//画像無し
	s.name="graphic";//name挿入
	//原点移動、グラフイックを容易にするため
	s.regX=w/2;
	s.regY=h/2;
	//Activeライン
	var activeline=new createjs.Shape();
	//隠れるのでライン幅が広い
	activeline.graphics.ss(3).s(acolor).beginFill("#000000").drawRoundRect(x,y,w,h,r);
	activeline.name="aline";//name挿入
	//原点移動
	activeline.regX=w/2;
	activeline.regY=h/2;
	activeline.visible=false;//一旦非表示
	btn.addChild(activeline,s);
	btn.shadow=shadow;

	//クリック専用ボタン
	if(btn_make) {
		var hits=new createjs.Shape();
		hits.graphics.beginFill(btncolor).drawRoundRect(x,y,w,h,r);//透過ボタン
		hits.name="click";//name挿入
		hits.regX=w/2;
		hits.regY=h/2;
		hits.cursor="pointer";
		hits.on("click",handleclick,null,false,no);
		btn.addChild(hits);
	}

	return btn;
}


//幅、高さ、画像
function createImgCanvas(w,h,patternimg) {
	//Box
	var canvas=document.createElement("canvas");
	//指定の大きさになる
	canvas.width=w;
	canvas.height=h;
	var ctx=canvas.getContext("2d");
	ctx.drawImage(patternimg,0,0,w,h);

	return canvas;
}

//色付きcanvasを作る
function createColorCanvas (w,h,c) {
	var canvas=document.createElement("canvas");
	canvas.width=w;
	canvas.height=h;
	var ctx=canvas.getContext("2d");
	ctx.fillStyle=c;
	ctx.fillRect(0,0,w,h);
	return canvas;
}

//FlickrCanvas
function createFlickrCanvas(w,h,img,img_w,img_h,scale_v,backcolor) {

//小数点第二丸め
//var scale_v=Math.round(scale_v*100)/100;

	//Box
	var canvas=document.createElement("canvas");
	//指定の大きさになる
	canvas.width=w;
	canvas.height=h;
	var ctx=canvas.getContext("2d");
	ctx.fillStyle=backcolor;
	ctx.fillRect(0,0,w,h);
	ctx.translate(w/2,h/2);
	ctx.drawImage(img,-(img_w*scale_v)/2,-(img_h*scale_v)/2,img_w*scale_v,img_h*scale_v);

	return canvas;
}

//簡単なLOADING
function loadingIndicator(){

	//graphicのスタイル
	var graphics=new createjs.Graphics();
	graphics.setStrokeStyle(2,"round").beginStroke("#CCCCCC");//round

	//描画データ
	var cx,cy,
	numNeedles=12,
	innerR=10,
	outerR=5,
	cAngle= -Math.PI/2,
	nAngle;

	//ライン描画
	nAngle=Math.PI*2/numNeedles;
	for (var i=0; i < numNeedles; i++){
		cAngle +=nAngle;
		cx=Math.cos(cAngle)*innerR;
		cy=Math.sin(cAngle)*innerR;
		graphics.moveTo(cx,cy);
		cx=Math.cos(cAngle)*outerR;
		cy=Math.sin(cAngle)*outerR;
		graphics.lineTo(cx,cy);
	}
	//Shapeに格納
	var s=new createjs.Shape(graphics);
	return s
}

//flickr
var flickrImages=[];
var flickrLinks=[];
var flickr=false;
var flickrW=[];
var flickrH=[];
var loadItem=0;

//jQuery-getJSON新幹線,JR東日本
function getFlickrData() {
	var flickrAPI="https://api.flickr.com/services/feeds/photos_public.gne?jsoncallback=?";
	$.getJSON(flickrAPI,{
		format:"json",
		tags:"SkyTree,東京夜景,東京",
		tagmode:"any"
	},
	function(data){
		var result=data.items;
		//検索item数
		var item_len=result.length || 0;
		loadItem=item_len;
		//補正
		if(item_len < loadImage_len){loadImage_len=item_len;}

		if(item_len > 1) {
			//forループ処理
			for(var i=0; i < loadImage_len; i++){
				flickrImages.push(result[i].media.m);//注意、mのみ有効
				var link=result[i].link;
				flickrLinks.push(link);//元画像
				if(i == loadImage_len-1) {
						break;
				}
			}
			flickr=true;

		} else {
			flickr=false;
			loadImage_len=0;
		}
		init();

	})
	//ERROR
	.error(function(){
		flickr=false;
		init();
	});
};

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

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

注釈文を削除すれば、幾分早くなります。未使用の関数なども含みます。
画像使用の場合、登録画像パスは当方の例です。使用の際は環境に合わせて下さい。


CSS

createJS111.css、CSS名は任意に変更可



/*日本語 createJS111.css*/

#demo-wrap {
position:relative;
width:auto;
height:500px;
text-align:center;
}

#image-box {
/*position:absolute;*/
position:relative;
top:0;left:0;
width:640px;
height:400px;
padding:0;
margin:0 auto;
box-shadow:0 0 10px #000;
-moz-box-shadow:0 0 10px #000;
-webkit-box-shadow:0 0 10px #000;
-o-box-shadow:0 0 10px #000;
-ms-box-shadow:0 0 10px #000;
background-color:#000000;
}

#image-box #mainCanvas {
border-radius:10px;
}
#btn-box {
width:640px;
height:60px;
margin:10px auto;
padding:0;
}

.radius {
border-radius:10px;
-moz-border-radius:10px;
-webkit-border-radius:10px;
-o-box-border-radius:10px;
-ms-border-radius:10px;
}

#ownerlinkblock {
position:absolute;
left:0px;
bottom:10px;
display:block;
width:640px;
height:20px;
font:#FFFFFF;
background-color:#555555;
float:left;
}

当方のサンプルの例です。


 

簡単な説明


[説明図]

zu

 

「FlickrAPIキー」なしで最新の更新サムネール画像を得る方法


flickrAPIの photos_public.gne を利用し、原則、JSON形式のデータを得ます。


https://api.flickr.com/services/feeds/photos_public.gne を利用する方法で、誰でも容易に取得できますが、「登録」していませんので「最新更新画像」のサムネール画像の取得のみの制約があります。

jQuery.getJSONはクロスドメインのJSON形式のデータを簡単に取得出来ます。クロスドメインXML形式のデータ(RSS Feed)は特別な方法を取らないと処理出来ません。


1. FlickrAPIの「最新更新画像」の検索結果を20件取得できます。
2. Flickrに登録シナクトモ、幅240、または高さ240、前後のサムネールを取得出来ます。
3. 登録していませんので制約があり、大きな画像の取得は出来ません。
4. JSON形式のデータを得ますので利用は簡単です。(XML形式のデータ取得は最後に記載します)
5. JSON形式のデータのファイルは、XML形式と比較して容量が格段小さくなります。
6. Flickrの場合は、callback の param が "callback" でなくて、"jsoncallback" です。
【重要】、jsoncallback は url の最後に記述します。


「FlickrAPIキー」を取得して画像検索して表示する方法は、制約が余り無くまったく違います。公開されているものならば自由に大きな画像を得ることが出来ます。(次回にテストしてみます)


jQuery.getJSON()の書式


書式



jQuery.getJSON(url,[data],[handler])

● flickrAPI利用の場合
以下のような書き方になるのが一般的のようです。jsoncallback はURLの最後に記述する。




function 関数名 () {
	var flickrAPI="https://api.flickr.com/services/feeds/photos_public.gne?jsoncallback=?";
	$.getJSON(
		flickrAPI,
		{
			format:"json",
			tags:"タグ名",
			tagmode:"any"
		},
		function(data){

			//何らかの処理

		})
	);
};

 

flickrAPI利用の画像表示

FlickrAPIのjson形式データをjQuery.getJSONで読み込み、画像をCreateJSで表示します。
(jQuery.ajax()での方法も後で記載します)
jQuery.getJSONもajax()を利用してはいますが、詳しい書式などは「jQueryリファレンス」記事などを参照ください。


JSを作るにあたり、下記記事参考にしました。


【参考】jsdo.itの記事: 2014-10-01 1st

【参考】havelog.ayumusato.comの記事: jQueryを使ったJSONPの取り扱いメモ


● jsdo.itの記事のコード例、抜粋




(function() {
  var flickerAPI = "http://api.flickr.com/services/feeds/photos_public.gne?jsoncallback=?";
  $.getJSON(flickerAPI,{
    tags:"mount rainier",
    tagmode:"any",
    format:"json"
  })
    .done(function(data) {
      $.each( data.items,function(i, item) {
        $( "<img>" ).attr( "src", item.media.m ).appendTo( "#images" );
        if (i === 4) {
          return false;
        }
      });
    });
})();

● 次の様にしてもOKのようです。
ここでは、CreateJSの「デモ」で使用しましたのでERROR処理も入れました。




//jQuery-getJSON
function getFlickrData() {
	var flickrAPI="https://api.flickr.com/services/feeds/photos_public.gne?jsoncallback=?";
	$.getJSON(flickrAPI,{
		format:"json",
		tags:"タグ名",
		tagmode:"any"
	},
	function(data){

		//何らかの処理

	})
	//ERROR
	.error(function(){
		flickr=false;
		init();
	});
};

APIのjson形式データをjQuery.ajax()で読み込みますが、jQuery.getJSON()も、HTTPリクエスト(GETメソッド)を使用してデータを取得します。データはJSONとして評価されますので、其の中より必要なデータを抽出するだけです。


1. APIの規定に従いデータをjson形式で読み込みます。
2. ボタンはCanvas表示のためクロスドメイン画像の場合はSecurity上の理由でリンク(Click)は機能しませんので少々修正しました。
3.jQuery.getJSON()、 jQuery.ajax()、処理の2つを記載しておきます。
4. 画像表示数は6-20位です。(最大20件しか結果は返らない、検索結果ですから結果の無いこともある)


FlickrAPIの検索結果の戻り値

検索に成功した場合の「json形式データ」は次の様になります。これを元に処理を作ればよい。検索に失敗しても「json形式データ」が戻ります。完全に何らかの異常があればERRORに成ります。


● 検索に成功した場合の「json形式データ」は次の様になります。
items の中に個々の写真データが複数存在することになります。
画像の大きさは「m」のみになります。(幅240、あるいは高さ240、の大きさに縮小されたサムネール)




http://api.flickr.com/services/feeds/photos_public.gne?tags=SkyTree&tagmode=any&format=json&jsoncallback=?

({
		"title": "Recent Uploads tagged skytree",
		"link": "http://www.flickr.com/photos/tags/skytree/",
		"description": "",
		"modified": "2014-11-13T12:16:44Z",
		"generator": "http://www.flickr.com/",
		"items": [
	{
		"title": "Bunkyo Civic Center",
		"link": "http://www.flickr.com/photos/125115984@N06/15594204848/",
		"media": {"m":"http://farm6.staticflickr.com/5616/15594204848_633fd1ac27_m.jpg"},
		"date_taken": "2014-11-13T18:14:00-08:00",
		"description": " 画像のHtmlが記載されています。略します................. ",
		"published": "2014-11-13T12:16:44Z",
		"author": "nobody@flickr.com (t-naki)",
		"author_id": "125115984@N06",
		"tags": "tokyo skytree 文京シビックセンター"
	},

	以下検索数分繰り返し


● 検索に失敗した場合の「json形式データ」は次の様になります。
items の中が空になります。「検索に失敗」しても「戻り値」が在ることに注意ください。
「honyarara」「papipupepo」はタグとして無いと思ったが検索結果はあったので「hunyarara」で検索した。




https://api.flickr.com/services/feeds/photos_public.gne?tags=hunyarara&tagmode=any&format=json&jsoncallback=?

({
		"title": "Recent Uploads tagged hunyarara",
		"link": "https://www.flickr.com/photos/tags/hunyarara/",
		"description": "",
		"modified": "1970-01-01T00:00:00Z",
		"generator": "https://www.flickr.com/",
		"items": [
	]
})

2014年6月から http の変更

Flickr API の http がSSLに変更になり https を使用するようにとのことです。
但し、現在 http も使用出来る様ですが、問題があれば https を使用した方がよいでしょう。詳細下記記事参照。

【参照】code.flickr.netの記事: Flickr API Going SSL-Only on June 27th, 2014


 

実際のjQuery.getJSON処理

事前に「flickrデータ」を取得してから「CreateJS処理」に進みます。途中で「flickrデータ」の取得に失敗すれば停止します。「CreateJS処理」との連携ですから少々複雑です。

forループ処理をしているので、flickrデータの件数を調べるのに、検索失敗の場合に「エラー」になるので次の様に処理。他にも色々な手法はあると思いますが........




var item_len=result.length || 0;

1. 取得する画像URLは media.m にある。
2. オーナーのページのURLは link にある。
3. 画像URLがあれば、サムネールのLoadQueue画像一括ロードに進みます。
4. その他は「デモ」に合わせる処理です。


Flickrのtagsの指定は決まりがあるようですが..... (photos_public.gneの場合のテスト結果)
「最新の更新」の検索結果ですから、ファイルは返りますが、タグ名、或いは書き方によって検索結果が無い場合もあります。
「最新の更新」の場合の書き方などは、情報が少なく判り難く正直判らないのが本音..........


1. 通常タグは英字で指定します。(1つのみ記載がベター)
2. 日本語の指定も可能です。
3, 複数タグ検索は半角カンマで区切る。
4. 半角スペースを入れる場合は英字のみ可能。(日本語では検索結果が無い)
6. タグは OR AND 検索が可能のようです。
5. photos_public.gneでのキーワード検索は無効です。(text:"tokyo" など)
6. あまり使用しないタグでは、検索結果の無い場合の頻度は増します。


● タグ
半角スペースに注意


OK 但し[Kyoto Tokyo]スペースの入ったタグ名の意
tags:"Kyoto Tokyo"

NG 検索結果が無い
tags:"新幹線 東北新幹線"

複数検索 (一応複数検索できるようだ)



tags:"Kyoto,Tokyo"
tags:"新幹線,東北新幹線"

tags:"Kyoto,Osaka,Tokyo"
tags:"新幹線,東北新幹線,山形新幹線"

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

検索結果無し
tags:"世田谷新幹線"
tags:"hogehogehoge"

URLに記載ならば



https://api.flickr.com/services/feeds/photos_public.gne?tags=Kyoto,Osaka,Tokyo&....
https://api.flickr.com/services/feeds/photos_public.gne?tags=新幹線,東北新幹線,山形新幹線&....

● タグモード
一応 OR AND の指定が機能する。


tagmode:"any"
または
tagmode:"all"

タグモードの追記 ((2014/12/13))

途中で10日間位、tagmode を tag_mode に変更しましたが、tagmode が正しい。お詫びしますと共に再修正します。

「FlickrAPIキー」の必要ない、services/feeds/photos_public.gne での「タグモード」は tagmode です。初期設定 all
但し、「FlickrAPIキー」の必要な、services/rest などでの「タグモード」は tag_mode です。
feedsでの検索結果は20件までと少ないですから、tagmode を any で設定したほうが、検索結果が得られ易いと思います。(但し、オーナーのタグ設定が大まかで、関係の無いタグ設定も多いので、写真検索結果はあいまいです)


【参照】Flickr.comのdocs記事: Public feed


 

デモでのjQuery.getJSON処理例

CreateJSとの連携のため少々面倒になっています。最初にflickrデータをjQueryで読み込んでからCreateJS処理に進みます。flickrデータの読み込みに失敗の場合は途中で停止する。


【重要】、jsoncallback は url の最後に記述します。



var loadImage_len=20;//表示件数

//flickr用配列
var flickrImages=[];//画像保存配列
var flickrLinks=[];//オーナーページのリンク
var flickr=false;//flickrデータ取得判別
var flickrW=[];
var flickrH=[];
var loadItem=0;//flickrデータ数

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

//jQuery-getJSON
function getFlickrData() {
	var flickrAPI="https://api.flickr.com/services/feeds/photos_public.gne?jsoncallback=?";
	$.getJSON(flickrAPI,{
		format:"json",
		tags:"東京",
		tagmode:"any"
	},
	function(data){
		var result=data.items;
		//検索item数
		var item_len=result.length || 0;
		loadItem=item_len;
		//補正
		if(item_len < loadImage_len){loadImage_len=item_len;}

		if(item_len > 1) {
			//forループ処理
			for(var i=0; i < loadImage_len; i++){
				flickrImages.push(result[i].media.m);//注意、mのみ有効
				var link=result[i].link;
				flickrLinks.push(link);//元画像
				if(i == loadImage_len-1) {
						break;
				}
			}
			flickr=true;

		} else {
			flickr=false;
			loadImage_len=0;
		}
		init();

	})
	//ERROR
	.error(function(){
		flickr=false;
		init();
	});
};

サンプルデモJSの設定


1. 表示画面、640x400です。(横長画像が多いので、高さを小さくした、変更可能)
2. 表示画像スケールの変更が可能ですが、サムネール画像なのでデモでは、1.25 にしている。
3. ボタンの大きさなどの変更が可能です。最大表示件数20件。
3. AUTO表示ですが、下のサムネールボタンで任意の画像を表示できます。
4. 画像エフェクト実行中はボタンを押しても無効です。


zu

 

● JSの設定

JS(createJS111.js)上部初期設定で設定出来ます。詳細はJSを参照ください。
image_scale、は 1.25 にしてください。(1.25以上は画像がぼけてくる、設定値は自由)
loadImage_len、は 6-20 の値です。(ボタンの大きさで並べられる数が決まる、設定は自由)


小さなサムネールボタン


//表示スケール
var image_scale=1.25;//1-2
//Flickr読み込み画像数最大20
var loadImage_len=20;//6-20

//サムネールボタンの大きさ
var btnW=24;//幅
var btnH=24;//高さ
var btnR=3;//角丸半径
//ボタン間の間隔
var btnSpace=4;

大きなサムネールボタン


//表示スケール
var image_scale=1.25;//1-2
//Flickr読み込み画像数最大20
var loadImage_len=20;//6-20

//サムネールボタンの大きさ
var btnW=40;//幅
var btnH=40;//高さ
var btnR=5;//角丸半径
//ボタン間の間隔
var btnSpace=-10;

オーナーページへのA-LINK

ボタンは使わず、通常のhtml「aリンク」を使用して、jQueryで操作しています。
DOMElement Classも使用できるが、初期にレイアウトが崩れる(動く)のであえてjQueryで操作している。



<div id="ownerlinkblock"><p>OWNER: <a id="ownerlinks" target="blank"></a></p></div>

LoadQueue画像一括ロード

CreateJSでは、Flickrの画像データ取得に成功しても、この「デモ」では LoadQueue で「画像をロード」しなければCanvasに表示出来ません。そのため、サーバーが混雑する時「画像をロード」出来ない場合があります。「画像をロード」終了後途中で停止します。
「画像をロード」は、通常4-5秒以内に完了しますが、30秒もかかる場合は「画像取得」に失敗しています。CreateJSで完全なエラー処理は行っていませんのでこの点ご了承ください。

300回ほどテストしましたが、Chromeで1回発生しましたので、急きょ記載しておきます。


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

記載例、処理内容は同じです。



//jQuery-ajax
function getFlickrData(){
	$.ajax({
		type:"GET",
		url:"https://api.flickr.com/services/feeds/photos_public.gne?jsoncallback=?",
		data:{
			tags: "JAL",
			tagmode: "any",
			format: "json"
		},
		dataType:"json",
		success:function(data,dataType){

			var result=data.items;
			//検索item数
			var item_len=result.length || 0;
			loadItem=item_len;
			//補正
			if(item_len < loadImage_len){loadImage_len=item_len;}

			if(item_len > 1) {
				//forループ処理
				for(var i=0; i < loadImage_len; i++){
					flickrImages.push(result[i].media.m);//注意、mのみ有効
					var link=result[i].link;
					flickrLinks.push(link);//元画像
					if(i == loadImage_len-1) {
						break;
					}
				}
				flickr=true;

			} else {
				flickr=false;
				loadImage_len=0;
			}
			init();

		},
		error:function(XMLHttpRequest,textStatus,errorThrown){
			flickr=false;
			init();
		}

	});
}

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


 


 

以下、番外ですので、興味のある方のみお読みください。


XMLで処理する場合

photos_public.gne をXMLで処理する場合はクロスドメインの関係で処理出来ません。そのため「FlickrAPIキー」なしでサムネール画像を得る処理は面倒になります。
xmlファイルも大きく、上記の様にjQuery.getJSON()で処理出来るので必要性は無いのですが、一応参考のためにテスト的に実行してみます。
ここで得られるxmlファイルはRSS Feedの形態の記事一覧を表示ですので、最近は、Google Feed API を利用するのが簡単なようです。他にも数例の方法はあるようですが省略します。


Google Feed APIを使用してFeedを表示させる方法

下記の記事を参考に「サムネール画像」を表示してみますが。「デモ」は普通のjQueryの処理で有り、CreateJS、Canvas処理では有りません。(Canvas処理も出来るが、jQuery.getJSON()処理の方が簡単なので省略します)
また、取得できる情報の詳細に関してはGoogle Feed APIをご参照ください。


【参考】zxcvbnmnbvcxz.comの記事: 簡単RSSを取得表示させる方法

 

実際の処理とデモ (Google Feed API利用XML処理)

参考サイトJSの丸写しみたいなものですが、デモは下記にあります。

この「デモ」ページはHTML5です。

zu



先に、Google Feed APIにアクセスしておきます。当然jQueryも読み込みます。


<script type="text/javascript" src="https://www.google.com/jsapi"></script>

表示させるエレメントを用意します。


<ul id="feed"></ul>

次の様に記載して、flickrAPIにアクセスすると簡単に表示出来ます。参考では「TEXT表示」ですので、「TEXTと画像表示」、「画像表示」、「A-Link画像表示」を出来るように修正してみました。
デモは「A-Link画像表示」を表示しました。画像を「クリック」すればオーナーのページにジャンプします。


google-api経由xml処理、flickrapifeeds.js




//google-api経由xml処理
//flickrapifeeds.js

(function() {
	//google-api処理
	google.load("feeds", "1");
	function initialize() {

		var tag="新幹線";

		var feedurl="https://api.flickr.com/services/feeds/photos_public.gne?tags="+ tag +"&tagmode=any";
		var feed=new google.feeds.Feed(feedurl);
		feed.setNumEntries(10);

		feed.load(function (result){
			if (!result.error){

				/*
				//TEXT表示
				for (var i=0; i < result.feed.entries.length;i++) {
					var entry=result.feed.entries[i];
					var title='<li><h3><a href="' + entry.link + '">' + entry.title + '</a></h3></li>';
					var conte='<li>' + entry.contentSnippet + '</li>';
					var dates='<li>' + entry.publishedDate + '</li>';
					$('#feed').append('<li class="post"><ul>' + title + conte + dates + '</ul></li>');
				}
				*/

				/*
				//TEXTと画像表示
				for (var i=0; i < result.feed.entries.length;i++) {
					var entry=result.feed.entries[i];
					var content=entry.content;
					$('#feed').append('<li class="post"><ul>' + content + '</ul></li>');
				}
				*/

				/*
				//画像のみ表示
				for (var i=0; i < result.feed.entries.length;i++) {
					var entry=result.feed.entries[i];
					var content=entry.content;
					var img_src=$(content).find('img').attr('src');
					$('#feed').append('<img src="'+ img_src +'" />');
				}
				*/

				//A-Link画像表示
				for (var i=0; i < result.feed.entries.length;i++) {
					var entry=result.feed.entries[i];
					var content=entry.content;
					var img_src=$(content).find('img').attr('src');
					var link=entry.link;
					$('#feed').append('<a href="' + link +'" target="blank"><img src="'+ img_src +'" /></a>');
				}

			}
			if (result.error){
				$('#feed').append('<li class="post"><ul>' + "表示出来ません" + '</ul></li>');
			}
		});
	}
	google.setOnLoadCallback(initialize);
})();

xmlファイルは、下記の様に、ブラウザで見ることが出来ますので、それを参考に上のコードを作りました。



https://api.flickr.com/services/feeds/photos_public.gne?tags=tokyo&tagmode=any

<?xml version="1.0" encoding="utf-8" standalone="yes"?>
<feed xmlns="http://www.w3.org/2005/Atom"
	xmlns:dc="http://purl.org/dc/elements/1.1/"
	xmlns:flickr="urn:flickr:user"
	xmlns:media="http://search.yahoo.com/mrss/">

	中は大盛りなので略す

</feed>

Flickr API に関することは以下サイトが参考になります。

【参考】thedesignium.comの記事: Flickr APIを使った写真検索

【参考】itpro.nikkeibp.co.jpの記事: JavaScriptからFlickr APIで画像検索

【参考】blog.livedoorの記事: jQueryのgetJSONメソッドで、Flickrから画像URLを取得してみる

【参考】d.hatena.ne.jpの記事: [JavaScript] Ajax クロスドメイン


jQuery.getJSON()は下記リファレンス記事などを参考にしました。

【参考】stacktrace.jpの記事: jquery.getJSON

【参考】semooh.jpの記事: jQuery日本語リファレンスjQuery.getJSON

【参考】studio-kingdom.comの記事: jquery getJSON



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

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


 

あえてCanvasに表示すべきものでは無い様です。次回は画像が大きいので多少は有効かも知れません。
以上です。

 


[ この記事のURL ]


 

ブログ記事一覧

年別アーカイブ一覧



[1]