ITエンジニア/デザイナ向けにオープンソースを毎日紹介

JSFiddleやjsdo.itなどオンラインでJavaScriptを記述してその場で実行させるサービスは数多いですが、その最小版とも言えそうなのがMiniCodeEditorです。なんとコードサイズにして175byte程度しかありません。

MiniCodeEditorのHTMLの中身を見てみると、このようになっています。たったこれだけでJSFiddle風のサービスができてしまうのかと驚きますよね。

<textarea id=H><!-- HTML -->
This is a...</textarea><textarea id=C>/* CSS */
body { background: #bdf; }</textarea><textarea id=J>// JS
document.body.innerHTML += " test";</textarea><iframe id=I></iframe><script>onload=(d=document).onkeyup=function(){(D=d.getElementById("I").contentWindow.document).write(H[v="value"]+"</script><script>"+J[v]+"< \/script><style>"+C[v]);D.close()}</style></script><style>*{box-sizing:border-box;-moz-box-sizing:border-box;margin:0;padding:0;vertical-align:top}textarea{resize:none;padding:10px}textarea,iframe{resize:none;width:50%;height:50%;border:1px solid}

実際に実行した結果がこちらです。

デモ。
デモ。

実際にJavaScriptやHTMLを修正するとリアルタイムに反映されます。

変更した例。
変更した例。

内容を見ると、onkeyupのイベントで右下のiframe部分にHTMLを生成し直しているようです。面白いアイディアで、確かにこれならできそうですね。

MiniCodeEditorはJavaScript製のオープンソース・ソフトウェア(Public Domain)です。

xem.github.io/miniCodeEditor/

xem/miniCodeEditor

 

MOONGIFTの関連記事

コメント

  • DevRel
  • Com2