見出し画像

やっぱり。JavaScript！-WebAPI

donguri

Webで公開されているAPI(自分のサーバ以外のデータなど)を利用することが出来ます。

APIでよく使われるのが"JSON"です。他のデータ形式ではCSV,XML,などあります。

今回はFlicker APIを使います。

まず、表示です。入力ができるスペースとボタンと写真が表示される場所、

をHTMLで配置します。

<input type="text" id="keyword" name="keyword">
<input type="button" id="button" value="検索">
<div id="photo_list"></div>

画像1

こんな感じになります。

これにJavaScriptで機能を付けていきます。

</body>タグの直前に

<body>

<input type="text" id="keyword" name="keyword">
<input type="button" id="button" value="検索">
<div id="photo_list"></div>

<script>

// ここに命令を書いていきます。

</script>
</body>

まずボタンに機能を付けたいので

<input type="button" id="button" value="検索">

id="button" で取得します。

let button = document.getElementById("button")

イベントリスナーを指定します。ボタンを押した時の動作を決めます。

button.addEventListener("click", function(){
// ここに命令を書きます。
}

その動作を決めていきます。

let input = document.getElementById("keyword");
let keyword = input.value

で   <input type="text" id="keyword" name="keyword"> タグを読み込みます。

入力された文字を取得して、変数scriptを宣言し、scriptタグを作ります。

let script = document.createElement('script');

変数scriptにFlickr APIのURLでキーワードを指定して検索を開始します。

script.src="https://api.flickr.com/services/feeds/photos_public.gne?format=json&tags=" + encodeURIComponent(keyword);

次にscriptタグに検索結果を表示できるようにします。(すぐにタグを削除します)


document.body.appendChild(script);

document.body.removeChild(script);

関数functionでJSONデータを受け取ります。

function jsonFlickrFeed(data) {
	var photo_list = document.getElementById("photo_list");
		photo_list.innerHTML = "";
		for (i=0;i<data.items.length;i++) {
		var item = data.items[i];
		var img = document.createElement("img");
		img.src = item.media.m;
		photo_list.appendChild(img);
	}
}

JSONデータを関数の引数として、関数の名前と一緒に返す仕組みのことを「JSONP」と言いこれを今回は使っています。

JSONをそのままパースして使うのとちょと違いますね。

dogsで検索すると。

画像2

こんな感じで表示されます。

この記事が気に入ったらサポートをしてみませんか？