2013年10月30日水曜日

見えない「第三者サイト通信」に光を当てる「Lightbeam」(on twitter @rahumj)

 
Webブラウザ FireFox の無償アドオン Lightbeam は,あるサイトのページを表示したときに,どのような他のサイトと通信しているかを,Cookieの使用を含めてグラフィック表示する mozilla.org 謹製アドオンだ.

 最近のWebページは,マッシュアップ,ウィジェット,SNS・ブログ連動,アクセス解析等のために,そのWebページのサイト以外の,他のサイトとの通信が常態化している.それらの「目に見えない」サイトの中には,ユーザのネット上の挙動をモニタリングし,記録しているものもある.

 Lightbeam は,我々が知らず知らず表示している,その得体の知れない「目に見えない」サイトに対して,光を当てて,その素性を明らかにするためのフラッシュライトだ.Lightbeam は今までに表示したサイトと,その「目に見えないサイト」をグラフィック表示するだけではない.その「目に見えないサイト」の国籍や最初と最後のアクセス日時なども表示してくれる.現在はセキュリティ面から見た危険度などは,残念ながら表示されない.

 Lightbeam がすばらしいのは,その機能だけではなく,そのグラフィック表示そのものだ.ソーシャルグラフ に似た,サイト関係のネットワーク表示は,納豆をかき混ぜるのにも似て(?),操作するだけでも楽しい.

 Lightbeam は当然のことながら,HTML5 , JavaScript , CSS3 で作られている.ただどのような JavaScriptライブラリ を用いているのかに興味を持ち,中をのぞいてみると,D3.jsPicoModal が使用されていた.

 今までに D3.js を使用するような案件はなかったため,名前ぐらいしか知らなかったが,まさかこれほどまでの表現力を,HTMLページに与えることができるとは思わなかった.しかも D3.js のデータ駆動型アプローチは,今まで扱ったことが無いので,大変興味深い.今後は D3.js を用いるページが多くなるのか?ちょっと勉強する価値はあるかもしれない.

 もう一方の PicoModal の方は,「A small, self-contained JavaScript modal library」ということで,他のライブラリに依存しない超小型サイズ(1.6kb)のモーダル表示ライブラリだが,日本語のドキュメントは見当たらない.PicoModal は単機能だが,CSSも不要で,サイズも小さく,依存性もないことから,モーダル機能を持たない JavaScriptライブラリ と組み合わせるのには適しているかもしれない.