Websites as graphs

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

• Websites as graphs - an HTML DOM Visualizer Applet

ここでいう 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 というブログ。

• Aharef: Websites as graphs

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

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

• 秋元@サイボウズ研究所プログラマーBlog: HTML構造のグラフによる可視化

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

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

• Flickr: Photos tagged with websitesasgraphs

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

• caramel*vanilla » サイトのHTMLを視覚化 - Websites as Graphs

あとがき

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