koogawa blog

iOS、Android、foursquareに関する話題

【foursquare】新カテゴリアイコンについて調べてみた

先日、大幅なアップデートが行われた foursquare の公式アプリですが、 その際にカテゴリアイコンもリニューアルされました。

foursquare API からもそのうち、新しいアイコンが使えるようになるのかな〜と呑気に考えていたのですが、とっくに使えるようになっていました。

使い方は簡単で、v=YYYYMMDD20120609、もしくはそれ以降にするだけです。(20120608を指定したところ旧アイコンになりました)

API のバージョニングについてはこちらをご覧下さい。

試しに API を叩いてみる

とりあえず venues/categories APIを叩いてみると、こんな結果が。

{
    "response": {
        "categories": [
            {
                "categories": [
                    {
                        "categories": [],
                        "icon": {
                            "prefix": "https://foursquare.com/img/categories_v2/arts_entertainment/default_",
                            "suffix": ".png"
                        },
                        "id": "4fceea171983d5d06c3e9823",
                        "name": "Aquariums",
                        "pluralName": "Aquariums",
                        "shortName": "Aquarium"
                    },

確かに、アイコンURLの一部が categories_v2 となっていますね。

以前の結果と比べてみる

これがリニューアル前のレスポンスです。

{
    "response": {
        "categories": [
            {
                "categories": [
                    {
                        "categories": [],
                        "icon": {
                            "name": ".png",
                            "prefix": "https://foursquare.com/img/categories/arts_entertainment/default_",
                            "sizes": [
                                32,
                                44,
                                64,
                                88,
                                256
                            ]
                        },
                        "id": "4fceea171983d5d06c3e9823",
                        "name": "Aquariums",
                        "pluralName": "Aquariums",
                        "shortName": "Aquarium"
                    },

今まで返ってきていた "sizes" のリスト(32, 44, 64等)が、リニューアル後は無くなっています。
また、ファイルの拡張子が入っていた "name" キーが "suffix" に変わっています。

つまり、{$prefix}+{$sizes[i]}+{$name} のようなコードを書いていた場合は、最新のAPIに切り替えるとカテゴリアイコンが取得できなくなりますので、注意してください。

アイコンを表示してみる

ためしに "Aquariums" のカテゴリアイコンをブラウザで表示してみると、真っ白い画面が表示されます。
これは画像が無いわけではなく、アイコンが白と透明色で描かれているためです。

https://foursquare.com/img/categories_v2/arts_entertainment/default_44.png

実験的に、拙作アプリ FastCheckin に新アイコンを組み込んでみたところ、こんな感じに表示されました。

う〜ん、うまく見せるには色々と工夫が必要になりそうです(^^;

新カテゴリアイコンの背景

このような、一見すると扱いにくそうなアイコンにした背景には「プログラム側で任意の色や形にカスタマイズできる」といった理由があるようです。

foursquare: Why did foursquare replace the cute venue icons in the new redesign?
http://www.quora.com/foursquare/Why-did-foursquare-replace-the-cute-venue-icons-in-the-new-redesign

まとめ

  • 最新の API に切り替える際には、カテゴリアイコンの URL に注意する(最悪アイコンが表示されなくなる)
  • 新アイコンはそのままでは真っ白に表示されてしまうので、背景の色を濃くするなど工夫する