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

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

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

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

google_graph_small.gif

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

: リンク (A タグ)

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

: DIV タグ

: 画像 ( IMG タグ)

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

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

: ルートである HTML タグ

: その他のタグ

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

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

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

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

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

この記事は移転前の古いURLで公開された時のものです

  • ブックマークが新旧で分散している場合があります。
  • 移転前は現在とは文体が違い「である」調です。(参考)
  • 記事の内容が古くて役に立たなくなっている、という場合にはコメントやツイッターでご指摘いただければ幸いです。最新の状況を調べて新しい記事を書くかもしれません

「HTML構造のグラフによる可視化」への1件のフィードバック

コメントを残す

メールアドレスが公開されることはありません。