POPSブログ

jQuery FlickrAPI getJSON画像表示

358

  Category:  jquery2015/05/24 pops 

FlickrAPI photos.search メソッド利用でデータをjQuery.getJSONで読み込み、画像を表示します。FlickrAPIデータ取得には「FlickrAPIキー」が必要になりますが「指定する大きな画像」を得られるのが特徴です。
デモでは1045px画像をLightBoxで原寸表示して見ます。

 

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

「FlickrAPIキー」を取得して自由に画像検索して大きな画像を表示する方法ですが、JSON、XML形式共に取得は簡単であり、且つ、画像検索表示以外にも色々なFlickrAPI機能を利用できます。
XML形式よりJSON形式の方が処理し易いので、その方法でテストしてみます。「デモ」の仕様概要は次の通り。


1. 検索してサムネール表示。(75x75サイズ画像取得)
2. 640x640画面内で画像表示。(640または1024サイズ)
3. LightBoxで原寸表示。(ブラウザが大きい場合)
4. 検索条件、表示数、変更可能。


[ 目次 ]

 

1. jQuery FlickrAPI画像表示デモ jqury-1.9
2. 「FlickrAPIキー」を取得して大きな画像を検索表示する方法
3. jQueryのバージョンによって仕様が違います、getJSON仕様 1 jqury-1.6.4
4. getJSON仕様 2 jqury-1.8以降
5. FlickrAPIの検索結果の戻り値
6. デモでのjQuery.getJSON処理例 jqury-1.9
7. FlickrAPIキーの取得

 

 

 

DEMO jQuery FlickrAPI getJSON画像表示

● デモページは [ jqury-1.9 ] で動作しています。JS、CSS、は「デモ」ページに掲載しています。


1024サイズ、Lightbox表示

DEMO-017

640サイズ、通常表示

DEMO-017c


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

「デモ」の簡単な説明 : デモでのjQuery.getJSON処理例説明

 

 

簡単な説明


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

photos.searchメソッド利用の画像検索です。「FlickrAPIキー」取得はページ最下段[ FlickrAPIキーの取得 ]参照。


flickrAPI利用の場合のgetJSON()一般的処理

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


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


jQueryのバージョンによって仕様が違います

1.8以降では、.done()、.fail()、を使用して処理できます。2番目に記述しますがこちらが書き易いと思います。
詳細はネット上のリファレンス記事などを参考にして下さい。


getJSON仕様 1

[1] 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(){
		//処理を書く
	});
}

getJSON仕様 2

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



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(){
		//処理を書く
	});
}

jqury-1.6.4での処理テスト[1]

Flickr画像を表示します。家庭の事情でこのページは jqury-1.6.4 のため[1]で処理しています。

 

 

jqury-1.9.0での処理テスト[2]

jqury-1.9.1は、デモページで表示しますが上の表示と同じです。JSもそちらに有ります。(確認したい方はどうぞ)

DEMO-017b

 

JSの例、[1]

上のデモの例です。一旦データより画像情報等を抽出して、その後75x75サイズのサムネールのみ表示しています。
(.getJSONの中のループでサムネール表示処理はできます)

FlickrAPIキーは使用者が取得して利用ください。


//flickr-image-sum1.js

(function($){

	$(function(){

		//サムネール画像の大きさ/55-75
		var thumb_W=55;
		var thumb_H=55;
		var flickr=false;

		//保存容器
		var flickrthumbs=[];
		var flickrImages=[];
		var flickrTitles=[];
		var flickrLinks=[];
		var flickrOwners=[];

		getFlickrData();

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

		function set_flickrSearchData(){

			var html="";

			if(flickr) {

				for(var i=0; i < flickrthumbs.length; i++){
					var thumb_url=flickrthumbs[i];
					var thumb='<span><img src="' + thumb_url + '" /></span>';
					html +=thumb;
				}

				$('#flickr-thumb-box').html(html);
				//$('#flickr-thumb-box').append(html);//同じ

			}
		}

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

		//FLICKR/jQuery1.8以前
		//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:5,
				extras:"owner_name",
				tags:"チューリップ",
				tag_mode:"any",
				format:"json"
			},
			function(data){

				flickr=false;
				var photos=data.photos.photo;
				//検索item数エラー処理
				var item_len=photos.length || 0;

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

					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 thumb_url="https://farm" + farmId + ".staticflickr.com/"+ serverId +"/" + id + "_"+ secret +"_s.jpg";//75
						var img_url="https://farm" + farmId + ".staticflickr.com/"+ serverId +"/" + id + "_"+ secret +"_z.jpg";//640
						var link_url="https://www.flickr.com/photos/" + owner +"/" + id;

						//保存
						flickrthumbs.push(thumb_url);
						flickrImages.push(img_url);
						flickrTitles.push(title);
						flickrLinks.push(link_url);
						flickrOwners.push(ownername);

					}

					flickr=true;

				} else {

					flickr=false;

				}

				set_flickrSearchData();

			})
			//ERROR
			.error(function(){
				//処理を書く
				flickr=false;
				alert("ERROR");
			});

		}

	})

})(jQuery);

ただ表示するだけならば、下記でも可能です。それぞれ処理が違うと思いますのでこれらは個人の自由です。



			if(flickr) {
				for(var i=0; i < flickrthumbs.length; i++){
					var thumb_url=flickrthumbs[i];
					$("<img />").attr("src",thumb_url).appendTo("#flickr-thumb-box");

				}
			}

CSS


#flickr-thumb-box{
display:block;
width:620px;
height:75px;
margin:0;
padding:10px;
border:1px #CCCCCC solid;
}
#flickr-thumb-box span{
margin:5px;
}

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


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



 

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"は空に成ります。


検索に失敗した場合には返り値があるので、「エラー」には出無いことが多く、その辺の回避処理をしておきたいものです。



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を作るデータを取り出す。
この後、<img />で画像表示が出来ます。



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

	}

}

 

[説明図]

● 画面に表示される場合は、リサイズされた画像であっても、上図の様に画面に合わせて表示されます。
● lightboxの表示の場合は、ブラウザ画面が大きければ原寸で表示されます。但し、ブラウザ画面が小さければそれに合わせて縮小されますので非効率な時もあります。
● パノラマサイズの画像は収まり切らないので小さく表示されます。但しオーナーページで大きい画像が見れるとは限りません。

 

● 画像の大きさの指定
最後の"_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




 

実際のjQuery.getJSON処理


jQuery.getJSON処理

事前に「flickrデータ」を取得してから次に進みます。途中で「flickrデータ」の取得に失敗すれば停止します。

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



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

statで判定するのも方法です。「flickrデータ」の取得に成功すれば「ok」ですから


//statで判定
if(data.stat == 'ok'){
	//処理
}

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


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




 

デモでのjQuery.getJSON処理例


検索結果をサムネール表示画面に表示し、大きな画像を閲覧出来ます。またlightboxで表示も可能です。
デモでは「lightbox表示」「1024サイズ」画像表示にしています。

HTML、JS、CSS、は[ デモページ ]に記載しています。

 

 

1. タグ検索結果をサムネール表示します。(55x55)
2. デモでは640x640の大きさの画像を閲覧できます。
(1024pxサイズは640x640画面に合うように縮小されます)
3. lightboxで表示または直接画像表示が可能です。
4. オーナーページのスライドショーにリンクできます。


表示設定

● 640x640の表示画面を使用する、viewmode=true、click_action=true、画像は640サイズ

● lightboxで表示する、viewmode=false、click_action=true、画像は640サイズまたは1024サイズ

● Aリンクで直接表示する、click_action=false、画像サイズは自由


シャッフル設定

通常は新しい順に「指定数」を検索して表示しますが、常にほぼ同じ画像で有り、最近ではFlickrも「単なる画像庫」に成ってしまいつまらない画像も多く含みます。困ったものです。
そのため「検索数」を増やし「シャッフル」して「指定数」の表示を行えばランダム画像表示になりますから「多少違う画像」も得られます。現在「デモ」では設定していません。



//シャッフルをするか/false
var shuffle=false;

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

//データ数指定
var perpage=100;//シャッフル

画像プリロード

現在「サムネール画像プリロード」の機能は使用していません。
複数の画像を「プリロード」してから表示できるため、全てのサムネールを瞬時に表示出来ます。
「動作検証」目的で取り入れたものですが、100画像LOADで、数十回テストしてみましたが、一応問題なく機能する様です。
詳細は「前ページ」の「簡単な説明2、同時複数読み込みローダー」を参照ください。

【参照】当方の記事: jQuery 非同期、Imageオブジェクトで複数画像を読み込む



//画像プリロード保存無し
var preload=false;//false

lightbox

簡単ですが、専用に作りました。JS等は「デモページ」に掲載しています。


ページ表示後 lightbox を読み込み実行してもまだサムネールにクラスが設定されていませんので、このままでは lightbox の実行を行えません。
サムネール取得後に下記を実行することにより lightbox に認識させます。


//flickr-lightboxの認識
if(!viewmode){
	$(document).flickr_lightbox();
}

Loading

● Loadingにspin.jsを使用しています。
設定も簡単で、JSさえ読み込んでおけば使用できます。

面倒な場合は従来通りアニメGIFなど使用すればよいし、最近はCSSでのLoadingも増えています。


JSのダウンロードと説明テストなどは、下記配布先サイトで。

【DL】配布先: spin.js

JSの設定などは下記サイトの記事が参考になります。

【参考】kantenna.comの記事: spin.js



//#loadingにspinnerセット
set_spinner('flickr-loading');

//#loadingにspinnerセット
set_spinner('flickr-lightbox-loading');

-------------------------------------------------------
//spinner
function set_spinner(item){
	var opts={lines:12,length:4,width:3,radius:8,corners:1,color:'#CCCCCC',shadow:false};
	var target=document.getElementById(item);
	var spinner=new Spinner(opts).spin(target);
}



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がつくれません。何かたりない...


flickr用プラグイン

学習を兼ねてflickr画像を表示してみましたが、下記プラグインなど利用した方が簡単だと思います。

【プラグイン】miromannino.githubの記事: Justified Gallery

【プラグイン】github.comの記事: jQuery Flickr Plugin




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

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

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

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

 



以上です。

 


[ この記事のURL ]


タグ:photo , LightBox , jquery

 

ブログ記事一覧



[1]