2006年01月02日
[技術] 新春、初プログラミング
最近、ウェブページのレイアウトをCSSで指定することが多い。自分でデザインしたページの場合は、XHTMLのclassやidの構成を
把握しているので、あまり問題はないが、MovableTypeなどのブログ
のレイアウトを変更するときに、XHTMLを見て、特定のclassやidの
範囲を把握するのは、非常に手間がかかる。
そこで、もう少し全体の構造が把握できるようにXHTMLを構造を
簡単に表示するツールを作成してみた。使い方は簡単で、構造を
知りたいウェブページのurlを入力して、ボタンをクリックすれば
構造をインデントして、表示する。
数字は、タグのネストの深さ
数字の次はタグもしくはテキスト（テキストは[ ]で囲んで表示）
ドットの後はclass名、#の後はid名
例）_________4 div.comments #comment-45
HTML木構造表示ツールはこちら
ちなみにPerlのコードは以下の通り。
#!/usr/bin/perl
use warnings;
use strict;
use CGI;
use LWP::Simple;
use HTML::Tree;
my $q = CGI->new;
my $url = $q->param('url');
print_error() unless ($url);
my $content = get($url);
print_error() unless ($content);
my $tree = HTML::TreeBuilder->new_from_content($content);
my $root = $tree->elementify();
my $meta = get_meta($root);
print "Content-type: text/html\n\n";
print <<EOF;
<html>
<head>
<title>$url</title>
$meta
</head>
<body>
<h2>$url</h2>
<pre>
EOF
rendering_tree($root, 1);
print <<EOF;
</pre>
</body>
</html>
EOF
sub rendering_tree {
my ($node, $level) = @_;
if (ref $node){
indent($level);
print "$level ";
print $node->tag();
my $class = $node->attr('class');
print ".$class" if $class;
my $id = $node->attr('id');
print " \#$id" if $id;
print "\n";
my @children = $node->content_list();
foreach (@children) {
rendering_tree($_, $level+1);
}
}elsif ($node ne ' ') {
indent($level);
print "$level [";
print $node."]\n";
}
}
sub indent {
my $level = shift;
for (my $i = 0; $i < $level; $i++) {
print "__";
}
}
sub get_meta {
my $root = shift;
my @metas = $root->find('meta');
foreach (@metas) {
if (lc($_->attr('http-equiv')) eq 'content-type'){
return $_->as_HTML();
}
}
}
sub print_error {
print "Content-type: text/html\n\n";
print <<EOF;
<html>
<head>
</head>
<body>
<h2>url is empty or invalid</h2>
</body>
</html>
EOF
exit;
}
投稿者 nekobara : 2006年01月02日 19:31
トラックバック
このエントリーのトラックバックURL:
http://www.ishihara.ne.jp/mt/mt-tb.cgi/850
コメント
あけましておめでとうございます。
本年もよろしくお願いします。
早速お仕事ですか。えらいですね。我が家は既に飲み正月です（詳細はブログ参照＾＾；）。
今年の抱負は・・・節約でしょうか。
でも旦那は
「今年はハイジの家（つまりスイス）に行くぞ。」と眩暈するようなことをのたまってます（ｰｰ;。
投稿者 shamon : 2006年01月02日 23:40
これは仕事というよりは、書初めみたいなものですね(^^)
ハイジの家といえば、グリンデルワルドですね。
登山電車でユングフラウヨッホまで、是非行ってみて
ください。今まで２度行きましたが、また行きたいです。
投稿者 nekobara : 2006年01月03日 00:55