使い方を一応書いておこう
これは何?
http://d.hatena.ne.jp/kamioka/20050609/1118324980
こちらにあるような、HTML構造を可視化したHTMLを出力するためのツール。CSSを書きたい時などに使えると思う。長いHTMLを見てる時など、共通のヘッダとか興味のない部分を隠したりしたくなったので作ってみた。
この可視化手法の元ネタはこちら。ツールの元ネタはこちら。
使い方は?
解析したいHTMLをコピペして解析ボタンを押す。そうすると右側にHTML構造が表示される。「ソース」というタブを押すとソースが表示される。コピペしてあなたのブログなりに貼り付け可能。ただし、開閉機構にJavaScriptを使っているので、scriptタグを書けないブログ(例えばはてな)などでは、解析するときに「シンプル」オプションを使うこと。こうするとJavaScriptを使わない(開閉できない)構造ダンプを取得できる。
ライセンスは?
可視化手法の元ネタのid:kamioka氏も、ツールの元ネタのlamala氏もライセンスを明確にしてないので未定。ソースに関しては、本質的な部分はほぼ書きおこしてるので気にしなくてよいのかな?特に問題なければGPL。
例:このブログの構造
※はてなはscriptタグ使えないので、開閉はできません。
TABLE
TBODY
TR
TD
A
IMG
A
IMG
IMG
MAP
AREA
AREA
TD
FORM
FONT [ ]
INPUT
INPUT
INPUT
INPUT
IMG
TD
A
IMG
TR
TD
IMG
TR
TD
DIV
CENTER
TABLE
TBODY
TR
TD
FONT [ ようこそ]
A
FONT [ajiyoshi]
TD
A
FONT [最新の日記]
TD
A
FONT [日記を書く]
TD
A
FONT [管理]
TD
A
FONT [ログアウト]
TD
A
FONT [ヘルプ]
TR
TD
IMG
H1 [*「ふっかつのじゅも]
A
IMG.icon
DIV.hatena-body
DIV.calendar [1970 |]
A [01]
A [09]
A [10]
A [11]
A [12]
A [01]
A [02]
A [03]
A [04]
A [05]
A [06]
DIV.main
DIV.calendar
A [<前の日]
DIV.day
H2
A
SPAN.date [2005-06-18]
A.edit [編集]
DIV.body
DIV.section
P
A.keyword [サーバ]
A.keyword [アカウント]
A.keyword [スタック]
A.keyword [テスト]
A.keyword [スタック]
A [こちら]
DIV.section
H3
A
SPAN.sanchor [■]
P
A.keyword [yahoo]
A.keyword [co.jp]
A.keyword [HTML]
A.keyword [yahoo]
A.keyword [HTML]
P
A.keyword [yahoo]
A.keyword [co.jp]
A.keyword [yahoo]
A.keyword [リーディング]
A.keyword [HTML]
DIV.calendar
A [<前の日]
SPAN.hatena-counter [23619]
DIV.sidebar
DIV.hatena-module
DIV.hatena-moduletitle [カレンダー]
DIV.hatena-modulebody
TABLE.calendar
TBODY
TR
TD.calendar-prev-month
A [<<]
TD.calendar-current-month
A [2005/06]
TD.calendar-next-month
A [>>]
TR
TD.calendar-sunday [日]
TD.calendar-weekday [月]
TD.calendar-weekday [火]
TD.calendar-weekday [水]
TD.calendar-weekday [木]
TD.calendar-weekday [金]
TD.calendar-saturday [土]
TR
TD.calendar-day
TD.calendar-day
TD.calendar-day
TD.calendar-day
A [1]
TD.calendar-day
A [2]
TD.calendar-day [3]
TD.calendar-day [4]
TR
TD.calendar-day [5]
TD.calendar-day [6]
TD.calendar-day [7]
TD.calendar-day [8]
TD.calendar-day [9]
TD.calendar-day [10]
TD.calendar-day [11]
TR
TD.calendar-day [12]
TD.calendar-day
A [13]
TD.calendar-day [14]
TD.calendar-day [15]
TD.calendar-day
A [16]
TD.calendar-day [17]
TD.calendar-day
A [18]
TR
TD.calendar-day [19]
TD.calendar-day [20]
TD.calendar-day [21]
TD.calendar-day [22]
TD.calendar-day [23]
TD.calendar-day [24]
TD.calendar-day [25]
TR
TD.calendar-day [26]
TD.calendar-day [27]
TD.calendar-day [28]
TD.calendar-day [29]
TD.calendar-day [30]
TD.calendar-day
TD.calendar-day
DIV.hatena-module
DIV.hatena-moduletitle [俺様専用メモ]
DIV.hatena-module
DIV.hatena-moduletitle [最新の画像]
DIV.hatena-modulebody
UL.hatena-photo
LI
A
IMG.hatena-photo
LI
A
IMG.hatena-photo
LI
A
IMG.hatena-photo
LI
A
IMG.hatena-photo
LI
A
IMG.hatena-photo
DIV.hatena-module
DIV.hatena-moduletitle
A [最新タイトル]
DIV.hatena-modulebody
UL.hatena-section
LI
A [いろいろ解析してみた]
LI
A [[ちらしの裏]リスト]
LI
A [残念なこと]
LI
A [この広告がすごい]
DIV.hatena-module
DIV.hatena-moduletitle [最近のコメント]
DIV.hatena-modulebody
UL.hatena-recentcomment
LI
A [2005-03-17]
LI
A [2005-03-09]
DIV.hatena-module
DIV.hatena-modulebody
UL.hatena-recentcomment
LI
A [2004-12-21]
A [誰のために?何のため]