やっぱり。JavaScript!-WebAPI
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>
こんな感じになります。
これに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で検索すると。
こんな感じで表示されます。
この記事が気に入ったらサポートをしてみませんか?