Foursquare APIでVenueの写真を取得する

以前参加したインターンシップでFoursquare APIを使用してチェックイン場所の写真を取得しようとしたところ、APIが新しくなったらしくて予想外に苦労したのでやり方を紹介します。

位置情報系のアプリを作ろうとしたときに地図に付けたピンだけではちょっと寂しいので、その場所の写真が欲しいということがあるかと思います。Google画像検索でもよさそうですが、みんなが大好きなFoursquareからも誰かがチェックインしたときに投稿した画像を取得することができます。

Foursquare APIを試してみる

Foursquare APIはJavascriptなどを書かなくてもブラウザ上で簡単に試すことができるので実際にやってみましょう。まずは
https://developer.foursquare.com/
にアクセスしてGET STARTEDから自分のアカウントをデベロッパ登録します。ログインしたらCore APIからVenuesの行にあるphotosのページに行きます。
https://developer.foursquare.com/docs/venues/photos
このAPIのVENUE_IDに写真を取得したいvenueのIDを渡すことで写真のURLを含むJSONを取得することができます。下のTRY IT OUTボタンを押すと実際に試すことができます。
ちなみに、VENUE_IDはAPIのsearchや、WEB版のFoursquareでVenueの詳細ページを表示したときのURLの末尾から取得できます。
試しにスカイツリーのIDで検索してみるとこんな感じです

response: {
     photos: {
          count: 3246
          items: [
               {
                    id: "504ad67ee4b0f0297cb56519"
                    createdAt: 1347081854
                    source: {
                         name: "foursquare for Android"
                         url: "https://foursquare.com/download/#/android"
                    },
               prefix: "https://irs3.4sqi.net/img/general/"
               suffix: "/9UAXr1E1FLSAbvPtzTk_bCg3q7UYywsmTL10C3Pu3as.jpg"
               width: 405
               height: 720
               user: {

…

パッと見た感じ完全な画像へのリンクが見当たらないわけですが、.jpgがあるのでprefix, suffixのアドレスが怪しいと検討を付けることができます。prefix, suffixという単語からとりあえず連結してみようということで
https://irs3.4sqi.net/img/general//9UAXr1E1FLSAbvPtzTk_bCg3q7UYywsmTL10C3Pu3as.jpg
というリンクを作成してもエラーで何も返してはくれません。
prefix, suffixからどうやったら正しい写真のアドレスを取得できるのか、ということがどこにも書いてなかったので途方に暮れていたのですが、プログラマーにとってはGoogle先生の次に頼りになるstackoverflowで検索してみたらありました！
http://stackoverflow.com/questions/10977100/foursquare-api-for-venue-user-image-error
http://stackoverflow.com/questions/11144521/photo-error-on-foursquare-api

親切な人曰く、

最近のAPIのバージョンアップでJSONの出力形式が変わったのでv=20120608以前でリクエストすれば昔と同じ方法で画像のURLが取得できるよ！
でも新しいバージョンのv=20120609以降なら画像の大きさを指定することができて、例えば

[prefix]/300x300/[suffix]
[prefix]/original/[suffix]

でアクセスできるよ！でもまだドキュメントは無いみたいだね。

ということらしい。URLを生成するのがめんどくさいですが、画像の縮小をFoursquareがやってくれるということなのでスマフォ向けサイトでも自分で縮小する必要がないから使い勝手は向上してるかもしれないです。
というわけで先ほどエラーが出たアドレスで画像の大きさを指定してリベンジです。
300×300の画像なら
https://irs0.4sqi.net/img/general/300x300/WhlrpXy4zz-EZAN6b-nlL_pWr3qETfuxCNirEEusNlw.jpg

オリジナルサイズの画像なら
https://irs0.4sqi.net/img/general/original/WhlrpXy4zz-EZAN6b-nlL_pWr3qETfuxCNirEEusNlw.jpg

で取得することができます。これで無事Venueの画像を取得することができました。

まとめ

https://api.foursquare.com/v2/venues/VENUE_ID/photos
で返ってくるJSON結果から
[prefix]/[width]x[height]/[suffix]
[prefix]/original/[suffix]
のURLを生成してimgタグに放り込むと画像が取得できる