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

koogawa log

iOS、Android、foursquareに関する話題

今までfoursquareにチェックインした都道府県を塗りつぶしてくれるツールを作ったよ

foursquare

思いつきでこんなツイートをしてみたのですが、なんとか無事に完成させることができました。

最初は自分用に作った物なのですが、何人かの方から「面白そう」という嬉しいお言葉を頂き、せっかくなので公開してみました。下記のリンクからご利用いただけます。

f:id:koogawa:20140510090202p:plain

10人ぐらい使ってもらえたら嬉しいな、と思っていたのですが、気付いたら100人以上の方が使ってくれているようです!どうもありがとうございますm(_ _)m

(5/10 22:41 追記)ユーザー数1000人突破しました!\(^o^)/

せっかくなので、実装方法をメモしておきます。

地図側

今回の肝となる「地図を塗りつぶす」という機能をどうやって実現するか?

ここが一番苦労するだろうな〜と考えていたのですが、id:pomu0325 さんから非常にありがたい情報が。

どうやら Google さんが提供している Geochart というのを使えば簡単に実装できそうです。

Visualization: Geochart - Google Charts — Google Developers

さっそく使い方を調査。

<html>
  <head>
    <script type='text/javascript' src='https://www.google.com/jsapi'></script>
    <script type='text/javascript'>
     google.load('visualization', '1', {'packages': ['geochart']});
     google.setOnLoadCallback(drawRegionsMap);

      function drawRegionsMap() {
        var data = google.visualization.arrayToDataTable([
          ['Country', 'Popularity'],
          ['Germany', 200],
          ['United States', 300],
          ['Brazil', 400],
          ['Canada', 500],
          ['France', 600],
          ['RU', 700]
        ]);

        var options = {};

        var chart = new google.visualization.GeoChart(document.getElementById('chart_div'));
        chart.draw(data, options);
    };
    </script>
  </head>
  <body>
    <div id="chart_div" style="width: 900px; height: 500px;"></div>
  </body>
</html>

なんとこれだけで地図が塗りつぶせるようです!

つまり、私がやることは、次のようなデータを用意するだけ。

var data = google.visualization.arrayToDataTable([
          ['Prefecture'],
          ['Tokyo'],
          ['Osaka'],
          ['Hokkaido']
        ]);

データ側

ベニューリストの取得には、foursquarevenuehistory API を使いました。

このAPIを使えば、ユーザが今までにチェックインしたすべてのベニューを一度に取得することができます。どんな形式で返ってくるかは、foursquare デベロッパーサイトの API Explorer で試すことができます。(要ログイン)

このレスポンスをうまく加工して、先ほどの GeoChart に渡してやれば完成です!

苦労した点

公開後、すぐに兵庫県高知県大分県がうまく塗りつぶされないというレポートが寄せられました。

原因は、foursquareから返ってくるデータが「Hyōgo」「Kōchi」「ōita」のように「ō」を含んでいるため、GeoChartが正しい県名として認識できないためでした。

この問題に対しては、「ō」を「o」に一括変換するという(雑な)方法で対応しましたw

まとめ

久しぶりにWebアプリを作りましたが、作ったものを即時公開できるというのはWebの強みだな~と改めて感じました。(iOSアプリだと審査やらリジェクトやらでやたらと時間がかかる…)

また何か思いついたら開発したいと思います。