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