4travelのAPI（JSONP）で遊んでみる
旅行記検索API
http://4travel.jp/help/service/api/
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja" lang="ja">
<head>
<script type="text/javascript">
function getPhoto(){
var keyword = document.getElementById("keyword").value;
if(keyword){
var url = 'http://api.4travel.jp/Ver1/SearchAlbum.php?format=jsonp&callback=callback&keyword=' + keyword + '&max=20&order=travel_date&ic=utf8';
var script = document.createElement( 'script' );
script.type = 'text/javascript';
script.src = url;
document.getElementsByTagName("head")[0].appendChild( script );
}
}
function callback(res){
var count = res.length;
var divObj = document.getElementById("photo");
divObj.innerHTML = '';
for(i=0;i<count;i++){
var pictcount = res[i].pictinfo.length;
for(j=0;j<pictcount;j++){
var imgObj = document.createElement("img");
imgObj.setAttribute("src",res[i].pictinfo[j].picturl);
divObj.appendChild(imgObj);
}
}
}
</script>
</head>
<body>
<input type="text" id="keyword">
<input type="button" value="view" onclick="getPhoto();">
<div id="photo"></div>
</body>
</html>utf8で保存してブラウザでひらいてください。
キーワードを入れてボタンを押せば写真がつらつらと出てくるはず。
簡単だね！楽しいね！
