m2O

2007/02/22 (木)

2画面 JavaScript Editor

|  2画面 JavaScript Editor - m2O を含むブックマーク

最近 JavaScript を書くのに便利なエディタJavaScript で書けないかと思って方法を模索していて、その過程で思いついたネタOpera 専用。

手順

チーム俺等 - Opera備忘録のぺえじ - 流行に乗っかってJSファイルの構文ハイライトをしてみる
http://orera.g.hatena.ne.jp/misttrap/20061130/p1

の js_highlight.js を、グローバルから呼び出せるように修正する。@include を任意のファイル名にする。

// ==UserScript==
// @name      JSfile Highlighter for Opera
// @namespace http://misttrap.s101.xrea.com/
// @include   doublescreen_dummy.js
// ==/UserScript==

window.highlightJS = function() {
(中身は同じ)
};

こんなマークアップをする。

<div id="editor">
<textarea id="edit"></textarea>
</div>
<div id="viewer">
<iframe id="view" src="doublescreen_dummy.js"></iframe>
</div>

「doublescreen_dummy.js」は空ファイル*1。404をリダイレクトしないサーバーなら無くたって構わない。

最後にキーイベントを登録する。

function edited(){
    var edit = document.getElementById('edit');
    var text = edit.value;
    var viewWindow   = document.getElementById('view').contentWindow;
    var viewDocument = viewWindow.document;
    var viewHtml     = viewDocument.documentElement;
    while (viewHtml.firstChild){
        viewHtml.removeChild(viewHtml.firstChild);
    }
    viewHtml.appendChild(viewDocument.createElement('body'));
    var pre = viewDocument.createElement('pre');
    pre.appendChild(viewDocument.createTextNode(text));
    viewHtml.firstChild.appendChild(pre);
    viewWindow.highlightJS();
}
var edit = document.getElementById('edit');
edit.addEventListener('keyup',edited,false);

するとこんなことができる。

f:id:miya2000:20070222152019g:image

デモを用意しました。(リンク先のjs_highlight_doublescreen.jsは少し変えてあります)
http://miya2000.up.seesaa.net/dsjseditor/doublescreen_JSEditor.html

--

2画面だから高機能って訳じゃなくて、ハイライト部分を丸投げしただけのの手抜き実装だったりする。今のところただのネタ

けれどもハイライト部分を動的生成に最適化すれば実用的になるかもしれない。「editor部分を非表示にするだけで構文ハイライトエディタ完成?」なんて妄想しちゃったけど、キャレットとか別の問題が山積みだ。

*1:最初は空ファイルなんて使わずに data スキームを使おうとしたけどセキュリティ違反になった。

トラックバック - http://orera.g.hatena.ne.jp/miya2000/20070222