HTML構造のグラフによる可視化

[2006/5/28 追記] applet バージョンが公開されたので、自分のページのHTMLを可視化することもできるようになった。

論文にありそうなネタで、じつは同案多数かもしれないが,

Websites as graphs では、HTML の構造を要素ごとに色分けしグラフ化する作業を著名ないくつかのサイトについて行なったという。下はグーグルのもので、

以下のような色分けになっているという。

青: リンク (A タグ)

赤: テーブル (TABLE, TR , TD タグ)

緑: DIV タグ

紫: 画像 ( IMG タグ)

黄色: フォーム (FORM, INPUT, TEXTAREA, SELECT OPTION タグ)

オレンジ: 改行と引用 (BR, P, BLOCKQUOTE タグ)

黒: ルートである HTML タグ

灰: その他のタグ

元記事ではもっとたくさんの実例が出ている。

いくつも見ると、直感的に、サイトが無駄に複雑になっていないか、といったことがすばやくわかるようになったりするのだろうか。

任意のページを渡すとグラフ化するようなアプレットも考えているそうなので、それが出来たら自分のサイトについて試してみると何か気付きがあるかもしれない。

applet 版も公開された。Java applet が on になっている必要があるけど、リアルタイムで生成されていくグラフの様子はとても面白い。

また、作成したグラフを Flickr に特定のタグであげてね、という案内も載っていて、Flickr が成果物の手軽な共有場となっている。いろいろなサイトの描画結果はこちら。こうやって他所のサービスを組み合わせて簡単なコミュニティを作らせるところも面白い。