koogawa blog

iOS、Android、foursquareに関する話題

#foursquare でチェックインした都道府県を塗りつぶしてくれる地図機能欲しい。MapKitでそんな事できるかな
— Og🌗エンジニア🏝宮崎 (@koogawa)2014年5月5日

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

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

4sqGeoChart

f:id:koogawa:20140510090202p:plain

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

（5/10 22:41 追記）ユーザー数1000人突破しました！＼(^o^)／

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

地図側

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

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

@koogawa google chartのgeochart使うと簡単https://t.co/i5utT09Kvg
— 🐶pomu0325 (@pomu0325)2014年5月5日

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

Visualization: GeoChart | Charts | Google Developers

さっそく使い方を調査。

<html><head><scripttype='text/javascript'src='https://www.google.com/jsapi'></script><scripttype='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><divid="chart_div"style="width: 900px; height: 500px;"></div></body></html>

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

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

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

データ側

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

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

https://developer.foursquare.com/docs/explore#req=users/self/venuehistory

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

苦労した点

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

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

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

まとめ

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

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

« いつもアプリのエゴサーチに使っているツ… Foursquareの新アプリ「Swarm」に関する情… »

書いてる人

id:koogawa

最終更新:2025-06-18 11:31

ドラムも叩けるプログラマです。iPhoneアプリ、Androidアプリ、mixiアプリを仕事/趣味で作ってます。

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

@koogawaをフォロー

このブログについて

Movatterモバイル変換

koogawa blog

iOS、Android、foursquareに関する話題

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

地図側

データ側

苦労した点

まとめ