POPSブログ

CreateJS Bjin.Me APIのデータをjQuery.ajax()で読み込み画像を表示する

327

  Category:  javascript2014/11/07 pops 

BjinAPI(美人API)のjson形式データをjQuery.ajax()で読み込み、画像をCreateJSで表示しactive時のボタン背景色などを変えます。
ボタンにクロスドメインの画像を埋め込んでいますので、通常はリンクがSecurity上の理由で機能しません。ボタンを工夫してリンク(クリックが機能)するように修正します。
easeljs-0.7.1 でのテストです。

 

CreateJS BjinAPIのデータをjQuery.ajax()で読み込み画像を表示するテスト

JSは基本的に「前ページ」のものを改造しただけです。
APIのデータをjQuery.ajax()でサムネール画像データを取得して、実際の画像を読み込み表示します。APIのデータはjson形式です。また同類のjQuery.getJSON()でも読み込みテストしました。


重要、easeljs-0.8用について

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


 

DEMO


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

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


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


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処理用に、事前にjQueryが必要です。最近のものならバージョンは何でも良い。


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

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


//日本語
//createJS110.js
//Bjin角丸サムネールとスライドのテスト
//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";

//表示スケール
var image_scale=1;//原則1
//Bjin読み込み画像数
var loadImage_len=10;//6-12

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

//画像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/lady_bigback.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);

	//bjinApi読み込み成功
	if(bjin) {
		//bjinのmanifestリスト作成
		manifest=[];
		for (var i=0; i < bjinImages.length; i++) {
			var src=bjinImages[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() {

		//bjinFeed読み込み成功、画像ロードに進む
		if(bjin) {
			set_text("Loading Now!");
			bulkload();
		}
		//失敗
		if(!bjin) {
			viewtext.x=100;
			viewtext.y=canvasHeight/2;
			set_text("「ダメよダメダメ」。Bjinの読み込み失敗、表示出来ませんので停止します!");

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

	//画像整形getBounds方式
	if(bjin) {
		for (var i=0; i < image_max; i++) {

			var bmp=new createjs.Bitmap(assets[i]);
			//大きさ取得
			bjinW.push(bmp.getBounds().width);
			bjinH.push(bmp.getBounds().height);

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

			assets[i]=createBjinCanvas(canvasWidth,canvasHeight,assets[i],bjinW[i],bjinH[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-((btnW+btnSpace)*(image_max-1)-btnSpace))/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 (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;
	}

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

//BjinCanvas
function createBjinCanvas(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
}

//bjin
var bjinImages=[];
var bjin=false;
var bjinW=[];
var bjinH=[];

//jQuery-ajax
function getBjinData(){
	$.ajax({
		type:"GET",
		url:"http://bjin.me/api/",

		//data:"type=rand&count=" + loadImage_len + "&format=json",
		data:{type:"rand",count:loadImage_len,format:"json"},
		dataType:"json",
		success:function(data,dataType){
			setBjinData(data,dataType);//URL取得
		},
		error:function(XMLHttpRequest,textStatus,errorThrown){
			bjin=false;
			init();
		}
	});
}
//URL取得
function setBjinData(result,resultType){

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

		//サムネール
		//bjinImages.push(result[i].thumb);
		//実際画像に切り替える
		var str=result[i].thumb;
		bjinImages.push(str.replace(/images¥//,"images¥/pic"));

	}

	bjin=true;
	init();
}
//---------------------------------------------------------------------------------------------

//START
window.onload=function() {
	getBjinData();//Bjin

}

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


CSS

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


/*日本語 createJS110.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;
}

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


 

簡単な説明


[説明図]

 

1. 表示画面、640x640です。(縦長画像が多いので、高さを大きくした、変更可能)
2. 画面より大きい画像は縮小され画面に合わせられます。
3. AUTO表示ですが、下のサムネールボタンで任意の画像を表示できます。
4. 画像エフェクト実行中はボタンを押しても無効です。


BjinAPI利用の画像表示

BjinAPI(美人API)のjson形式データをjQuery.ajax()で読み込み、画像をCreateJSで表示します。
JSはjQuery表示の下記のものを参考に改造しました。またまた、毎度お馴染み「パクリ」記事でございます。


【参考】jsdo.itの記事: bijin ranking


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


1. APIの規定に従いデータをjson形式で読み込みます。
2. ボタンはCanvas表示のためクロスドメインの場合はSecurity上の理由でリンクは機能しませんので少々修正しました。
3. jQuery.ajax()処理、jQuery.getJSON()処理の2つを記載しておきます。
4. 画像取得数は6-12位です。


BjinAPI

美人な画像を検索表示出来るサービスだそうです。検索などのAPI仕様は下記を参照ください。
また、利用の規定などもありますので、読んでおいてください。

【参照】美人検索: Bjin.Me

【参照】美人APIリファレンス: Bjin.Me API Ref


 

BjinAPIより画像データを取得する


BjinAPIよりサムネールデータのリストを取得します(ランダムな画像LIST API)。それ以外の検索などは「BjinAPIリファレンス」ページを参照ください。
「デモ」ではランダムな画像データをjson形式で取得して、スライド、フエード表示します。


リクエストURL



http://bjin.me/api/

検索クエリ



format	レスポンス形式			レスポンスがXMLかJSONかを指定します。初期値はXMLです
count	取得件数リストに入るデータ数	初期値10、最低値:1、最大値:100
type	取得タイプ			ランダムに情報を取得する場合に必須 rand

サンプルクエリ



http://bjin.me/api/?type=rand&count=10&format=json

以上、BjinAPIより抜粋。


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

実際のJSでの記載例

下記例は「jsdo.itサンプル」bijin rankingを参考にCreateJS用途に修正したものです。
丸写しで、ほとんど変わりません。loadImage_lenは取得数です。




//jQuery-ajax
function getBjinData(){
	$.ajax({
		type:"GET",
		url:"http://bjin.me/api/",

		//data:"type=rand&count=" + loadImage_len + "&format=json",
		data:{type:"rand",count:loadImage_len,format:"json"},
		dataType:"json",
		success:function(data,dataType){
			setBjinData(data,dataType);//URL取得
		},
		error:function(XMLHttpRequest,textStatus,errorThrown){
			bjin=false;
			init();
		}
	});
}
//URL取得
function setBjinData(result,resultType){

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

		//サムネール
		//bjinImages.push(result[i].thumb);
		//実際画像に切り替える
		var str=result[i].thumb;
		bjinImages.push(str.replace(/images¥//,"images¥/pic"));

	}

	bjin=true;
	init();
}

これが一番判り易いかな。変数 bjin はデータ取得の判定です。true なら取得成功になりますが、
falseならば画像表示が出来ませんので、CreateJS処理を途中で停止しています。


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

上記の例1は丸写しで、ほとんど変わりませんので少し記述を変えてみましたが、処理内容は同じです。
外の関数を中に収容しただけで、そんなに変わりは有りませんが、.......




function getBjinData(){
	$.ajax({
		type:"GET",
		url:"http://bjin.me/api/",

		//data:"type=rand&count=" + loadImage_len + "&format=json",
		data:{type:"rand",count:loadImage_len,format:"json"},
		dataType:"json",
		success:function(data,dataType){

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

				//サムネール
				//bjinImages.push(result[i].thumb);
				//実際画像に切り替える
				var str=result[i].thumb;
				bjinImages.push(str.replace(/images¥//,"images¥/pic"));

			}

			bjin=true;
			init();

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

実画像を取得する

ランダム指定で得られる、画像はサムネール画像ですので、実際の大きさの画像URLはわかりません。
調べてみますと、実際の画像は「images」の下層「pic」に在るようですので、サムネールURLを修正して「実画像」にリンクします。
「実画像」の大きさは様ざまで一定しておりませんので表示の際は大変困ります。


実際得られるjson形式データは下記の様になりますが、linkは「bjin.me」の表示形式で表示する場合のものです
ここでは、CreateJSのCanvas表示ですからそのまま利用できませんので、少し修正して利用しています。




http://bjin.me/api/?type=rand&count=3&format=json

[{"id":22621.0,"link":"http:¥/¥/bjin.me¥/detail.cfm?id=22621","category":"Kang Ji-Young","thumb":"http:¥/¥/www.bjin.me¥/images¥/22621.jpg","pubDate":"Mon, 03 Nov 2014 17:16:32 GMT"},{"id":48565.0,"link":"http:¥/¥/bjin.me¥/detail.cfm?id=48565","category":"大場美奈","thumb":"http:¥/¥/www.bjin.me¥/images¥/48565.jpg","pubDate":"Mon, 03 Nov 2014 17:16:32 GMT"},{"id":166820.0,"link":"http:¥/¥/bjin.me¥/detail.cfm?id=166820","category":"木口亜矢","thumb":"http:¥/¥/www.bjin.me¥/images¥/166820.jpg","pubDate":"Mon, 03 Nov 2014 17:16:32 GMT"}] 

● 実際画像のURLに変更



サムネールは
result[i].thumb
であるので、実際画像URLは下記の様になる
str.replace(/images¥//,"images¥/pic")

● 画像のスケールを変更してに表示する


1. 画像の大きさは様ざまですが、人物のためか「縦長」の画像が多い。
2. 大きな画像は、640x640のCanvasサイズに合わせてスケールを変更して表示します。
3. 小さな画像はそのまま表示する。(拡大すると描画品質が悪い)
4. スライドなどのために、全ての画像を640x640サイズに修正して表示します。
5. 但し、サムネールボタンの画像は「実画像」をそのままで CanvasのdrawImage() 縮小しています。
Matrix2D()での縮小はしていません。(ゆがむ)


● JSの設定

JS(createJS110.js)上部初期設定で設定出来ます。
image_scale、は 1 にしてください。(1.5は一律1.5倍になりますが画像がぼける)
loadImage_len、は 6-12 の値です。(ボタンの大きさで並べられる数が決まる)



//表示スケール
var image_scale=1;//原則1
//Bjin読み込み画像数
var loadImage_len=10;//6-12

● 640x640サイズの画像に変更

640x640サイズの黒背景の中心にスケール変更し画像を配置したエレメントを取得して利用しています。
画像の大きさは、Bitmap()に変換してgetBounds()で取得しています。
ボタンに描画するサムネール画像は「実画像」をボタンの大きさに縮小して使用していますので、ゆがみが有りますがこの方がボタンに適するカナ...。




//画像整形getBounds方式
if(bjin) {
	for (var i=0; i < image_max; i++) {

		var bmp=new createjs.Bitmap(assets[i]);
		//大きさ取得
		bjinW.push(bmp.getBounds().width);
		bjinH.push(bmp.getBounds().height);

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

		assets[i]=createBjinCanvas(canvasWidth,canvasHeight,assets[i],bjinW[i],bjinH[i],image_scale*scale_v,"#000000");

	}
}
------------------------------------------------------------------

//BjinCanvas
function createBjinCanvas(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;
}

現在は一応、不都合なく見られる程度のスケールの変更ですが、この辺の改造は自由です。


ボタンのライン色変更

デモでは、画像の下に配置したラインを表示、非表示の切り替えでactiveを区別しました。「前ページ」と同じです。
その他、画像の透明度を変更する、スケールを変更するなどの表現はアイデア次第でしょう。


● ライン非表示の切り替え変更




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

	略す

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

	略す

}

beginBitmapFill()で画像を入れた場合に、Chromeで「陰影」が壊れる

グラフイックにサムネールなどを塗りこむ処理の場合であるが、角丸drawRoundRect() 処理をするとChromeで「陰影」が壊れます(グラフイックの形状は多いので処理してみないとわからない)。
右と下方の「陰影」が切れてしまいます(Chromeエンジンの場合のみ、他は正常)。

画像をエレメントで縮小処理してbeginBitmapFill()に入れれば正常に「陰影」処理されます。

修正などの詳細は「前ページ」を参照ください。


クロスドメイン画像の「クリックアクション」を機能させる

Canvas表示のボタンの場合は、「クリックアクション」が機能しないように出来ていますので、以下の様に少し工夫すれば可能に成ります。


1. ボタンと画像を別途のコンテナ構成にして、ボタンの中にクロスドメイン画像を入れない。
2. ボタンの、最上層に「クリックアクション」専用のShapeを重ねて「クリック」が機能するように作る。
(デモのJSではこちらの方法で修正しています、下記「サムネールボタンを作る」参照)
3. jQueryなどで画像埋め込みのボタンを「html」で作り、「クリック」が機能するようにする。
(Canvas表示で無ければ機能する)


●「サムネールボタン」の中に「クリックアクション付きのShape」を挿入
JS初期設定で設定できます。



//クリック専用ボタン
var hitbtn=true;//true false

hitbtn が true で「サムネールボタン」の中に「クリックアクション付きのShape」を挿入します。
false ならば単にサムネールの表示として機能します。




	途中略

	//Create-Bottunボタンを作る
	if (thumbbtn_use == 'use') {
		for (var i=0; i < image_max; 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);

			途中略

		}

	}

	途中略

● サムネールボタンを作る

クロスドメイン画像ではボタンに「クリックアクション」を設定しても機能しませんので、ボタンの中に「クリックアクション」を設定した「Shape要素」を一番上に挿入しています。
この「Shape要素」にはクロスドメイン画像がないので「Click」が機能します。大変面倒です。




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

ボタンのマウス pointer 表示は enableMouseOver() 設定がなければ変化しませんので注意ください。




//MouseOver重要
stage2.enableMouseOver(20);

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

hits.cursor="pointer";

最初にjQueyでajax処理する場合の注意 (重要)

この「デモ」では最初にjQueyでAPIのデータを読み込み、次にCreateJS処理に進みますので、
最初は必ず、window.onloadで処理ください
jQuey定番の $(document).ready(function(){....}) などのスタートはしないでください。



正しいスタート

//START
window.onload=function() {
	getBjinData();//Bjin

}

jQuey定番の処理で進むと、スタートのタイミングが違い「CreateJS処理」が旨く行かない場合があるそうですので、
下記の方法での処理はしないでください




$(function(){
	getBjinData();
});

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

$(document).ready(function(){
	getBjinData();
});

 

 

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

上記のjQuery.ajax()と同様ですが、受け取るデータがjson形式で無ければなりません。
一応、下記の様に記述しますと同様な結果が得られます。詳細などは、「jQueryリファレンス」などを参照ください。


jQuery.getJSONの場合に、jsoncallbackをしないと正確に処理出来ないとありますが、この例ではURLに
jsoncallback=? を記述しなくとも動作しました。jQuery.ajax()形式のほうが無難な気がしますが....


● 1、forループで処理した場合判り易い。
受け取るデータ数が確定している理由もありますが、.....




//jQuery-getJSON
function getBjinData(){
	var bjinAPI="http://bjin.me/api/";
	$.getJSON(bjinAPI,{
		type:"rand",
		count:loadImage_len,
		format:"json"
		},

		function(data,json){
  			var result=data;
			for(var i=0; i < result.length; i++){
				//サムネール
				//bjinImages.push(result[i].thumb);
				//実際画像に切り替える
				var str=result[i].thumb;
				bjinImages.push(str.replace(/images¥//,"images¥/pic"));
			}
			bjin=true;
			init();
		}

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

● 2、$.each()で処理した場合、こちらもOKだが難解かも知れない。
受け取るデータ数が不確定な場合など、データ構成次第では、こちらが簡単に処理できるかも知れない。




//jQuery-getJSON
function getBjinData(){
	var bjinAPI="http://bjin.me/api/";
	$.getJSON(bjinAPI,{
		type:"rand",
		count:loadImage_len,
		format:"json"
		},

		function(data,json){
			var results=data;
			$.each(results,function(i,result){
				var str=result.thumb;
				bjinImages.push(str.replace(/images¥//,"images¥/pic"));
			});
			bjin=true;
			init();
		}
	)
	//ERROR
	.error(function(){
		bjin=false;
		init();
	});
}

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


画像

原則、使用者が用意ください。640x640画像。


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

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

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

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



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

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


 

其のうち、イケメンAPI、ユルキャラAPI、ブスカワAPI、今夜のオカズAPI、など出てくるカモ.....
以上です。

 


[ この記事のURL ]


 

ブログ記事一覧

年別アーカイブ一覧



[1]