はじめてのchaos proxy viewer

はじめてのChaos Proxy Viewer

2010-07-31LL Tigerはめつようちえんあらかわぐみ@hagino3000

2010年8月3日火曜日

@hagino3000こんなかんじのアイコン


Chaos Proxy Viewerとは

@yuisekiが解説したChaos Proxyで収集したデータをブラウザで表示するためのwebアプリ。

@itkzの発表で説明のあった破滅ラウンジでは、プロジェクターを使って壁面に投射する展示をした。現在は台湾のarkiギャラリーにて展示中。


いかにして最先端のネット中毒者のアクティビティを可視化したか。


ぎじゅつてきなはなし


くうぜんのHTML5ブーム

HTMLに5を付けるだけで今ドキな感じがする。

CSSに3を付けるだけでcoolな感じがする。


このbig waveにのるしかない!!


WebWorker

データ取得処理を別スレッド(プロセス)にして、jsのメインスレッドをブロックしない様にした。

動いてるのか動いてないのかわからないぐらい快適。


WebSocket

サーバーのログをJSONストリームにした。

管理者コマンドのブロードキャスト

メッセージが超軽い。

“¥0x00Hello World¥0xff”

クロスドメイン余裕なのでテストも簡単。


Main Thread

DOM

Worker

WebSocket Connection

HTTP Server( Sinatra )

Worker

WebSocket Server

XHR XHR

messaging messaging

DOMそうさ

DOM Event

User Input

WebSocket


CSS Transform

アニメーション

フェードイン、フェードアウト

JSの処理が減る(^-^)

別プロセスで頑張ってくれる(chrome)

3D Transformはクソ重かったのでやめた。


そのほかリファラを送らない

Pixiv等、リファラを送ると画像が取得できないサービス対応

インラインフレームを作ってdataschemeのHTMLを挿入すると…… (os0xさん++)

リモートから強制リロード

最新のソースをロード


運用開始後……


様々な困難が……


オバマテロ

No more Hametsu...


オバマテロ

5月8日、flickrのWhite House’s Photostreamから巨大なサイズ

(4096x2731px)の画像が大量に流れてき

て、Chromeが何度もクラッシュ。

何度ブラウザを再起動しても同じデータが残っている限り落ち続ける。


オバマテロー Clear!!

サイズの小さい方の画像を取得する事でブラウザの負荷を軽減。URLに含まれる画像サイズを変えるだけ。tumblr画像にも同様の処理を入れた。

米国政府の介入も技術でなんとかなる。


来場者が展示マシンを触ってブラウザが落とされたりする


ネタにする事で解決


稀代のSF作家

海猫沢めろんによって落とされた栄えある

Chaos Proxy Viewer海猫沢めろん以上の作家ならば

落としてもよい


エロ/グロがぞうテロ


エロ/グロがぞうテロ

極端な性癖嗜好の画像でスクリーンを埋めつくすテロ行為。

死体画像

四肢切断エロ

etc...


画像に発信者のアイコンを付加する事で解決


見えてはいけない物が見える問題

HTTPでGmailを見てる人が……

隣りのギャラリーの人が普通にhametsuアクセスポイントで仕事してる。


見なかった事にして解決


破滅クルーが次々と倒れる


退勤→破滅ラウンジ→出社の毎日

12

9

32

破滅クルーの一日(時間)

破滅仕事睡眠メシ


まぁゴミ溜めの中で生活してたらしょうがないよね


現代アートの大物に大いなる勘違いをされる

エロ画像映してるだけでしょ?


ネット上のコンテンツはポルノで溢れている事の証左

Q.E.D


まとめ


むせんのこうかいアクセスポイントにはきをつけよう

あぶないよ!!

せめてHTTPSを使おう


おわり


はじめてのchaos proxy viewer

Technology