EditrはWeb上でHTML/CSS/JavaScriptを編集して結果を確認できるサービスです。

最近、Jsdo.itのようにWeb上でコードを書いてその結果を確認できるサービスの人気があります。そのオープンソース版とでも言うべきなのがEditrです。

[![](http://images.moongift.jp/2013/05/Screenshot 2013-05-08 9.48.52_thumb.1368010376.png)](http://images.moongift.jp/2013/05/Screenshot 2013-05-08 9.48.52.1368010376.png)
結果ページ。

[![](http://images.moongift.jp/2013/05/Screenshot 2013-05-08 9.49.08_thumb.1368010379.png)](http://images.moongift.jp/2013/05/Screenshot 2013-05-08 9.49.08.1368010379.png)
JavaScriptの編集を行えます。

[![](http://images.moongift.jp/2013/05/Screenshot 2013-05-08 9.49.12_thumb.1368010382.png)](http://images.moongift.jp/2013/05/Screenshot 2013-05-08 9.49.12.1368010382.png)
こちらはスタイルシート。

[![](http://images.moongift.jp/2013/05/Screenshot 2013-05-08 9.49.16_thumb.1368010385.png)](http://images.moongift.jp/2013/05/Screenshot 2013-05-08 9.49.16.1368010385.png)
HTML。この3つを組み合わせて結果ページになります。

[![](http://images.moongift.jp/2013/05/Screenshot 2013-05-08 9.49.21_thumb.1368010388.png)](http://images.moongift.jp/2013/05/Screenshot 2013-05-08 9.49.21.1368010388.png)
複数のHTMLを切り替えられます。

EditrはHTML/CSS/JavaScriptをWeb上で記述して、その結果もオンラインで確認ができます。ちょっとしたコードを試したり、一部の機能だけを取り出して遊んでみると言った時に使えそうです。

EditrはJavaScript製のオープンソース・ソフトウェア(MIT License)です。

MOONGIFTはこう見る

プレイグラウンド的なサービスは特にWeb APIを提供している企業が提供して欲しいサービスです。その場でWeb APIを実行して結果を確認したり、使い方を学ぶのにぴったりです。これが上手に提供されているのがFacebookとGoogleです。

同様に最近ではJavaScriptだけでもレベルの高いWebアプリケーションが提供できるようになっています。EditrとWeb APIを組み合わせれば、その場でWebアプリケーションが構築できるようになってしまうかも知れません。

Editr - HTML, CSS, JavaScript playground

Idered/editr · GitHub