Jul 17, 2006
萌ディタとSleipnirとWEBrickを使って人のサイトのCSSをリアルタイム編集するデモ
Shiubya.js #1で話したネタですが、Winkでデモを作ってみました。
http://la.ma.la/misc/demo/realtime_cssedit.htm
エディタとブラウザが並んでて窮屈ですが、実際はこれを20インチワイド液晶縦置きデュアルでやります。
仕組みは、WEBrickでローカルプロキシを立てて、同名のファイルがローカルにある場合は内容を置き換えて表示する、というもので、CSSやJavaScriptを編集するのに向いています。
プロキシサーバーはPerlで書かれた同等のものがここにあります。
http://www.ornithopter.jp/archives/2006/05/perl_perl.html
自分が使ってるのは必要に応じて行き当たりばったりに拡張していったりするのですが、現時点でのソースを置いておきます。
http://la.ma.la/misc/src/proxy.zip
送信ヘッダからリファラを消すようにしたり、設定ファイルをYAMLにしたり、設定を定期リロードするようにしてサーバー再起動を不要にしたりしてます。
あとは、TemplateToolkitのsyntaxをRubyで置換する処理を書いています。
例えば
みたいな記述をプロキシ側で
というように置換してくれます。これも外部ファイルをmodule_evalで評価して再起動せずに変更が反映されるようにしてます。
まあなんか多分色々間違ってるので、誰か添削してくれるとありがたいです。
萌ディタのファイル保存と同時にSleipnirをリロードさせるのはこんなのをsrcfile.javascript.txtに書くとできます。
萌ディタ使ってる人はいないだろうけど、開発用のローカルプロキシ立てるのはオススメです。
http://la.ma.la/misc/demo/realtime_cssedit.htm
エディタとブラウザが並んでて窮屈ですが、実際はこれを20インチワイド液晶縦置きデュアルでやります。
仕組みは、WEBrickでローカルプロキシを立てて、同名のファイルがローカルにある場合は内容を置き換えて表示する、というもので、CSSやJavaScriptを編集するのに向いています。
プロキシサーバーはPerlで書かれた同等のものがここにあります。
http://www.ornithopter.jp/archives/2006/05/perl_perl.html
自分が使ってるのは必要に応じて行き当たりばったりに拡張していったりするのですが、現時点でのソースを置いておきます。
http://la.ma.la/misc/src/proxy.zip
送信ヘッダからリファラを消すようにしたり、設定ファイルをYAMLにしたり、設定を定期リロードするようにしてサーバー再起動を不要にしたりしてます。
あとは、TemplateToolkitのsyntaxをRubyで置換する処理を書いています。
例えば
[% loadJS(['file1','file2']) %]
みたいな記述をプロキシ側で
<script type="text/javascript" charset="UTF-8" src="/js/file1.js"></script> <script type="text/javascript" charset="UTF-8" src="/js/file2.js"></script>
というように置換してくれます。これも外部ファイルをmodule_evalで評価して再起動せずに変更が反映されるようにしてます。
まあなんか多分色々間違ってるので、誰か添削してくれるとありがたいです。
萌ディタのファイル保存と同時にSleipnirをリロードさせるのはこんなのをsrcfile.javascript.txtに書くとできます。
f.onSave = function(){
var pnir = new ActiveXObject("Sleipnir.API");
var tabid = pnir.GetDocumentID(pnir.ActiveIndex);
var window = pnir.GetWindowObject(tabid);
window.location.reload(true);
}
萌ディタ使ってる人はいないだろうけど、開発用のローカルプロキシ立てるのはオススメです。
WriteBacks
リアルタイム編集
http://la.ma.la/blog/diary_200607172004.htm なんか、デジャヴを感じたので。 http://orera.g.hatena.ne.jp/higeorange/20060616/1150456695
Posted by 気まぐれディジット at 2006/07/17 (Mon) 22:25:46
【ブログ新時代到来！】２ＧＢの大容量＆簡単操作に動画配信機能も
動く、聞こえる、伝わるブログはDTI。動画を使ってムービーブログを作っちゃえ！楽しさ倍増で完全無料。
Posted by ゼロからの集客法 at 2006/07/19 (Wed) 16:15:52
ActiveXObject
GExplorer 用とまでいかないですが、スクリプトです。 //gas.js改 ... picks.zuzara.comのユーザを対象に、ブラウザのウィンドウサイズをどの ... JScriptでGmailの未読メール数を取得 【Ajax】prototype.jsのXMLHttpRequest AtlasでのWebサービスの呼び出し Amazon Web Serv
Posted by ActiveXObject at 2006/08/19 (Sat) 08:33:26
自動車保険評価
自動車保険評価し、比較検討した上で、契約するのだから納得することができます．複数の会社からの見積もり書
Posted by ファイナンス金融保険 Gメン at 2006/09/16 (Sat) 20:46:58
cygwin
proxy.rb の rules[:rewrite] を rules["rewrite"] にしないと動きませんでした。
Posted by Milly at 2006/12/15 (Fri) 22:09:33
javascript開発者のためのproxomitronローカルプロキシのすすめ
設定の備忘録。 javascriptの開発で、Firebugの次に大事な開発ツー...
Posted by blog@slightlyblue at 2007/02/27 (Tue) 01:27:19
Posted by adarutobideo at 2008/10/21 (Tue) 14:25:55
Posted by アダルト動画 adarutobideo at 2008/10/21 (Tue) 14:27:02
http://la.ma.la/blog/diary_200607172004.trackback
writeback message: Ready to post a comment.
