POPSブログ

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

329

  Category:  javascript2014/11/26 pops 

FlickrAPI photos.search メソッド利用でデータをjQuery.getJSONで読み込み、画像をCreateJSでCanvas表示します。FlickrAPIデータ取得には「FlickrAPIキー」が必要になりますが「指定する大きな画像」を得られるのが特徴です。
easeljs-0.7.1 でのテストです

 

CreateJS FlickrAPI photos.search メソッド利用のjQuery.getJSON画像表示テスト

「FlickrAPIキー」を取得して自由に画像検索して大きな画像を表示する方法ですが、JSON、XML形式共に取得は簡単であり、且つ、画像検索表示以外にも色々なFlickrAPI機能を利用できます。


今回は「FlickrAPIキー」を取得しての画像検索表示する方法を考えて見ます。
「FlickrAPIキー」なしで最新の更新サムネールを得る方法は「前ページ」で解説しました。


重要、easeljs-0.8用について

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


 

▼[ 簡単な説明の目次に進む ]

 

DEMO (jQuery.getJSON処理)

▼[ 目次 ]


CreateJS FlickrAPI photos.search メソッド利用のjQuery.getJSON画像表示デモ (createJS112.js)

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


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


easeljs-0.7.1用デモ


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処理用に、事前にjQuery1.5以上が必要です。(処理内容によってはjQuery1.8以上)


HTML (HTML5)


<div id="demo-wrap">
	<div id="image-box" class="radius">
		<canvas id="mainCanvas" width="640" height="640"></canvas>
	</div>
	<div id="btn-box">
		<canvas id="subCanvas" width="640" height="60"></canvas>
	</div>
</div>

JS

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


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

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

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

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

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

//サムネールbtnの使用 useのこと
var thumbbtn_use="use";
//クリック専用ボタン
var hitbtn=true;//true false

//Loading AUTOの文字を表示するかuse
var text_use="use";
//Flickr画像のタイトル文字を表示するかuse
var titletext_use="use";

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

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

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

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

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

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

//読み込み画像の大きさ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];
//OWNER-LINKボタン
var linkBtn;

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

	//ステージ
	stage=new createjs.Stage('mainCanvas');
	//MouseOver重要
	stage.enableMouseOver(20);
	//ステージ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_back3.jpg");//640x640
	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);

	//flickrApi読み込み成功
	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=loadingIndicator3();//透過形
		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);//未使用

		//レーヤー
		titlecontainer=new createjs.Container();
		//Overlayを作るを作る
		var overLay=new createjs.Shape();
		overLay.graphics.beginFill('rgba(0,0,0,0.5)').drawRect(0,0,canvasWidth,50);
		//簡易TITLE-TEXT
		titletext=new createjs.Text("","12px Arial","#FFFFFF");
		titletext.x=20;
		titletext.y=20;
		titletext.maxWidth=canvasWidth-40;
		titletext.lineHeight=20;
		titletext.textBaseline="bottom";
		titletext.shadow=shadow;//SHADOW処理
		//簡易OWNER-TEXT
		ownertext=new createjs.Text("","12px Arial","#FFFFFF");
		ownertext.x=20;
		ownertext.y=40;
		ownertext.maxWidth=canvasWidth-40;
		ownertext.lineHeight=20;
		ownertext.textBaseline="bottom";
		ownertext.shadow=shadow;//SHADOW処理
		//
		titlecontainer.addChild(overLay,titletext,ownertext);
		titlecontainer.y=canvasHeight-50
		stage.addChild(titlecontainer);
		titlecontainer.visible=false;

		//アクションレーヤー
		actionlay=new createjs.Shape();
		actionlay.graphics.beginFill('rgba(0,0,0,0.01)').drawRect(0,0,canvasWidth,canvasHeight);//透過
		stage.addChild(actionlay);

		//アクション変更/ステージアクションだめ
		actionlay.addEventListener('rollover',function(){
			titlecontainer.visible=true;
		});
		actionlay.addEventListener('rollout',function(){
			titlecontainer.visible=false;
		});

	}

	//簡易TEXT
	viewtext=new createjs.Text("Flickr","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);

	//データ件数表示
	if(flickr) {set_text(" Flickr読み込みデータ件数: "+loadItem);}
	stage.update();

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

	//調整
	setTimeout(function() {

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

}

//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(!hitbtn) {set_text("注意、サムネールClickは機能しません!");}

	//画像整形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 (thumbbtn_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("");

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

		},delay_speed);
	}

}

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

	globalflag=false;

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

	//activeボタン色変更
	if (thumbbtn_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;
	}

	//FlickrTitle
	et_titletext("TITLE: " + flickrTitles[image_no]);
	set_ownertext("OWNER: " + flickrOwners[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;
	}
}
//TITLETEXT
function set_titletext(tt) {
	if (titletext_use=='use') {
		titletext.text=tt;
	}
}
function set_ownertext(tt) {
	if (titletext_use=='use') {
		ownertext.text=tt;
	}
}

//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;
}

//文字ボタン
//X、Y、幅、高さ、角丸半径、背景色、ラベル、番号
function createTextbtn2 (x,y,w,h,r,color,label,no) {

	//BTNコンテナ
	var btn=new createjs.Container();
	btn.x=x;
	btn.y=y;
	l=new createjs.Text(label,"12px Arial","#FFFFFF");
	l.maxWidth=w;
	l.textAlign="center";
	l.textBaseline="middle";
	l.name="text";//name挿入
	var s=new createjs.Shape();
	s.graphics.beginFill(color).drawRoundRect(x,y,w,h,r);
	s.name="back";//name挿入
	s.regX=w/2;
	s.regY=h/2;
	btn.addChild(s,l);
	btn.shadow=shadow;

	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) {

	//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;
}

//簡単なLOADING3
function loadingIndicator3 () {

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

	//描画データ
	var alpha_v=1;//透明度
	var alphaback;

	var cx,cy;
	var numNeedles=12;
	var innerR=15;
	var outerR=10;
	var cAngle=-Math.PI/2;
	var nAngle;

	//ライン描画
	nAngle=Math.PI*2/numNeedles;
	for (var i=0; i < numNeedles; i++){

		//回転補正
		rotateflag=cAngle -=nAngle;
		//透明度を描画毎に変更
		if (i > 0) {alpha_v -=0.05;}

		//#CCCCCC
		alphaback=createjs.Graphics.getRGB(204,204,204,alpha_v);
		cx=Math.cos(cAngle)*innerR;
		cy=Math.sin(cAngle)*innerR;
		graphics.beginStroke(alphaback).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 flickrTitles=[];
var flickrOwners=[];

var flickr=false;
var flickrW=[];
var flickrH=[];
var loadItem=0;

//jQuery-getJSON/現在使用
function getFlickrData(){

	//https重要
	var FlickrAPI="https://api.flickr.com/services/rest/?jsoncallback=?";
	$.getJSON(FlickrAPI,{

		method:"flickr.photos.search",
		api_key:"32dbd23f3f7e6d0ae494b99eebb57c93",
		per_page:loadImage_len,
		extras:"owner_name",
		tags:"新幹線,東北新幹線,Shinkansen",
		tag_mode:"any",
		format:"json"
		},
		function(data){

			flickr=false;

			var photos=data.photos.photo;
			//検索表示数補正
			loadImage_len=photos.length || 0;
			loadItem=loadImage_len;//データ数保存

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

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

				var img_url="https://farm" + farmId + ".staticflickr.com/"+ serverId +"/" + id + "_"+ secret +"_z.jpg";
				//実際画像
				flickrImages.push(img_url);
				flickrTitles.push(title);
				flickrOwners.push(ownername);

			}

			//判定
			if(loadImage_len > 0) {flickr=true;}
			init();

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

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

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

}

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


CSS

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


/*日本語 createJS112.css*/

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

#image-box {
/*position:absolute;*/
position:relative;
top:0;left:0;
width:640px;
height:640px;
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;
}

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


 

簡単な説明


[ 簡単な説明の目次 ]



[説明図]

 

「FlickrAPIキー」を取得して大きな画像を検索表示する方法

▲[ 目次 ]


flickrAPIの photos.search メソッドを利用し、原則、JSON形式のデータを得ます。(後処理が簡単なため)


Flickrに「登録」し、且つ「FlickrAPIキー」を取得しなければ利用出来ないのが難点です。

jQuery.getJSONはクロスドメインのJSON形式のデータを簡単に取得出来ますのでこの方法で処理します。また photos.search メソッドを利用の場合は、クロスドメインXML形式のデータも簡単に処理できます。(得られるXMLは、RSS Feedではない為に処理出来る)


1. Flickr画像の検索結果を原則標準で 100件 取得出来ます。(per_pageで件数指定可能)
但し、検索結果ですから、指定件数より少ない場合もあります。
2. Flickrに登録して「FlickrAPIキー」を取得しなければ機能の使用は出来ません。
3. 画像の検索結果表示以外に、色々な機能を使用可能ですがここでの説明は省略します。
4. Flickrでの、JSON、XML形式共にデータ取得は簡単です。(指定なき初期はXMLで出力)
5. JSON形式のデータのファイルは、XML形式と比較して容量が小さくなります。
6. Flickrの場合は、callback の param が "callback" でなくて、"jsoncallback" です。
【重要】、jsoncallback は url の最後に記述します。


FlickrAPIキーの取得

● FlickrAPIキーの取得
Flickr「Sign in」には、米国Yahooの「ID」が必要です。米国Yahoo「ID」取得には電話番号(普通電話または携帯電話)の入力を求められます。米国Yahoo「ID」があった方が簡単です。(日本Yahoo「ID」では利用出来ない)


1. Flickrの「Sign in」には、米国Yahooの「ID」が必要ですので、新規の場合は「Sign up」で登録します。或いは事前に米国Yahooに登録して「ID」を取得しておく。
2. 「Sign in」後「Explore」メニューより「App Garden」に進み、画面右下 For Developers の「Get an API Key」より取得出来ます。(使用ライセンスは左「個人用」を選定、使用目的には「TEST」とでも書けばよい)
3. 表示される、「FlickrAPIキー」と「Secret」をコピーして保存します。(注意、メールでの送付はされません)


以外と面倒ですが、事前に「Sign up」の手順などネットで調べておいた方がよろしいと思います。私は先に米国Yahoo「ID」を取得して利用しました。

【参考】Yahoo知恵袋の記事: アメリカのYAHOOを利用したいのですが、IDがつくれません。何かたりない...


flickrAPI利用の場合の一般的処理

● flickrAPI利用の場合
以下のような書き方になるのが一般的のようです。jsoncallback はURLの最後に記述する。
photos.searchメソッドを利用しますが、必要なデータを指定して得ることも可能です。検索にはタグ以外のtext(キーワード)を指定などの検索も出来ます。


https://api.flickr.com/services/rest は明示的にフォーマットを json にしなければ初期値は xml で出力されますので、jQuery.getJSON()処理では必ず format:"json" を設定します。
(通常は、xml表記のテキストとして出力、json指定ならばjson表記のテキスト)


jQuery.getJSON()はjson形式データ処理専用です。




function 関数名 (){

	//https重要
	var FlickrAPI="https://api.flickr.com/services/rest/?jsoncallback=?";
	$.getJSON(FlickrAPI,{
		format:"json",
		method:"flickr.photos.search",
		api_key:"APIキー",
		tags:"タグ名",
		tag_mode:"any"
		},
		function(data){

			//処理を書く

		}
	)
	//ERROR
	.error(function(){
		//処理を書く
	});
}

jQuery1.8以降ならば、.done()、.fail()、を使用して以下の様にも書ける。

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



function 関数名 (){

	//https重要
	var FlickrAPI="https://api.flickr.com/services/rest/?jsoncallback=?";
	$.getJSON(FlickrAPI,{
		format:"json",
		method:"flickr.photos.search",
		api_key:"APIキー",
		tags:"タグ名",
		tag_mode:"any"
	})
	.done(function(data){

		//処理を書く

	})
	.fail(function(){
		//処理を書く
	});
}

タグ検索の外に「キーワード検索」「ユーザーID検索」も可能です。(tags, text,user_id の何れかで検索条件を指定)


tags:"タグ名"
或いは
text:"キーワード"
或いは
user_id:ユーザーID

 

flickrAPI利用のCreateJSで画像表示

▲[ 目次 ]


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


1. 画像をCreateJSで表示するために、ローダーで読み込みしなければならない。(時間がかかる)
2. 検索結果、画像データがない場合をも考慮しなければならない。
3. メニューボタンを多く出来ないので、一応、最大20件表示に限定する。


FlickrAPIの検索結果の戻り値

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


FlickrAPIの検索結果の戻り値の違いによって、処理を変更しないと、後でのCreateJS処理に影響がでますから面倒です。つまりCreateJS処理に都合の良い様に作っている。


● 検索に成功した場合の「json形式データ」は次の様になります。
"photos" に複数の "photo" が存在して、
"photo" の中に個々のデータが収められています。



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

jsonFlickrApi({"photos":{"page":1,"pages":74529,"perpage":100,"total":"7452889","photo":
	[{"id":"15737108265","owner":"67616546@N03","secret":"b8cd57897d","server":"3944","farm":4,"title":"Tokyo Taxi Queue","ispublic":1,"isfriend":0,"isfamily":0},

	以下検索数分繰り返し

	]},"stat":"ok"})

● 検索に失敗した場合の「json形式データ」は次の様になります。
photo の中が空になります。「検索に失敗」しても「戻り値」が在ることに注意ください。
「kokekokkou」をタグとしての検索結果です。通常こんなタグは無いでしょうから当然返り値の"photo"は空に成ります。


検索に失敗した場合には返り値があるので、「エラー」には出無いことが多く、この後のCreateJSで「画像ロード」が出来なく「Loading」が無期限に周り続けるなどの結果に繋がる。その辺の回避処理をしておきたいものです。



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

jsonFlickrApi({"photos":{"page":1,"pages":0,"perpage":100,"total":"0","photo":[]},"stat":"ok"})

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

参考、formatのみ json にしてメソッド無しでアクセスした場合(当方のページの都合で略記)
https://api.flickr.com/services/rest?format=json

jsonFlickrApi({"stat":"fail","code":112,"message"Method unknown not found"})

● 画像を得る書式
「json形式データ」からは基本的な画像のIDなどの情報しか得られないので、Flickrの定められた書式で画像URLなどを作る。
画像URLを得るには、下記の書式でそれぞれ取得した値を代入すれば良く、画像の大きさも指定で出来ます。
オーナーページなどのリンクは後に記す。



var img_ur="https://farm" + farmId + ".staticflickr.com/"+ serverId +"/" + id + "_"+ secret +"_z.jpg";

画像個々のデータはハッシュの形で得られますから、次の様にすれば、画像のURLを取得保存出来ます。
複数あるphoto値をphotos配列に取り込むみ、画像のURLを作るデータを取り出す。
この後、CreateJSローダーで画像をロードするため、画像のURLを flickrImages 配列に保存します。



var loadImage_len=10;//指定画像数
var flickrImages[];//URL格納配列

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

function(data){

	//photoの値を配列photosに取り込む
	var photos=data.photos.photo;

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

		//画像URL取得に必要なデータをとりだす
		var farmId=photos[i].farm;
		var serverId=photos[i].server;
		var id=photos[i].id;
		var secret=photos[i].secret;
		var title=photos[i].title;
		var owner=photos[i].owner;

		//画像URLを作る
		var img_url="https://farm" + farmId + ".staticflickr.com/"+ serverId +"/" + id + "_"+ secret +"_z.jpg";
		//flickrImages配列に保存
		flickrImages.push(img_url);
		//指定画像数でループを抜ける
		if(i == loadImage_len-1){break;}

	}

}

● 画像の大きさの指定
最後の"_z.jpg"の値を変更すれば良い。_zは横または縦が640pxサイズである事を意味する。
オーナーのアップロードサイズは様ざまであり、必ずしも大きな画像があるとは限らない。リサイズ出来ない画像は元のサイズで表示されます。
表示方法などを考慮して、下記の規定で取得するサイズを決定すれば良い。

【参考】flickr.comの記事: URLs



Flickrの画像サイズの指定

_s 中心部分をトリミングした75x75サイズ画像
_t 縦横で長い方を100pxにリサイズされた画像
_m 縦横で長い方を500pxにリサイズされた画像
_z 縦横で長い方を640pxにリサイズされた画像
_b 縦横で長い方を1024pxにリサイズされた画像

● オーナーギャラリーへのリンク
Flickr内のオーナーのページ(photostream)は、「一覧表示ページ」と「アルバム形式のビューアー」の2種類が用意されていてどちらにもリンク出来る。
基本的には「アルバム形式のビューアー」にリンクすれば、より大きな画像サイズで閲覧、ダウンロードなどが出来る。

今回はリンクに対応していません。次回に対応させます。



アルバム形式のビューアー
var link_url="https://www.flickr.com/photos/" + owner +"/" + id;

一覧表示ページ
var link_url="https://www.flickr.com/photos/" + owner;

● オーナー名
通常得られる、owner は「オーナー名」では有りません。「オーナー名」を得るには事前に extras:"owner_name" を設定しておき、返り値より抽出しなければなりません。ここでは保存しておきます。

【参考】flickr.comの記事: photos.search




	略す

	$.getJSON(FlickrAPI,{
		format:"json",
		method:"flickr.photos.search",
		api_key:"APIキー",
		tags:"タグ名",
		tag_mode:"any",
		extras:"owner_name"
		},
		function(data){

			略す

			var ownername=photos[i].ownername;

			略す

		}
	)

	略す


● FlickrAPIの資料
下記にFlickrAPIの説明資料があるが、断片的で判りにくいようだ。「Documentation」Read these first を参照下さい。

【参考】flickr.comの記事: API Documentation


2014年6月 http から https への変更

▲[ 目次 ]


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

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


 

実際のjQuery.getJSON処理

▲[ 目次 ]


jQuery.getJSON処理

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

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



//検索item数
var item_len=photos.length || 0;

1. 取得する画像URLは 上記「画像を得る書式」で作る。
2. オーナーのページのURLは 上記「オーナーギャラリーへのリンク」書式で作る。
(但し、このデモではリンクは使用していない)
3. 画像URLがあれば、CreateJS処理のLoadQueue画像一括ロードに進みます。
4. その他は「デモ」に合わせる処理です。


Flickrのtagsの指定は決まりがあるようですが..... (photos.searchメソッドの場合のテスト結果)
「Flickr画像」の検索結果ですから、ファイルは返りますが、タグ名、或いは書き方によって検索結果が無い場合もあります。後述の「flickrAPI利用の検索条件の設定」でテスト結果を書いています。
詳細はFlickrのapiリファレンスなどを参照ください。


1. 通常タグは英字で指定します。
2. 日本語の指定も可能です。
3, 複数タグ検索は半角カンマ「,」で区切る。
4. 半角スペースを入れる場合は英字のみ可能。(日本語では検索結果が無い)
6. タグは OR AND 検索が可能のようです。
5. photos.searchメソッドでのキーワード検索が可能です。(text:"tokyo" など)
6. あまり使用しないタグでは、検索結果の無い場合の頻度は増します。
7. オーナー画像によっては関係しないタグも登録されていますので、検索タグに添う結果が得られるとは限りません。(これは実際非常に困ることです)


 

デモでのjQuery.getJSON処理例

▲[ 目次 ]


CreateJSとの連携のため少々面倒になっています。最初にflickrデータをjQueryで読み込んでからCreateJS処理に進みます。flickrデータの読み込みに失敗の場合は途中で停止する。
オーナー名を取得するために、extras を設定しています。オーナーページのリンクは今回していませんので.....


● 検索データを取得順に指定件数表示

検索データを取得順に指定件数分表示する場合、取得件数が多くても表示出来ないでので非効率である故、指定件数分、per_page で設定して処理する。返るJSONもファイルが小さくなる。
但し、検索条件にそぐわない画像が並ぶ恐れあり。


DEMOでは現在これで表示しています。 [ DEMOページに進む ]


【重要】、jsoncallback は url の最後に記述します。
api_key は自分の「FlickrAPIキー」を取得して使用ください。




var loadImage_len=20;//表示件数

//flickr用配列
var flickrImages=[];//画像保存配列
var flickrTitles=[];//タイトル保存配列
var flickrOwners=[];//オーナー名保存配列

var flickr=false;//flickrデータ取得判別
var flickrW=[];
var flickrH=[];
var loadItem=0;//flickrデータ数

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

//jQuery-getJSON/jsoncallback=?重要/現在使用
function getFlickrData(){

	//https重要
	var FlickrAPI="https://api.flickr.com/services/rest/?jsoncallback=?";
	$.getJSON(FlickrAPI,{

		method:"flickr.photos.search",
		api_key:"32dbd23f3f7e6d0ae494b99eebb57c93",
		per_page:loadImage_len,
		extras:"owner_name",
		tags:"新幹線,東北新幹線,Shinkansen",
		tag_mode:"any",
		format:"json"
		},
		function(data){

			flickr=false;

			var photos=data.photos.photo;
			//検索表示数補正
			loadImage_len=photos.length || 0;
			loadItem=loadImage_len;//データ数保存

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

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

				var img_url="https://farm" + farmId + ".staticflickr.com/"+ serverId +"/" + id + "_"+ secret +"_z.jpg";
				//実際画像
				flickrImages.push(img_url);
				flickrTitles.push(title);
				flickrOwners.push(ownername);

			}

			//判定
			if(loadImage_len > 0) {flickr=true;}
			init();

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

● シャッフルしてランダム表示

検索件数が多い場合表示がいつも同じであるから、シャッフルしてランダム表示させる。写真をみて楽しむならこちらが良いと思う。検索条件にそぐわない画像も分散される。


//jQuery-getJSON
function getFlickrData(){

	//https重要
	var FlickrAPI="https://api.flickr.com/services/rest/?jsoncallback=?";
	$.getJSON(FlickrAPI,{

		method:"flickr.photos.search",
		api_key:"32dbd23f3f7e6d0ae494b99eebb57c93",
		extras:"owner_name",
		tags:"新幹線,東北新幹線,Shinkansen",
		tag_mode:"any",
		format:"json"
		},
		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 farmId=photos[arr_no[i]].farm;
					var serverId=photos[arr_no[i]].server;
					var id=photos[arr_no[i]].id;
					var secret=photos[arr_no[i]].secret;
					var title=photos[arr_no[i]].title;
					var owner=photos[arr_no[i]].owner;
					var ownername=photos[arr_no[i]].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();

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

シャッフル(ランダムに並び替え)は元のデータ「photo」を並べ変えは出来ないので、別配列をシャッフルして「データphoto」を並べ変えしたように見せかけている。
シャッフル無しならシャッフル部分を削除して、ループ内の photos[arr_no[i]] を photos[i] にすれば良い。


以下削除する
/*
var arr_no=[];
for(var i=0; i < photos.length; i++){
	arr_no.push(i);
}
arr_no.sort(function() {return Math.random()-0.5;});
*/

ループ内変更
for(var i=0; i < photos.length; i++){

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

	略す

}

flickrAPI利用の検索条件の設定

▲[ 目次 ]


● 検索件数指定
指定のない場合は100件を返します。per_page=0指定、1件返します、エラーにならないよう配慮かと思います。


per_page:20

● 検索条件を指定
tags, text,user_id のいずれかで検索条件を指定します。
下記の様に間違って書いても、結果は返るが検索手順などは不明です。原則書かないことです。



tags:"新幹線,東北新幹線",
tag_mode:"any",
text:"JR東日本"

● タグ
タグ名で検索する。日本語可能。半角スペースに注意。
日本語で検索すれば、国産の人、日本語の判る外国産の人のものが検索にかかり易く、英数字であれば地球規模の検索で範囲は広がるし無関係のものもひっかかり易い。宇宙語で書けば「タコ」がひっかかるらしい。

複数の写真が1つの「スライドショー」単位で複数のタグが付けてある事も多いので、無関係の写真を検索する可能性も高い。目的とする画像を検索するに、この辺の「検索条件設定」は難しい。



tags:"Tokyo"
tags:"東京"

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

NG 日本語は検索結果が無いので注意
tags:"新幹線 東北新幹線"

複数検索


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

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

JALで日本航空とは無関係なジャンルの検索結果も出る
tags:"JAL,日本航空,JapanAirLines",

検索結果無し


tags:"世田谷新幹線"
tags:"hogehogehoge"

● タグモード
タグ検索で一応 OR AND の指定が機能するようだ。
しかし判らないこと多し。Shinkansen,groupsの2つのタグが設定されているものは無いと思うが検索結果は....
意外と、「風まかせ」の感がする。


tag_mode:"any"
または
tag_mode:"all"

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

なぜか、groupsのみ検索するのはなぜだ、前のタグが無効ということかな
tags:"Shinkansen,groups"
tag_mode:"all"

検索結果無し、納得する
tags:"Shinkansen groups"
tag_mode:"all"

URLに記載ならば、以下の様にも書けるが、注意が必要です。なるべくdata{}の中に記入すべきと思う。



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

但し、URLに「間違ったフォーマットxml指定」ならば返り値は有りません。十分注意だ。


formatがfomatになっているので、xmlで返るが中身なし
https://api.flickr.com/services/rest?method=flickr.photos.search&api_key=APIキー&tags=JAL&fomat=xml

正しくは
https://api.flickr.com/services/rest?method=flickr.photos.search&api_key=APIキー&tags=JAL&format=xml
または
https://api.flickr.com/services/rest?method=flickr.photos.search&api_key=APIキー&tags=JAL

● キーワード検索
請け渡しデータにtextでキーワードを設定すれば「キーワード全文検索」も行えると言う事ですが、詳細は不明。
タグ群、あるいはテキスト文字などのに中に「キーワード」文字が含まれればの意味だと思うのですが......

タグ検索と比較して「複数キーワード」での検索の方が的確のような気がします。



text:キーワード

OK 検索結果は返るがどちらが正しいのか.....
text:"新幹線 東北新幹線"
text:"新幹線,東北新幹線"

● ユーザーID検索
受け渡しデータ にuser_id でユーザーIDを設定すれば「ユーザーID検索」も行えると言う事ですが、"owner" の値です。
json の場合、"owner":"54674924@N06" などと表記されています。

タグ検索と一緒に設定した場合は返り値は有りませんので、単独で検索してください。



user_id:"ownerの値"

例
user_id:"54674924@N06"

以上、検索などの記載方法はテストの結果です。良く判らない面も多いので、マチガイなどはご容赦ください。


Flickr画像表示の問題点 (個人的見解)

表示処理上の問題では有りません。検索表示して感じることです。意味不明ピンボケ画像など見ていては、オイラノ人生はナン何のだと言いたくなる。貴方はどう思いますか.......


1. 当初は写真家などの作品が多く、素晴らしいと思った。(技術的に優秀な作品がみれた)
2. 最近は、単に写真画像の無料保管庫になっている。(ピンボケ、意味不明画像も多いので感動する)
3. タグ検索で、目的写真画像を表示するのが、大変難しい。(「新幹線検索」で弁当と車窓風景の揃い踏み)
4. Canvas表示の必要性はあるのか.... (画像貧困者の収集手段くらいの価値、Canvasを利用せずに通常のHtmlで作ったほうが良いものが出来そうである)


 

サンプルデモJSの設定

▲[ 目次 ]


1. 表示画面、_zサイズの画像扱いのために、640x640です。
2. 表示画像スケールの変更が可能ですが、デモでは、1 にしている。
3. ボタンの大きさなどの変更が可能です。最大表示件数20件位です。
3. AUTO表示ですが、下のサムネールボタンで任意の画像を表示できます。
4. 画像エフェクト実行中はボタンを押しても無効です。
5. 画面HOVERでタイトルとオーナー名を表示します。


 

● JSの設定

JS(createJS112.js)上部初期設定で設定出来ます。詳細はJSを参照ください。
image_scale、は 1 にしてください。(スケール設定値は自由であるが食み出た分は表示されない)
loadImage_len、は 6-20 の値です。
(ボタンの大きさで並べられる数が決まるが、設定分のみの検索件数にしている。設定は自由)


小さなサムネールボタン


//表示スケール
var image_scale=1;//原則1
//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;

メニュー形式の変更

現在のボタン形式では数多くの画像の読み込みには適していません。スライドメニューにすれば良いのですが、画像が多いとCreateJSで「画像ロード」に時間がかかり過ぎるので止めています。(createjs.LoadQueueは遅い)


オーナーページへのLINK

ボタンなどで、オーナーページへのLINKも可能ですが、このデモでは設定していません。
次回に「オーナーページへのLINK」ボタンを付けたものを作ります。


LoadQueue画像一括ロード

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

「FlickrAPIキー」を取得しての photos.search メソッド利用はサーバー負荷が小さい様ですから、確実性が高いような気がします。実際に処理は早い。


クロスドメイン画像の影響

Canvas表示では原則、ドメイン内の画像を表示させます。クロスドメイン画像も表示は出来ますが、クロスドメイン画像故アクション設定がセキュリティの関係で機能しない事が有ります。


1. サムネールボタンのアクションが機能しないので、中にアクション専用のShapeを内包しそれにアクションを設定して回避した。
2. タイトルの表示アクションは、この構成では通常ステージにアクションを設定するが、ステージの大きさのクロスドメイン画像のために機能しない。そのため専用のShapeアクションレーヤー(actionlay)を上層において、それにアクションを設定した。
これも、透明度 0 にしたいのだが、アクションが効かず、透明度 0.01 にしている。


クロスドメイン画像による不都合が生じたら、それなりの工夫が必要です。


▲[ 目次 ]



jQuery.ajax()処理は都合により「次のページ」に移動しましたので、そちらでご覧ください。11/27日

【参照】当方の記事: CreateJS FlickrAPI photos.search メソッド利用のjQuery.ajax()画像表示




jQuery1.8以降の$.ajax通信に変更、.done()、.fail()、などに関しては下記サイト記事が参考になります。

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

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

 

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 クロスドメイン




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

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


画像が大きいので多少はまし。但し、CreateJSで表示する事には問題が多く疑問が残る。
Canvas表示せず普通に、html での <img> 表示の方が簡単で問題も少ないと思います。
以上です。

 


[ この記事のURL ]


 

ブログ記事一覧

年別アーカイブ一覧



[1]