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

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

萌ディタとSleipnirとWEBrickを使って人のサイトのCSSをリアルタイム編集するデモ

2006-07-17 20:04 | WriteBacks (3) |

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で置換する処理を書いています。

例えば

[% 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);
}

萌ディタ使ってる人はいないだろうけど、開発用のローカルプロキシ立てるのはオススメです。