オンラインエディタの比較

何気に便利でブログにも貼り付けたりもできるオンラインエディタ。普段はJS BINを使っているのですが、他にも似たようなサービスが何個かあるので軽く使ってみた。

インストールできるのもあるけども、ブラウザで使った場合オンリーでの感想。

JSFiddle

初期からあるサービスというのもあってか、Stack Overflowで外部コードを参照させるときによく見かける。

JavaScriptの外部ライブラリの数も多いが、CSSのNormalizeも使える。Ajaxシュミレーションも可能。

他と異なるのは、無料でプライベートモードが利用できる点とタイプ毎に自動更新されない点。後者はエラー文字に邪魔されないという意味で便利。ちなみにエラー判別はJavascriptのみが対象。

ファイルをまとめてダウンロードする機能は存在しないみたいで、そこだけネック。

JS BIN

3つの中では、外部ライブラリ(JavaScript)の数が一番多く、今回取り扱っている中では一番高速。現状、CSSライブラリは存在しない。

JavaScriptのコンソールがついているも便利。リアルタイムでエラー・警告が表示される。エラー・警告の対象はJavaScriptのみ。Ajaxは使用不可。

自然と字下げされるのがときに煩わしい。ファイルの一括ダウンロードができる点は便利です。

埋め込みページはIE8から使えるので、ブログで紹介するときにも便利だと思う。

他と同様でアカウント登録は任意ですが、ログインにGitHubのアカウントを使うこともできる。

CodePen

海外のサイトでよく見かける。使用できる外部ライブラリの数は少ないが、JavaScriptだけでなくCSS(Normalize/Reset)もある。

エラーなどの警告がHTMLやCSSもターゲットになっているのはCodePenだけ。

zipでのダウンロードやAjax利用も可能で、機能豊富。

ただし、古いブラウザへの対応をバッサリ切っているみたいなので、ブログなどで紹介するときにちはょっと使いづらい。また、JavaScriptが結構使われていてUIで”もたつき”が発生しやすい気がする。

その他

似たサービスは他にもいくつもあるのでちょこっと紹介。

この中ではDabbletしか使用したことがないけども、ベンダプレフィックス部分の問題を吸収してくれるのが便利。そのためか、canvasなどを利用した作品モノを作るときによく使われるみたい。

難点はパネルのサイズ変更ができない点かな。

LiveweaveやCSS Deckも上にあげたようなサービス同様のことができるみたいなので、ここら辺は好みによるでしょう。

コメントする




3 × 5 =