最速インターフェース研究会

テンプレートエディタを作ってみた

こんなのを作ってみました。
http://la.ma.la/misc/tmpledit/

HTMLソースを貼り付けて、ページの構造をダンプすることが出来ます。
とりあえずどんな感じかわかるように、このBlogのアドレスを入れてあるので取得ボタンを押すと出て来る様になってます。XMLHTTPでソース受信してるので外部ドメインのソース取得は無理です。ローカル保存+IEの場合は外部ドメインのソースも解析できます。

こういう感じの作るやつ、と言えばわかりやすいかも。
http://d.hatena.ne.jp/kamioka/20050609/1118324980

まあ、これがやりたかっただけなのですが、ついでにCSSの編集もできるようにしてみました。CSS編集モードに切り替えると、タグ名とクラス名とIDを確認しながらプレビューしつつその場でCSSを編集できます。

CSS適用ルーチンはこれの丸パクリ。
http://tokyoenvious.xrea.jp/b/javascript/css_editor.html

実際のHTML表示を見ながらやるよりも、普段表示されないクラス名やID名とかを可視化した状態で編集したほうが、脳にかかる負担は軽いかな、といった具合。そういうテンプレート編集に特化したCSSエディタみたいなのがあっても良いかなーなんて思って作ってみた次第ですが、保存とかつけてないので現状あまり使い物になりません。Firefoxの拡張でCSSをその場で編集とかそんなのがあった気もするけど、作ってしまったのでいいや。
IEの場合は中途半端にtabが使えます。

CSSの自動整形をやらせたくて、JavaScriptにCSSパーサー移植というのを、少し前に作りかけて放置しているので、気が向いたらそこら辺を組み込んでアップデートするかも。

----
6/15追記
ちょこちょこ更新。
ダンプ結果を印刷、保存用に新規ウィンドウで表示できるようにしました。

あと説明書書いた。
http://la.ma.la/misc/tmpledit/readme.txt

それと、アフィリエイト始めることにする。(今さら)

A quick preview will be rendered here when you click "Preview" button.