JavaScriptをブラウザだけで作成&テスト出来る環境を作った(JS.nanobench)

JavaScriptの動作確認をしているのですが、「エディタで編集 ⇔ ブラウザで確認」の行ったりきたりが面倒なので、ブラウザだけで確認できるようにしました。


作ったもの

これです↓

JS.nanoBench

プログラム:






出力結果:


エラー:



仕組み

仕組みは、textAreaの中身をevalして出力してるだけです。
…だと説明にならないので、html,js,cssのソース見ながら解説して行きます。

html

まずは、htmlの構造です。
特に何の変哲も無いhtmlです。
各パーツにidを振ってあるのと、ボタンのonclickだけ覚えておいて、javascriptのチェックに移りましょう。

<div id="scratchPad">
	<div id="title">JS.nanoBench</div>
 
	<h3>プログラム:</h3>
	<textarea id="txtSrc">console.log( 2 * 3.14 );</textarea>
	<br />
	<input type="submit" id="btnRun"   value="実行"       onclick="runScript();">
	<input type="button" id="btnClear" value="出力クリア" onclick="clearOutput();">
	<br />
 
	<h3>出力結果:</h3>
	<div id="txtOutput"></div>
 
	<h3>エラー:</h3>
	<div id="txtError"></div>
</div>




JavaScript

次はJavaScriptです。

// コンソール出力を乗っ取る
console.log = function(msg){
	document.getElementById('txtOutput').innerHTML += msg + '<br />';
}
 
// スクリプトの実行
var runScript = function() {
	// 出力結果を一旦クリア
	clearOutput();
 
	// 入力されたテキストを実行する
	try {
		var srcStr = document.getElementById( 'txtSrc' ).value;
		eval( srcStr );
		document.getElementById('txtError').innerHTML = 'エラーは有りません';
	}catch( e ){
		document.getElementById('txtError').innerHTML = e;
	}
};
 
// 出力エリアのクリア
var clearOutput = function() {
	document.getElementById( 'txtError'  ).innerHTML = '';
	document.getElementById( 'txtOutput' ).innerHTML = '';
};


関数が三つ定義されてます。

まず2つ目のconsole.log()です。
これは、画面へのメッセージ出力を行っています。
文字出力は、firebugなんかを使用している場合、console.log()を使うことが多いと思うので、このメソッドの振る舞いを直接変更してしまいます。標準の関数を乗っ取ってしまうのは、普通だとお行儀の悪いやり方ですが、動作確認用なので良しとしておきます。
また、この形にしておくと作ったスクリプトをblog等にアップするとき、メッセージ出力の関数を書き換えなくて済むというメリットがあります。


2つ目はrunScript()です。
これは、画面で「実行」ボタンがクリックされたときに走る処理です。
画面の出力・エラーメッセージ欄をクリア後、ソースが書かれているtextareaの中身を取得し、eval()で評価(=実行)を行っています。
またcatch句でエラーが出たときのメッセージ出力を行っています。


最後のclearOutput()は、見ての通り出力結果・エラーメッセージの中身をクリアしています。


css

最後にcssです。
これは、特に見るべきところは無く「適当に装飾してみました」って程度のものです。
横幅を変えたいときは、#scratchPadのwidthを変更するだけで対応可能です。

#scratchPad {
	border:1px solid #ccc;
	padding:10px;
	width:600px;
}
 
#scratchPad #title {
	text-align:center;
	color:#666;
	background-color:#e0e0f0;
	border-bottom:1px solid #aaf;
	width:100%;
	padding:10px;
	margin: -10px -10px 0 -10px;
}
 
#scratchPad h3 {
	font-weight:normal;
	margin-bottom:2px;
}
 
#txtSrc {
	width:98%;
	height:10em;
}
#btnRun, #btnClear {
	padding:10px 20px;
}
 
#txtOutput, #txtError {
	border:1px solid #eee;
	padding:10px;
}
#txtOutput {
	background-color: #eef;
	border:1px solid  #ccf;
	font-family: "MS ゴシック";
}
#txtError {
	background-color: #fee;
	border:1px solid  #fcc;
}





TODO

上記のスクリプトは、「とりあえず30分ぐらいで試作してみました」というレベルなので、もう少しブラッシュアップしておきたい。
とりあえず思いつく限りでは、以下のような所かな…

  • jQuery等のライブラリを、チェックボックスを入れるだけで使えるようにする。
  • 作った関数がグローバルなネームスペースに有るので、もうちょい隠蔽させる。
  • blogパーツ化を目指して、iframeを1行書くだけでOKな形に持って行く。
  • Ctrl-Enterでスクリプト実行等のショートカットキーを作る。
  • エラーが出たときに行番号が出せるとbest!(出来るのかは不明…)。
  • blogへ貼付用として、ボタンを押すとスクリプト&結果をマークアップして出力する。

関連記事

コメントを残す

メールアドレスが公開されることはありません。