ウェブページの HTML 構造を解析して、Graph にしてくれるサービスがある。
ここでいう 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 がお花を描いてくれるのを見ると和む :) 疲れた時なんかに、どうぞ。
これ、面白いですね。
ReplyDeletemixiGraphみたいですが、色にも意味があるんですね。
ゆっくりと描いていくのもまた一興でしょうか。
面白いでしょう ;)
ReplyDelete描画スピードは、おそらく CPU パワーとページの大きさに寄ると思います。大きなページがゆっくりと「花」になっていくのを見てると、時間を忘れてしまいそうです。スクリーン・セーバーとかに出来たら楽しいでしょうねぇ :P