今回の目標

位置情報の老舗サービスfoursquare APIを使って色々な情報を取得

foursquare最近はまっているので、API色々いじってみたいと思った。何かうまいこと使いたいと考え中。他のサービスと連携させると面白いかも。

まずはGet Startedからアプリ登録をして、client_idとclient_secretを得る。

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>foursquare API</title>
<style type="text/css">  
<!-- 
    .image{float:left;margin:5px;}
-->  
</style>

</head>
<body>
<script src="jquery-1.10.2.min.js"></script>
<script type="text/javascript" charset="utf-8">
navigator.geolocation.watchPosition(
   function(position){
       $("#foursquare").text("loading...");
       $.ajax({
           url: 'https://api.foursquare.com/v2/venues/search?client_id=XXXXXXXXXXX【client_idをここにいれる】XXXXXXXXXXXXXXX&client_secret=XXXXXXXXXX【client_secretをここにいれる】XXXXXXXXXXXX&ll='+position.coords.latitude+","+position.coords.longitude,
           dataType: 'json',
           success: function(data, textStatus, jqXHR){
               $("#foursquare").text("");
               for(var i=0; i < 30; i++){
                   var d = data.response.groups[0];
                   var venues_id = d.items[i].id;
                   var photo = "https://api.foursquare.com/v2/venues/"+venues_id+"/photos?client_id=XXXXXXXXXXX【client_idをここにいれる】XXXXXXXXXXXXXXX&client_secret=XXXXXXXXXX【client_secretをここにいれる】XXXXXXXXXXXX";
                   $.ajax({
                       url:photo,
                       dataType:'json',
                       success: function(data, textStatus, jqXHR){
                           var p = data.response.photos.groups[1];
                           for(var i=0; i < p.items.length; i++){
                               $("#foursquare_photo").append($("<div>").addClass("image").append($("<a>").attr("href", p.items[i].sizes.items[1].url).attr("target", "_blank").append($("<img>").attr("src", p.items[i].sizes.items[1].url))));
                           }
                       }
                   });
                   //console.log(d.items[i].id);
                   $("#foursquare").append($("<div>").addClass("place").append(d.items[i].name));
               }
           }
       });
   }
);
</script>
<div id="foursquare"></div>
<div id="foursquare_photo"></div>



</body>
</html>

こんな感じで取得出来た。

f:id:eightpockets:20140104031351p:plain

これをカテゴリー「食事」にして画像取得すれば、何かと便利そう。

メモ

jQueryで簡単なとこでつまずいてた。

attr

$("CSSセレクタ").attr("属性","属性値")

$(function(){
    $("a").click(function(){
        $("img").attr("src",$(this).attr("href"));
                //$(this)はa要素を取得している。
        return false;
    })
});