サイトのHTMLを解析
以前見かけたこちらの記事
秋元@サイボウズ研究所プログラマーBlog: HTML構造のグラフによる可視化
サイトのHTMLを解析して視覚化するテストについての記事なんですが任意のサイトについても視覚化できるアプレットの公開予定があるとも書かれていました。
気になりつつも忘れてたらそのアプレットが公開されたようです。
Websites as graphs - an HTML DOM Visualizer Applet
グラフの色分けは以下の通りです。
青: リンク (A タグ)
赤: テーブル (TABLE, TR , TD タグ)
緑: DIV タグ
紫: 画像 ( IMG タグ)
黄色: フォーム (FORM, INPUT, TEXTAREA, SELECT OPTION タグ)
オレンジ: 改行と引用 (BR, P, BLOCKQUOTE タグ)
黒: ルートである HTML タグ
灰: その他のタグ
[ 秋元@サイボウズ研究所プログラマーBlog: HTML構造のグラフによる可視化 ]より引用
Accessed Date:2006年5月28日 21:56:53
さっそく自分のblogでもやってみました。
思ったより画像(紫)が少ないです。
んでリンクタグ(青)の多さが目立ちますね。
きっとテーブルレイアウトのサイトは赤が多いんだろうなーと思いmixiでやってみましたよ :P
やっぱり :P
Div厨と呼ばれるサイトは緑が多いんでしょうねー
緑が●個でたらDiv厨認定とか :P
Flickr!にはこのグラフに「websitesasgraphs」というタグをつけてスクリーンショットが集められています。
Flickr: Photos tagged with websitesasgraphs
いろんなサイトを見てみると面白いかもしれません。
Tags: html, visualization
こんにちは。Applet が出たことを lomo さんの記事で知りました。Linux だと Java Runtime のインストールが必要だったので、手軽に試せる Windows に起動し直して、この Applet で遊びました。
HTML 構造が「花の絵」になるなんて、思いもよりませんでしたよ。見てて楽しいですね :)
＞@akaさん
Flickr!の「websitesasgraphs」は面白いですね :-)
Artですよー
(どうしても自分のがショボく見えますが…)
生成される様を眺めるのも和みますね :-)