はじめてのchaos proxy viewer
DESCRIPTION
荒川幼稚園破滅組の幻のLT。2010-07-31に行なわれたLL Tiger内の「LTの虎」の決勝戦で発表する予定だったLTの資料です。これの前に@itkz, @yuisekiが破滅ラウンジとChaos Proxyについて発表した結果を踏まえての資料になっています。 こちらの素材を使わせてもらいました http://sevenphoto.fc2web.com/TRANSCRIPT
![Page 1: はじめてのChaos Proxy Viewer](https://reader034.vdocuments.pub/reader034/viewer/2022051412/54bb83644a79598e0b8b45cc/html5/thumbnails/1.jpg)
はじめてのChaos Proxy Viewer
2010-07-31LL Tigerはめつようちえんあらかわぐみ@hagino3000
2010年8月3日火曜日
![Page 2: はじめてのChaos Proxy Viewer](https://reader034.vdocuments.pub/reader034/viewer/2022051412/54bb83644a79598e0b8b45cc/html5/thumbnails/2.jpg)
@hagino3000こんなかんじのアイコン
2010年8月3日火曜日
![Page 3: はじめてのChaos Proxy Viewer](https://reader034.vdocuments.pub/reader034/viewer/2022051412/54bb83644a79598e0b8b45cc/html5/thumbnails/3.jpg)
Chaos Proxy Viewerとは
@yuisekiが解説したChaos Proxyで収集したデータをブラウザで表示するためのwebアプリ。
@itkzの発表で説明のあった破滅ラウンジでは、プロジェクターを使って壁面に投射する展示をした。現在は台湾のarkiギャラリーにて展示中。
2010年8月3日火曜日
![Page 4: はじめてのChaos Proxy Viewer](https://reader034.vdocuments.pub/reader034/viewer/2022051412/54bb83644a79598e0b8b45cc/html5/thumbnails/4.jpg)
2010年8月3日火曜日
![Page 5: はじめてのChaos Proxy Viewer](https://reader034.vdocuments.pub/reader034/viewer/2022051412/54bb83644a79598e0b8b45cc/html5/thumbnails/5.jpg)
いかにして最先端のネット中毒者のアクティビティを可視化したか。
2010年8月3日火曜日
![Page 6: はじめてのChaos Proxy Viewer](https://reader034.vdocuments.pub/reader034/viewer/2022051412/54bb83644a79598e0b8b45cc/html5/thumbnails/6.jpg)
ぎじゅつてきなはなし
2010年8月3日火曜日
![Page 7: はじめてのChaos Proxy Viewer](https://reader034.vdocuments.pub/reader034/viewer/2022051412/54bb83644a79598e0b8b45cc/html5/thumbnails/7.jpg)
くうぜんのHTML5ブーム
HTMLに5を付けるだけで今ドキな感じがする。
CSSに3を付けるだけでcoolな感じがする。
2010年8月3日火曜日
![Page 8: はじめてのChaos Proxy Viewer](https://reader034.vdocuments.pub/reader034/viewer/2022051412/54bb83644a79598e0b8b45cc/html5/thumbnails/8.jpg)
このbig waveにのるしかない!!
2010年8月3日火曜日
![Page 9: はじめてのChaos Proxy Viewer](https://reader034.vdocuments.pub/reader034/viewer/2022051412/54bb83644a79598e0b8b45cc/html5/thumbnails/9.jpg)
WebWorker
データ取得処理を別スレッド(プロセス)にして、jsのメインスレッドをブロックしない様にした。
動いてるのか動いてないのかわからないぐらい快適。
2010年8月3日火曜日
![Page 10: はじめてのChaos Proxy Viewer](https://reader034.vdocuments.pub/reader034/viewer/2022051412/54bb83644a79598e0b8b45cc/html5/thumbnails/10.jpg)
WebSocket
サーバーのログをJSONストリームにした。
管理者コマンドのブロードキャスト
メッセージが超軽い。
“¥0x00Hello World¥0xff”
クロスドメイン余裕なのでテストも簡単。
2010年8月3日火曜日
![Page 11: はじめてのChaos Proxy Viewer](https://reader034.vdocuments.pub/reader034/viewer/2022051412/54bb83644a79598e0b8b45cc/html5/thumbnails/11.jpg)
Main Thread
DOM
Worker
WebSocket Connection
HTTP Server( Sinatra )
Worker
WebSocket Server
XHR XHR
messaging messaging
DOMそうさ
DOM Event
User Input
WebSocket
2010年8月3日火曜日
![Page 12: はじめてのChaos Proxy Viewer](https://reader034.vdocuments.pub/reader034/viewer/2022051412/54bb83644a79598e0b8b45cc/html5/thumbnails/12.jpg)
CSS Transform
アニメーション
フェードイン、フェードアウト
JSの処理が減る(^-^)
別プロセスで頑張ってくれる(chrome)
3D Transformはクソ重かったのでやめた。
2010年8月3日火曜日
![Page 13: はじめてのChaos Proxy Viewer](https://reader034.vdocuments.pub/reader034/viewer/2022051412/54bb83644a79598e0b8b45cc/html5/thumbnails/13.jpg)
そのほかリファラを送らない
Pixiv等、リファラを送ると画像が取得できないサービス対応
インラインフレームを作ってdataschemeのHTMLを挿入すると…… (os0xさん++)
リモートから強制リロード
最新のソースをロード
2010年8月3日火曜日
![Page 14: はじめてのChaos Proxy Viewer](https://reader034.vdocuments.pub/reader034/viewer/2022051412/54bb83644a79598e0b8b45cc/html5/thumbnails/14.jpg)
運用開始後……
2010年8月3日火曜日
![Page 15: はじめてのChaos Proxy Viewer](https://reader034.vdocuments.pub/reader034/viewer/2022051412/54bb83644a79598e0b8b45cc/html5/thumbnails/15.jpg)
様々な困難が……
2010年8月3日火曜日
![Page 16: はじめてのChaos Proxy Viewer](https://reader034.vdocuments.pub/reader034/viewer/2022051412/54bb83644a79598e0b8b45cc/html5/thumbnails/16.jpg)
2010年8月3日火曜日
![Page 17: はじめてのChaos Proxy Viewer](https://reader034.vdocuments.pub/reader034/viewer/2022051412/54bb83644a79598e0b8b45cc/html5/thumbnails/17.jpg)
オバマテロ
No more Hametsu...
2010年8月3日火曜日
![Page 18: はじめてのChaos Proxy Viewer](https://reader034.vdocuments.pub/reader034/viewer/2022051412/54bb83644a79598e0b8b45cc/html5/thumbnails/18.jpg)
オバマテロ
5月8日、flickrのWhite House’s Photostreamから巨大なサイズ
(4096x2731px)の画像が大量に流れてき
て、Chromeが何度もクラッシュ。
何度ブラウザを再起動しても同じデータが残っている限り落ち続ける。
2010年8月3日火曜日
![Page 19: はじめてのChaos Proxy Viewer](https://reader034.vdocuments.pub/reader034/viewer/2022051412/54bb83644a79598e0b8b45cc/html5/thumbnails/19.jpg)
2010年8月3日火曜日
![Page 20: はじめてのChaos Proxy Viewer](https://reader034.vdocuments.pub/reader034/viewer/2022051412/54bb83644a79598e0b8b45cc/html5/thumbnails/20.jpg)
オバマテロ ー Clear!!
サイズの小さい方の画像を取得する事でブラウザの負荷を軽減。URLに含まれる画像サイズを変えるだけ。tumblr画像にも同様の処理を入れた。
米国政府の介入も技術でなんとかなる。
2010年8月3日火曜日
![Page 21: はじめてのChaos Proxy Viewer](https://reader034.vdocuments.pub/reader034/viewer/2022051412/54bb83644a79598e0b8b45cc/html5/thumbnails/21.jpg)
来場者が展示マシンを触ってブラウザが落とされたりする
2010年8月3日火曜日
![Page 22: はじめてのChaos Proxy Viewer](https://reader034.vdocuments.pub/reader034/viewer/2022051412/54bb83644a79598e0b8b45cc/html5/thumbnails/22.jpg)
ネタにする事で解決
2010年8月3日火曜日
![Page 23: はじめてのChaos Proxy Viewer](https://reader034.vdocuments.pub/reader034/viewer/2022051412/54bb83644a79598e0b8b45cc/html5/thumbnails/23.jpg)
稀代のSF作家
海猫沢めろんによって落とされた栄えある
Chaos Proxy Viewer海猫沢めろん以上の作家ならば
落としてもよい
2010年8月3日火曜日
![Page 24: はじめてのChaos Proxy Viewer](https://reader034.vdocuments.pub/reader034/viewer/2022051412/54bb83644a79598e0b8b45cc/html5/thumbnails/24.jpg)
エロ/グロがぞうテロ
2010年8月3日火曜日
![Page 25: はじめてのChaos Proxy Viewer](https://reader034.vdocuments.pub/reader034/viewer/2022051412/54bb83644a79598e0b8b45cc/html5/thumbnails/25.jpg)
エロ/グロがぞうテロ
極端な性癖嗜好の画像でスクリーンを埋めつくすテロ行為。
死体画像
四肢切断エロ
etc...
2010年8月3日火曜日
![Page 26: はじめてのChaos Proxy Viewer](https://reader034.vdocuments.pub/reader034/viewer/2022051412/54bb83644a79598e0b8b45cc/html5/thumbnails/26.jpg)
画像に発信者のアイコンを付加する事で解決
2010年8月3日火曜日
![Page 27: はじめてのChaos Proxy Viewer](https://reader034.vdocuments.pub/reader034/viewer/2022051412/54bb83644a79598e0b8b45cc/html5/thumbnails/27.jpg)
見えてはいけない物が見える問題
HTTPでGmailを見てる人が……
隣りのギャラリーの人が普通にhametsuアクセスポイントで仕事してる。
2010年8月3日火曜日
![Page 28: はじめてのChaos Proxy Viewer](https://reader034.vdocuments.pub/reader034/viewer/2022051412/54bb83644a79598e0b8b45cc/html5/thumbnails/28.jpg)
見なかった事にして解決
2010年8月3日火曜日
![Page 29: はじめてのChaos Proxy Viewer](https://reader034.vdocuments.pub/reader034/viewer/2022051412/54bb83644a79598e0b8b45cc/html5/thumbnails/29.jpg)
破滅クルーが次々と倒れる
2010年8月3日火曜日
![Page 30: はじめてのChaos Proxy Viewer](https://reader034.vdocuments.pub/reader034/viewer/2022051412/54bb83644a79598e0b8b45cc/html5/thumbnails/30.jpg)
退勤→破滅ラウンジ→出社 の毎日
12
9
32
破滅クルーの一日(時間)
破滅 仕事 睡眠 メシ
2010年8月3日火曜日
![Page 31: はじめてのChaos Proxy Viewer](https://reader034.vdocuments.pub/reader034/viewer/2022051412/54bb83644a79598e0b8b45cc/html5/thumbnails/31.jpg)
2010年8月3日火曜日
![Page 32: はじめてのChaos Proxy Viewer](https://reader034.vdocuments.pub/reader034/viewer/2022051412/54bb83644a79598e0b8b45cc/html5/thumbnails/32.jpg)
まぁゴミ溜めの中で生活してたらしょうがないよね
2010年8月3日火曜日
![Page 33: はじめてのChaos Proxy Viewer](https://reader034.vdocuments.pub/reader034/viewer/2022051412/54bb83644a79598e0b8b45cc/html5/thumbnails/33.jpg)
現代アートの大物に大いなる勘違いをされる
エロ画像映してるだけでしょ?
2010年8月3日火曜日
![Page 34: はじめてのChaos Proxy Viewer](https://reader034.vdocuments.pub/reader034/viewer/2022051412/54bb83644a79598e0b8b45cc/html5/thumbnails/34.jpg)
ネット上のコンテンツはポルノで溢れている事の証左
Q.E.D
2010年8月3日火曜日
![Page 35: はじめてのChaos Proxy Viewer](https://reader034.vdocuments.pub/reader034/viewer/2022051412/54bb83644a79598e0b8b45cc/html5/thumbnails/35.jpg)
まとめ
2010年8月3日火曜日
![Page 36: はじめてのChaos Proxy Viewer](https://reader034.vdocuments.pub/reader034/viewer/2022051412/54bb83644a79598e0b8b45cc/html5/thumbnails/36.jpg)
むせんのこうかいアクセスポイントにはきをつけよう
あぶないよ!!
せめてHTTPSを使おう
2010年8月3日火曜日
![Page 37: はじめてのChaos Proxy Viewer](https://reader034.vdocuments.pub/reader034/viewer/2022051412/54bb83644a79598e0b8b45cc/html5/thumbnails/37.jpg)
おわり
2010年8月3日火曜日