感謝のプログラミング 10000時間

たどり着いた結果(さき)は、感謝でした。

Flickr APIを使って、取得した写真を表示するJavaScriptのサンプル

スポンサーリンク

Flickr APIを取得するための手続き(手順)

■アメリカ版のYahooアカウントを作成する
1.以下のURLを開く。
http://www.flickr.com/services/developer/

2.左上の「Sign Up」をクリックする。

3.Create New AccountよりYahooアメリカのアカウントを作成する。

4.Flickrで使用するアカウントを指定して、ログインする。

5.以下のThe App Gardenなるところで、APPLY FOR A NON-COMMERCIAL KEYをクリックする。
http://www.flickr.com/services/apps/create/apply
※商用利用は別。

6.アプリ名を入力する
What's the name of your app?
What are you building?
のように聞かれるので、Sample Application的に入力する。

これで、できた「key」と「Secret」を大切にメモして無くさないこと。

エンドポイントは以下のURLで、

http://api.flickr.com/services

これにmethodやらapi_keyなどをひっつけてリクエストを送ると、必要なデータがレスポンスとして返ってくる。
ご参考
http://www.flickr.com/services/api/misc.overview.html

例えば以下のURLにリクエストを飛ばすと・・・

http://api.flickr.com/services/rest?method=flickr.photos.search&per_page=10&text=test&api_key=[API キー]

このようにXMLが返ってくる。

<rsp stat="ok">
<photos page="1" pages="312026" perpage="10" total="3120258">
<photo id="9207096141" owner="77736400@N08" secret="XXXX" server="7327" farm="8" title="Test Image" ispublic="1" isfriend="0" isfamily="0"/>
<photo id="9207059891" owner="23821623@N03" secret="YYYY" server="3719" farm="4" title="Salmon & Ikura Don" ispublic="1" isfriend="0" isfamily="0"/>
</photos>
</rsp>

このXMLを利用して、写真を取得するためのXMLをGETする。

以下を見てほしい。FlickrAPIの説明である。
http://www.flickr.com/services/api/misc.urls.html
このFlickrのページを見ると、
写真のURLは以下の形式で取得することができます。と書いてある。
このserver-idとかfarm-idというのは、flickr APIを叩いて返ってきたXMLを解析することで取得できる(上記のXML参照)

http://farm{farm-id}.staticflickr.com/{server-id}/{id}_{secret}.jpg
	or
http://farm{farm-id}.staticflickr.com/{server-id}/{id}_{secret}_[mstzb].jpg
	or
http://farm{farm-id}.staticflickr.com/{server-id}/{id}_{o-secret}_o.(jpg|gif|png)

つまり、APIキーを含んだリクエストを送り、返ってきたXMLを解析して、farm-idとserver0idとsecretなどを設定すれば、写真を取得することができるようだ。
たとえば、testというキーワードで検索した上記のXMLの値を、URLの形式にはめ込んで以下にリクエストを飛ばすと、画像が表示される。

ttp://farm8.staticflickr.com/7327/9207096141_3460247b89.jpg

このように、XMLを使ってうまいことやると、写真を取得することができるようだ。

それでは、実際にFlickr APIを使って写真を取得して、ブラウザに表示してみる。
表示するHTMLは以下の通り。

<!doctype html>
<html>
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
	<meta charset="utf-8" />
	<meta name="viewport" content="width=340">
	<title> Flickrで画像検索してみる </title>
	<script src="js/flickr_rest.js"></script>
	<script src="js/flickrsearch.js"></script>
</head>
<body>
	<div id="searchPanel">
		<input type="text" id="searchBox" />
		<button id="searchButton">検索</button>
	</div>
	<div class="attribution">
		This product uses the Flickr API
	</div>
	<div id="display"></div>
	<div class="controlPanel">
		<button id="switchView">リストに戻る</button>
	</div>
</body>
</html>

検索ボックスにキーワードを入れると写真が表示される。

で、Flickr APIを使って写真を検索するJavaScriptは以下の通り。

var display;
var searchBox;
var searchButton;

var server = "http://api.flickr.com/services/rest";

//http://www.flickr.com/services/api/explore/flickr.photos.search
//flickr.photos.search APIを使う
//per_pageというのは、何枚取得するか。
//textというのは、指定するとテキストで検索をして写真を選んでくれる
var method ="?method=flickr.photos.search&per_page=5&text=";

var apiKey = "自分のAPIキーを入れてください";

var messageNotFound = "画像なかった・・・";
var messageTypeSomething = "検索語句を入力してください";

window.onload = appInit;

function appInit() {
	display = document.getElementById("display");
	searchBox = document.getElementById("searchBox");
	searchButton = document.getElementById("searchButton");
	searchButton.addEventListener("click", searchPhoto, false);
}

function searchPhoto() {

	var child;
	//ゴミ掃除
	while (child = display.firstChild) {
		display.removeChild(child);
	}
	var keyword = encodeURIComponent(searchBox.value.trim());
	if (keyword.length == 0) {
		display.textContent =messageTypeSomething;
		return;
	}

	var endPointUri = server + method + keyword + "&api_key=" + apiKey;
	requestSearch(endPointUri);
}

function getXMLHttpRequestObject() {
	var ajax  = null;

	if (window.XMLHttpRequest) {
		ajax = new XMLHttpRequest();
	} else if (window.ActiveXObject) {
		ajax = new ActiveXObject('MSXML2.XMLHTTP.3.0');
	}

	return ajax;
}

function requestSearch(uri) {
	//var ajax = getXMLHttpRequestObject();
	console.log(uri);
	var ajax = new XMLHttpRequest();
	ajax.onreadystatechange = readyStateChange;
	ajax.open('GET', uri, true);
	ajax.send(null);
	
}

function readyStateChange(event) {
	var ajax = event.target;
	var data = null;
	if (ajax.readyState == 4) {
		if ((ajax.status >= 200 && ajax.status < 300)
			|| (ajax.status == 304)) {
			data = ajax.responseXML;
			if (data != null) {
				getResults(data);
			}
		}
	}
}

function getResults(data) {
	var photos = data.getElementsByTagName('photo');
	var str = '';
	console.log(photos);
	for (var i = 0, count = photos.length; i < count; i++) {
		//console.log(photos[i].getAttribute('id'));
		//console.log(photos[i].getAttribute('farm'));
		//console.log(photos[i].getAttribute('server'));
		//console.log(photos[i].getAttribute('secret'));

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

		var url = "http://farm" + farmId + ".staticflickr.com/"+ serverId +"/" + id + "_"+ secret +".jpg";
		var image = new Image();
		console.log(url);
		image.src = url;
		display.appendChild(image);
	}
}

で、検索を実行するとブワーッと写真が出てくる。
すごく面白い!

参考にした本


思ったよりもずっとずっと良かった!!!
プログラムは省略せずにちゃんと全部載っているし、細かい環境やAPI取得のための登録の仕方もちゃんと載っている(だから僕でもできた)
こういう隠れた良書を発見できたときはとても嬉しい。
モダンJavaScriptを読み終わった後に、これをやると理解が深まる。
サンプルのソースにセミコロンなどたまに抜けているので、そちらは改訂に期待します。あまり目立たないけれどとても良い本だと思うので、もっと売れて、重版されることを期待します。

感謝のプログラミング

今回で感謝のプログラミングは【500時間目】
10000時間まで、あと【9500時間】
けっこう時間がかかってしまった。。
明日こそはJava EEデザインパターンを勉強したい!