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

こんなのを作ってみました。
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

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


WriteBacks

サイトのCSS構造設計に使える

CSSとテンプレートの構造設計って結構面倒くさい。 良いツールがないかと思ってい...

Posted by IGALOGる at 2005/06/14 (Tue) 12:49:31

Dom Inspector

Firefoxに付いてるDOM Inspectorみたいなやつですね。
Inspectorで適当な要素名をクリックすると、Firefox上のどこにレイアウトされてるかアウトラインを点滅させて知らせてくれたりするので便利です。

Posted by none at 2005/06/14 (Tue) 17:34:55

JavaScriptによるHTML構造解析ツール

http://la.ma.la/blog/diary_200506130100.htm こちらのツールをいじっていたら、IEでXMLを見た時みたいにぱかぱか開いたり閉じたりしたくなったので、JavaScriptの練習も兼ねて開閉可能なダンプツールを作ってみた。 http://www.geocities.jp/ajiyoshi_blog/komekami/ FireFox on Linuxでは動いた。IEでも多分動くんじゃないかと思うけど、Windows持ってないから確認できない。動いたり、動かなかっ ...

Posted by *「ふっかつのじゅもんがちがいます。」 at 2005/06/18 (Sat) 22:49:01

[WEB] HTMLの構造を解析して図に

コメカミエディット at 最速インターフェース研究会
HTMLから構造を抽出して図にしてくれるツール.
使い方は簡単.ソースを貼り付けて「構造化ダンプ」をクリック.
そうすると構造が図になって出力されます.
スタイルシートを書くときに便利ですわーん.

Posted by 32nd diary at 2005/09/11 (Sun) 22:53:35

ブックマーク/ネットワーク/インターネット/Web

Webサイト構築 Webコンテンツ作成 Webサーバ プロキシサーバ リバースプロキシ Webアプリケーション コンテンツ管理システム セキュリティ プログラミング アクセス解析 検査 Windows XP Service Pack 2 用 Internet Explorer 7...

Posted by 前島実験室 (PukiWiki/TrackBack 0.3) at 2006/10/13 (Fri) 17:22:46

Adan

laghetto vacanza a ustica http://bindo.info/immagini/37.html
ricetta con cardi andria nicola http://miniato.info/contatto/97.html
teac lettore mp3 mp 300 1 gb mp300 grasso corporei http://bindo.info/eta/84.html
remigio zampa lavoro brenna http://girolamo.info/lavoro/80.html
polizia municipale di modena incontro formia http://lazzero.info/oroscopo/59.html
camper deiva marina hotel posta marcucci http://girolamo.info/lavoro/4.html
fiscalita internazionale distribuzione gas http://salvadore.info/notizie/70.html
abbigliamento online scontato frasi di congratulazioni per la laurea http://lazzero.info/notizie/39.html
traduttore on line italiano tedesco antifurto camper http://salvadore.info/programmi/7.html
finanziamento melzo cassetto estraibile hard disk http://lazzero.info/agenda/10.html
arte isola d elba csi lodi http://bindo.info/registrati/6.html
cerco appartamento roma pro infanzia torino http://bindo.info/programmi/30.html

Posted by Bryce at 2006/11/19 (Sun) 11:01:17

Mustafa

http://alunni.nicolababetto.net/annuncio-vendita-scooter.html [url]http://kingston.nicolababetto.net/damasco-coltello.html[/url] offerta scooter spiaggia lunga
http://boretto.nicolabianco.com/assicurazione-calasetta.html [url]http://durante.nicolababetto.net/hotel-eleganti-ischia.html[/url] soluzione rayman soluzione giochi hotel portorecanati
http://asservimento.nicolababetto.net/catania-voli.html [url]http://farcita.nicolabianco.com/incontro-verolengo.html[/url] caratteristica cucina italiana pompa ad iniezione centro automezzi pesante
http://pordenone.nicolababetto.net/agriturismo-elba.html [url]http://alvernia.nicolababetto.net/camera-borgomanero.html[/url] sony logo animato citt piemonte
http://brody.nicolababetto.net/incontro-tombolo.html [url]http://acquariofilia.nicolababetto.net/arianna-it.html[/url] rinnovo carta d identita ultras bari
http://acquariofilia.nicolababetto.net/arista-di-maiale.html [url]http://comanda.nicolababetto.net/aforisma-gibran.html[/url] emmeesse it vendita vino tipico online
http://preda.nicolababetto.net/giochi-junior-it.html [url]http://pianfei.nicolabianco.com/hit-mania-dance.html[/url] informazione offre manuali di c c
http://verbano.nicolabianco.com/fiera-levante.html [url]http://annidamento.nicolababetto.net/calcolo-oneri-concessori.html[/url] locali trans roma baite trentino
http://comanda.nicolababetto.net/aforismi-jim-morrison.html [url]http://ortopedici.nicolababetto.net/costruire-generatore-segnale.html[/url] viaggi indonesia lupi pallavolo

Posted by Tate at 2006/11/20 (Mon) 13:21:49

site url

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

Posted by site url at 2006/12/20 (Wed) 01:37:17

college girls webcames

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

Posted by Charlotle Fagerlund at 2006/12/21 (Thu) 10:07:37

free nude webcam no submitig sites

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

Posted by Catia Paulo at 2006/12/21 (Thu) 10:18:38

upload limewire

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

Posted by upload limewire at 2006/12/21 (Thu) 19:09:51

free limewire music

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

Posted by free limewire music at 2006/12/21 (Thu) 19:15:03

cartas del gratis leer tarot

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

Posted by cartas del gratis leer tarot at 2006/12/22 (Fri) 06:31:12

asian adult dvd

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

Posted by asian adult dvd at 2006/12/23 (Sat) 00:23:29

big tit peeing

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

Posted by big tit peeing at 2006/12/24 (Sun) 17:35:37

fantasy limited adult entertainment or seattle

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

Posted by fantasy limited adult entertainment or seattle at 2006/12/24 (Sun) 19:29:19

index

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

Posted by index at 2006/12/24 (Sun) 20:31:22

index

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

Posted by index at 2006/12/24 (Sun) 20:31:39

gay porn movie free

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

Posted by gay porn movie free at 2006/12/24 (Sun) 21:37:24

gay porn movie free

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

Posted by gay porn movie free at 2006/12/24 (Sun) 21:37:38

daniella rush anal

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

Posted by daniella rush anal at 2006/12/24 (Sun) 22:41:37

indian bartender blowjob

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

Posted by indian bartender blowjob at 2006/12/24 (Sun) 23:46:16

pregnant story porn

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

Posted by pregnant story porn at 2006/12/25 (Mon) 00:19:44

group orgy old

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

Posted by group orgy old at 2006/12/25 (Mon) 01:25:16

msn free card game

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

Posted by msn free card game at 2006/12/25 (Mon) 01:26:11

very fat porn

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

Posted by very fat porn at 2006/12/25 (Mon) 02:27:38

hindi old video song

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

Posted by hindi old video song at 2006/12/25 (Mon) 03:41:45

chat gratuit

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

Posted by chat gratuit at 2006/12/25 (Mon) 04:24:46

swingers club site

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

Posted by swingers club site at 2006/12/25 (Mon) 05:57:28

national offender public registry sex

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

Posted by national offender public registry sex at 2006/12/25 (Mon) 06:45:30

car in loan title wisconsin

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

Posted by car in loan title wisconsin at 2006/12/26 (Tue) 01:05:23

car detroit lake loan

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

Posted by car detroit lake loan at 2006/12/26 (Tue) 01:05:33

pornography self hate

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

Posted by pornography self hate at 2006/12/26 (Tue) 09:01:37

eva pigford dating

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

Posted by eva pigford dating at 2006/12/30 (Sat) 20:04:54

adult dating community focused on sexual discovery

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

Posted by adult dating community focused on sexual discovery at 2006/12/31 (Sun) 04:45:24

car car finance loan motoring

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

Posted by car car finance loan motoring at 2007/01/09 (Tue) 07:49:45

asian adult dvd

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

Posted by asian adult dvd at 2007/01/10 (Wed) 22:04:57
TrackBack ping me at
http://la.ma.la/blog/diary_200506130100.trackback
Post a comment

writeback message: Ready to post a comment.







spam yoke. nanimo ireruna.