全世界のtweetをリアルタイムにマッピング 〜socket.ioやらnode.jsやら〜

全世界のtweetをリアルタイムにマッピングするページを作りました。……というとちょっと大げさですが。


http://bugsrock.com/twistmap/


↑のページの、簡単な技術的説明です。ぶっちゃけ負荷のこととか考えて無くて、動いてない時も多いかもなんで、そのうちYouTubeに動画アップします。

つかったもの

ライブラリ
web API

簡単なしくみ

node.jsとsocket.ioでstreaming APIからデータを引っ張ってパースして全クライアントにbroadcastするサーバを立て、そいつを各クライアントが受け取り、google map APIを使って特定座標にマップしているだけです。ぶっちゃけ、難しいことは何もしていない(考えてない)です。なので、よく落ちます。

ポイント

node.jsとsocket.io

楽しす。マジ楽しす。脳汁出まくりんぐで最高です。

twitter streaming API

filterメソッド使ってます。検索指定は、「日本全域を囲む四角形の範囲のツイート」OR「4sqを含むツイート」。なので、海外のtweetは4sqしか取ってません。全世界に及ぶ範囲指定をするとどうなるかは不明。多分動かないだろうなーってことで試してないです。ジオタグついてないtweetは当然スルーです。日本全域を囲む件については、昔は面積がもっと狭かったらしいですが、最近制限が緩くなったみたいです……よ? 実はちょっと英語のマニュアルの翻訳に自信がないです。一応日本全域取れてるから大丈夫かな、って感じで; 四角形なので、ロシアの一部とか韓国のも拾ってきます。

Google Map API

これが無かったら公開はもっと遅れてました。実は初めて使ったんですが、こんなに自由度高いと思ってなかったです。jQueryとも親和性が高いですね。アニメーションするマーカが結構いい感じに作れて満足してます。

クロスブラウザ(てかOpera

Socket.ioとjQuery使ったおかげで偶然にも半クロスブラウザ達成してて、「やったろうやないか」と意気込んだはいいものの、Operaで動かず。調べたら、Operaはポート違うとクロスドメインに引っかかるということが判明。知らんかった。「クロスして無いやん!」とツッコミを入れる。
最初はApacheの80ポートとnode.jsの8080ポートでやってたので、リバースプロキシで対応してやろうかと思ったらプロキシがWebSocketに対応してなくて(そりゃそうだ)、ChromeがWebSocketじゃなくXHRポーリングするようになったので、そりゃねーわってことでApacheをカット。結局今はpure javascriptで動いています。
余談ですが、IE6でも動きました。思わずしたり顔になりました。すごいのはSocket.ioとjQueryだけど。

公開後にサーバが落ちまくった

主にSocket.ioの不具合。Socket.ioのコードを弄って、nullチェックを追加しまくりました。Socket.ioのバージョンを上げればいいのかもだけど、まだそこまではやれてないです。

その他

サーバの設定って難しいですよね。。さくらインターネットの社長のブログがとても役立ちました。田中さんありがとうございます。

TODO

  • 死活監視とdaemon化(ぉぃ
  • つぶやきをドラッグで動かせるようにする
  • グリグリやってるとたまにマーカがずれるのを直す
  • 範囲指定できるようにする
  • どの仕組みで繋いでるかをユーザに見せる(websocketなのか、xhr-pollingなのか)
  • サーバをEC2にするとか考える
  • streaming APIの限界を調べる
  • Socket.ioのバージョンアップ

あとがき・余談

若干駆け足で適当な説明ですが、詳しいところはnode.jsが盛り上がってるおかげでいろいろ出てますし(というかそれのおかげで完成したようなもん)、こんなところで。
当初の予定では、WebSocketの勉強をするつもりだったのですが、Socket.ioが楽しすぎて結局これで一つ作ってしまいました。webkit系の方ならwebsocket通信になるはずです。
想定よりスムーズな動きを見せてくれて、個人的には満足です。

さて、明後日から5日ほど台湾に行くので、その間にサーバ死んでたらごめんなさいorz