全世界の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通信になるはずです。
想定よりスムーズな動きを見せてくれて、個人的には満足です。
さて、明後日から５日ほど台湾に行くので、その間にサーバ死んでたらごめんなさいorz
草を生やして温暖化を防止するUserScriptを書いた
これはひどい。
万が一インストールしたければこちらから。
google chromeでしか動作確認してませんが、firefoxでも動く……はず。
ちなみに俺は即無効化しました。ウザ過ぎる。
どうしてこんなスクリプトを！
というツイートを見かけて、ずっと作りたかったのですが、どうにも文字列がうまい具合に分割してくれなくて、とはいえこんな一発ネタでYahoo!形態素解析API使って……とか有り得ないだろってことで、お蔵入りしてました。
しかし本日、↓のようなライブラリの存在を知りまして。
わずか25kバイトのソースコードで、日本語の新聞記事であれば文字単位で95%程度の精度で分かち書きが行えます。
http://chasen.org/~taku/software/TinySegmenter/
ktkr。
素晴らしく要件を満たしたライブラリでした。
製作時間は2〜30分程度？ ぶっちゃけ「textnodeだけを取得するxpath」を考えるのが一番時間かかってます。
こんなふざけたスクリプトだけど、テキスト弄る系のスクリプトを作るときにまた見直しそうなスクリプト。いい勉強になった。
いいｗ勉強にｗなったｗとかｗワロスｗｗｗ
つれづれなるままに、ひぐらしtwitterにむかひて、おもつたこと
祝！twitter歴530日！（ぇー
ということで、いつのまにやらtwitter始めて500日＋α経ってたんで、ざっくり記録してみる。
2010/8/30現在のスペック
[twitter:@mirutover]
| フォロー | 143 |
| フォロワー | 193 |
| リスト | 34 |
| ツイート数 | 3161 |
平均して1日6ツイート。でも指数関数的に増えてて、twilogによると最近は平均20以上はありそう。
他の人とのスタンス
- 自分からフォローするのは、リアルであった人と好きな漫画家などの著名人。
- フォロー返しは、相手のTL見て適当に。割と返す方。
- リストは一切使ってない。どういうものかも実はイマイチ分かってないｗ
- ブロックはスパム以外使ってない。フォローしない・リムーブで対応。
発言内容
| 発言内容 | パーセント |
|---|---|
| 日常 | 25% |
| IT | 20% |
| ネタ | 20% |
| ゲーム | 15% |
| 漫画 | 10% |
| アニメ | 5% |
| 「カラオケ行きたい」 | 3% |
| その他 | 2% |
※ざっくりとtwilog見て。正確ではない。
外部サービス
- ATND by Media Technology Labs
- TweetIrcGateway
- Twitter for iPhone by atebits
- ふぁぼるっく by osapon
- TwitThis by Chuug
- Twitter for Facebook by Twitter
- oauth - jsdo.it
- Tweetvite by Simpletastic Inc.
- ニコニコ生放送
- mixi ボイス by 株式会社 ミクシィ
- Twilog by ropross.net
- Hatena by Hatena
- Twilk.com by Congo Labs
- www.movatwi.jp by f-shin
- favotter by ono_matope
- jigtwi by 株式会社jig.jp
- twicca(deprecated) by R246Design
- Twitpic by Twitpic Inc
- ついっぷる by NEC Biglobe
- Chromed Bird by Cezar S〓 Espinola
- コレカモネット
- TwitIQ by HanPerson.com
- TweetMeme by Favorit Ltd.
- 携帯百景 by 運営うさぎ
俺はホイホイOAuth許可する人間じゃない（キリッ
……とか思ってたけど、結構「こんなの登録したっけ？」ってのがｗ今度整理しよう。
まとめ
pixiv検索結果をソートして見やすくするグリモン書いた
概要
pixiv検索結果の横一列をブックマーク数でソートするgreasemonkey script
を書きました。google chrome最新版とfirefox最新版で動作確認しています。
AutoPagerizeとの組み合わせ
AutoPagerize。
この拡張orグリモンは、縦スクロールするだけで、自動的に次のページを読み込んでくれるものです。
pixivへも対応していて、検索結果ページでマウスホイールを下にくるくる回すだけで、次のページを次々と読み込んでくれるので、これだけでもpixivがすばらしく使いやすくなります。
初めは一画面丸々ソートするグリモンだったのですが、私がAutoPagerizeを使うようになり、一画面でソートしても見づらいだけになってしまったので、横一列でソートをするように変更されました。
これと本グリモンを組み合わせることで、左端を眺めながらマウスホイールを下にくるくるするだけで（笑）、ブックマーク数の多い画像をチェックすることができます。どんだけ不精だよ俺ｗ
余談
AutoPagerizeと組み合わせるために、500ミリ秒毎にソートすべき要素がないかチェックするという結構強引な手段をとっています。
私の環境では導入後も特に変化ないですが、人によっては若干重いかもしれません。でもxpathの動くモダンブラウザならまぁ問題ないはず。。
なぜこんなにブクマされてるし、と思いながら微妙に修正。挙動は一緒。
pixiv大幅更新に対応しました。ただ、AutoPagerizeの対応がまだなので、それが来たらまた修正必要かも
AutoPagerizeをどなたか対応してくれたみたいなので、再修正しました。
今さらですが、AutoPage『r』izeだったんですね。。
