2006-05-30

Websites as graphs

ウェブページの HTML 構造を解析して、Graph にしてくれるサービスがある。

ここでいう Graph は、数学用語でいう所の「グラフ」。「点と点を線で結んだもの」をグラフと呼ぶ。

clmemo@aka as graph上記サイトで「Websites Address」欄に URL を入力すると、そのページの HTML 要素 (p とか div とか a とか img とか) に色を付けて、まるでお花のような絵を描いてくれる。百聞は一見にしかず。貼り付けてる画像は、clmemo@aka のトップページを Websites as graphs にかけた結果。

簡単に色の説明をば。「黒」が HTML 要素。ページの一番トップ。緑が div、赤がテーブル関係、黄色がフォーム関係の要素。青がリンクで、紫が画像。段落に改行、引用の要素がオレンジ。最後に灰色が、その他の要素。

Websites as graphs の実行には、Java Runtime が必要。

Websites as graphs について

この可視化について最初に記事を書いたのは、(おそらく) Aharef というブログ。

当初、Graph 化するアプリケーションは提供されてなくて、解析結果だけが載っていた。今も、CNN.com や boingboing.net、apple.com などの解析結果を同記事で見ることができる。

このサイトを日本で紹介したのが、秋山さんのブログ。

後で、Java applet 版 (上の an HTML DOM Visualizer Applet ページ) が公開されて、誰でも、任意のページを解析できるようになった。

いま、巷では、「websitesasgraphs」というタグを付けて Flickr に解析結果をアップするのがはやっているとか...

ぼくは、このアプレットが出たのを lomo さんのサイトで知った。

あとがき

他人のページの構造を見てみるのも楽しもんだけど、やっぱり自分のサイトで遊ぶのが一番! Applet がお花を描いてくれるのを見ると和む :) 疲れた時なんかに、どうぞ。

2 comments:

  1.  これ、面白いですね。
     mixiGraphみたいですが、色にも意味があるんですね。
     ゆっくりと描いていくのもまた一興でしょうか。

    ReplyDelete
  2. 面白いでしょう ;)

    描画スピードは、おそらく CPU パワーとページの大きさに寄ると思います。大きなページがゆっくりと「花」になっていくのを見てると、時間を忘れてしまいそうです。スクリーン・セーバーとかに出来たら楽しいでしょうねぇ :P

    ReplyDelete