使い方を一応書いておこう

これは何?

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

H3

A

SPAN.sanchor [■]

A.keyword [JavaScript]

A.keyword [HTML]

P [こちらのツールをいじ]

A.keyword [IE]

A.keyword [XML]

A.keyword [JavaScript]

P

A.keyword [FireFox]

A.keyword [Linux]

A.keyword [IE]

A.keyword [Windows]

P

A.keyword [Ajax]

A.keyword [CGI]

A.keyword [apache]

A.keyword [サーバ]

A.keyword [アカウント]

A.keyword [JavaScript]

A.keyword [スタック]

A.keyword [テスト]

A.keyword [スタック]

A [こちら]

P.sectionfooter

A [コメント(0)]

A

IMG.icon

DIV.section

H3

A

SPAN.sanchor [■]

P

A.keyword [yahoo]

A.keyword [co.jp]

A.keyword [HTML]

A.keyword [yahoo]

A.keyword [HTML]

UL

LI

LI

P

A.keyword [yahoo]

A.keyword [co.jp]

A.keyword [yahoo]

A.keyword [リーディング]

A.keyword [HTML]

P.sectionfooter

A [コメント(0)]

A

IMG.icon

DIV.refererlist

DIV.caption

UL

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-modulebody

P

P

A [ブクマ]

P

A [アンテナ]

P

A [[このサイトについて]

P

A [[このサイトのRSS]

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

LI

A [いろいろ解析してみた]

LI

A [Yahoo!メールの]

LI

A [[ちらしの裏]リスト]

LI

A [残念なこと]

LI

A [この広告がすごい]

DIV.hatena-module

DIV.hatena-moduletitle [最近のコメント]

DIV.hatena-modulebody

UL.hatena-recentcomment

LI

LI

LI

LI

A [2005-03-17]

LI

A [2005-03-09]

DIV.hatena-module

DIV.hatena-moduletitle [最近のトラックバック]

DIV.hatena-modulebody

UL.hatena-recentcomment

LI

A [2004-12-21]

A [誰のために?何のため]

LI

A [2005-05-24]

LI

A [2005-05-24]

LI

A [2005-05-24]

LI

A [2005-05-24]