HTML構造の図示 その2

昨日、結城さんとこ経由でHTML構造の図示ツールの話題を書いたが、そのツールが早く*1も作成されたようだ。
http://la.ma.la/blog/diary_200506130100.htm
Javascriptを使い倒す話題の人*2がまたもやサッサと作成された御様子。いやー手早いね。
例によってJavascript製。URLを指定すると、そのページのHTMLソースを取得して解析結果を表示してくれる。ただし、XMLHTTPRequestを使っているので、基本的に外部ドメインのソース取得はできない、とのこと。解析だけじゃなくて、CSSの編集もできるようになっているようだ。

そして、id:s_sawadaさんにも昨日のエントリへのコメントで類似のツールを教えて頂いた。
http://www.stylesheet-stylebook.com/?p=12
こちらはBookmarkletで実装されていて、そのとき見ているサイトの上にオーバーラップする形で、(多分)Div領域の矩形とid,class属性の情報を出してくれる。s_sawadaさんも書いておられるように、HTMLがレンダリングされた表示の上に要素名と各要素の情報が重ね書きされてしまうため、少しみにくい。構造の学習というより、CSSの見ためのデバッグに使えそう。


しかしどっちもJavascriptか。Javascriptだと、作る環境もお手軽だし、試作したものを公開するのもお手軽ということか。うーむ。ライブラリ&環境にもう少しきっちりした標準があればなぁ…

*1:話題にとりあげるのが遅かっただけともいう

*2:名前はしらない