JavaScriptだけで地図の上にTwitterのつぶやきを表示する

Twitter連携という機能を2ヶ月くらい前にリリースしました。
実はこの機能、サーバサイドは一切使わずにJavaScriptだけで実装されています。
田町駅周辺のTwitterのつぶやき

Twitter Search APIをJSONPで取得しているだけ

これ。
Twitter Search API Method: search

必要なパラメータは以下の通り

• geocode
  緯度経度半径
• callback
  JSONPのために必要
• rpp
  取得するツイート数。最大100件まで。

検索結果を地図に載せるだけ！
なんだ楽勝じゃん、と思ったらほとんどのツイートに位置情報（ジオタグ）が含まれていないことが判明しましたorz

位置情報は以下のような形で返ってきます。

geo: {
	type: "Point",
	coordinates: [35.7011, 139.7708]
}

ところがほとんどnullで返ってくる（10件中1件あるかないか）。
位置情報無しのツイートはプロフィールのLocation（現在地）を代替として返しているらしく、今のところジオタグ付きのみを取得する方法はない模様。

解決なう

10件で足りなきゃ100件でどうだ！
というわけで以下の仕様に変更。

• rppを限界の100に設定
• その中にあるジオタグ付きのものだけ抽出し地図面に表示する

レスポンスが若干遅くなりましたが、とくに問題なさそうだったのでこの仕様でリリースしました。

以下は田町駅を基点とした半径1kmのツイートを検索するサンプル。

<script type="text/javascript">
var url = "http://search.twitter.com/search.json?geocode=35.642475420821235,139.7509642816719,1km&rpp=10&callback=twitterCallback";
var flag = false;
function twitterSearch() {
    if (flag !== true) {
        flag = true;
        var script = document.createElement("script");
        script.src = url;
        script.type = "text/javascript";
        document.getElementsByTagName('head')[0].appendChild(script);
    }
}
function twitterCallback(e) {
    if (e && e.results) {
        var li, twitter = document.getElementById('twitter'), html;
        for (var i = 0, len = e.results.length; i < len; i++) {
            li = document.createElement("li");
            html = "<img src=\"" + e.results[i].profile_image_url + "\" width=\"48\" /> " + e.results[i].text;
            li.innerHTML = html;
            twitter.appendChild(li);
        }
    }
}
</script>

<ul id="twitter"></ul>

<input type="button" onclick="twitterSearch()" value="田町駅周辺のつぶやき" />

ジオタグの有無は判定してないので、おそらく田町とは無関係なツイートも表示されます。

Locationの値で返すというのが問題を引き起こしております。

例えば、東京駅付近でのジオタグ付きツイートが異常に少ない。
というかほとんど無い。もっと「東京駅なう」とかあっていいはず。
なぜだろう？

東京駅付近のジオタグ無しのLocationを見るとヒントが。

例えば東京駅付近のツイートのLocationには以下のようなものがあった。

• 「東京の西の方」
• 「東京じゃないところ」

少し場所を変えて新宿駅付近。

• 「日本全国」
• 「日本代表 イナズマイレブン」
• 「新宿 に行きたい」

ええ！？Locationに東京とか日本とか入れると東京駅や新宿駅付近にいることになっちゃうのかい？
⇒そうみたいです。
単純な住所文字列との一致で判定しているのだと思われます。

東京駅付近でジオタグ付きが消える理由

おそらく、東京中のジオタグ無しツイートが東京駅付近に流れてくるため、位置情報付きツイートを投稿してもすぐに押し流されるのではないかと思われます。

東京駅だけでなく、例えば各自治体名と同じ名前の駅付近（大阪や京都）なども同様に位置情報付きのツイートが少ないです。
これを回避するには位置情報付きのツイートが取得できるまでTwitterAPIをリクエストし続けるしかないのですが、クライアントサイドでそれをやったらTwitterに負荷かけちゃうかなあ、と思ってやりませんでした。
早く位置情報付きのみを返すAPIを整備してくれると助かります。

まとめ

Twitterの検索APIは認証無しでも使えるから色々とマッシュアップ出来て楽しい！
今回は単純に緯度経度のみで取得しましたが、キーワード検索やsince（いつから）、until（いつまで）などを指定することも可能です。
なので、例えば東京マラソンの期間中だけのツイートを表示する、なんてことも出来ると思います。

しかしながら不安定なことも多く、コールバック関数が壊れてたり、いきなり検索結果が一掃されてたり、サービスの中心に据えるにはまだ不安が残ります。絶賛成長中のTwitterだけに安定化への道のりはまだまだ遠いのでしょうか。
開発チームの検討を祈ります。