読者です 読者をやめる 読者になる 読者になる

Road To Nowhere

主にWebまわりのエンジニア的なお仕事に関するようなことのあれこれ。

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で保存してブラウザでひらいてください。
キーワードを入れてボタンを押せば写真がつらつらと出てくるはず。

簡単だね!楽しいね!