「HTML構造のグラフによる可視化」をやってみた
秋元さんのBlogでHTML構造のグラフによる可視化を知ったので、これを自分のGRINEditで実行するのにどれくらいの工数がかかるのか試してみました。
40分で見栄えの悪いものができました。Jythonでgraph.addVertexなどを叩けばもっと楽にできたはずなのですが、Jython2.1にはPython2.2からついたHTMLParserライブラリがなかったので断念。仕方なくデータファイルを書き出すことにしたものの、空白文字区切りのフォーマットのため頂点に名前が入っていないと色を指定できない…。ううむ。
とりあえずTODOは、まともなファイルフォーマットを作ることと、Jythonではライブラリが足りない or ユーザがPython使いでないというケースを考えてXML-RPCかなにかをサポートすることでしょうか。となるとやっぱりNarVisualizerプロジェクトを吸収するのが一番かも知れませんね、これはXML-RPCでPythonからでもRubyからでも可視化できるソフトなので。
ソースコード(81行、Python)は下記。Node.childrenとはかHTMLパーサのプロトタイプを作った時の名残なので必要ないですね。
from HTMLParser import HTMLParser
import urllib
# 10min. to make prototype parser
# 3min. to make coloring
# 22min. to visualize
colors = {
"a": "0000A0",
"div": "00A000",
"img": "A000A0",
"html": "000000"
}
for tag in "table tr td".split():
colors[tag] = "FF0000"
for tag in "from imput textarea select option".split():
colors[tag] = "FFFF00"
for tag in "br p blockquote".split():
colors[tag] = "A0A000"
def getColor(tag):
return colors.get(tag, "A0A0A0")
vertexList = []
edgeList = []
def addVertex(v):
vertexList.append(v)
return len(vertexList)
class Node:
def __init__(self, name, parent):
self.name = name
self.children = []
self.parent = parent
self.id = addVertex(name)
def append(self, v):
self.children.append(v)
edgeList.append((self.id, v.id))
class MyHTMLParser(HTMLParser):
def start(self, url):
data = urllib.urlopen(url).read()
self.tree = []
self.cur = self.tree
self.feed(data)
self.close()
def handle_starttag(self, tag, attrs):
n = Node(tag, self.cur)
self.cur.append(n)
self.cur = n
def handle_endtag(self, tag):
self.cur = self.cur.parent
url = "http://labs.cybozu.co.jp/blog/akky/archives/2006/05/html_visualized_by_graph.html"
MyHTMLParser().start(url)
fo = open(r"c:\mysite_as_graph.txt", "w")
fo.write("VERTEX\n")
fo.write("%d\n" % len(vertexList))
i = 1
for v in vertexList:
fo.write("%d\t_\t%s\n" % (i, getColor(v)))
i += 1
fo.write("EDGE\n")
for e in edgeList:
fo.write("%d\t%d\n" % e)
fo.close()
