全世界のtweetをリアルタイムにマッピング 〜socket.ioやらnode.jsやら〜
全世界のtweetをリアルタイムにマッピングするページを作りました。……というとちょっと大げさですが。
↑のページの、簡単な技術的説明です。ぶっちゃけ負荷のこととか考えて無くて、動いてない時も多いかもなんで、そのうちYouTubeに動画アップします。
簡単なしくみ
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
あとがき・余談
若干駆け足で適当な説明ですが、詳しいところはnode.jsが盛り上がってるおかげでいろいろ出てますし(というかそれのおかげで完成したようなもん)、こんなところで。
当初の予定では、WebSocketの勉強をするつもりだったのですが、Socket.ioが楽しすぎて結局これで一つ作ってしまいました。webkit系の方ならwebsocket通信になるはずです。
想定よりスムーズな動きを見せてくれて、個人的には満足です。
さて、明後日から5日ほど台湾に行くので、その間にサーバ死んでたらごめんなさいorz