tagTimeLog Lite

Simple time tracking tool
Developed by Namu Work Studio

ブラウザ上で動作するエディターを比較 – iPadで使いたい

ブラウザ上でCSSやjavascriptのデモを作成できるエディターがたくさん出ています。ちょっと、頭に浮かんだコードを試すのに大変便利です。

私の場合、食後、優雅にコーヒーなんぞ飲みながらiPadでYahoo Newsなどを眺めている時にふと試したいと思うことがあったので「iPadで使える」エディターとしてどれが良いのだろうと思い比較してみました。

使用目的・条件

  1. iPadでコードが書きたい
  2. 自分のWebサイトにエンベッド表示できる
  3. OpenIDやOAuthを使わずに新規登録できる

候補

  1. CodePen
  2. CSSDeck
  3. JS Bin
  4. JSFIDDLE
  5. Liveweave

結論

JS Bin がいいね!!!
次候補にLiveweave、CodePen がいいね!
選択の理由やそれぞれの評については以下をご覧ください。

CodePen

https://codepen.io/

自動保存や自分のWebサイトにエンベッドするのも簡単です。WordPress向けの専用プラグインもあります。
PCで使用する範囲では非常に便利で何の問題もありません。ただ、iPadではHTMLやCSSなどの編集領域の枠の大きさをドラッグして変更できませんでした。

あと、不満ではないのですが、フリー(無料)で使用する時は基本公開状態になってしまいレビューされた数もカウントされてしまうので、あんまり下手なコードが書けないなと思いました。なので、他で下書きして見せられるようになったらここで発表という感じがいいかなと思います。
まあ、有料契約すれば、プライベートモードにできるので良いんですが。

HTML CSS JavaScript
  • Markdown
  • Haml
  • Slim
  • Jade
  • SCSS
  • SASS
  • LESS
  • Stylus
  • CoffeeScript
  • LiveScript

引用=https://blog.codepen.io/documentation/

CSSDeck

https://cssdeck.com/

特徴としては、「Codecasts」機能というものがあって
コードを書いているところが、録画?、再生することができます。
どういうところで役に立つか私には分からないのですが、おもしろい機能だなと思いました。
特に可もなく不可もなくですが、こちらもiPadではHTMLやCSSなどの編集領域の枠の大きさをドラッグで変更できませんでした。
エンベッドやシェアもできます。プライベートモードにできるようですが、どこで設定できるのか分かりませんでした。

HTML CSS JavaScript
  • Jade
  • Haml
  • Markdown
  • Slim
  • Less
  • Stylus
  • SASS and SCSS
    (with and without Compass)
  • Coffeescript

引用=https://cssdeck.com/docs/labs/features

JS Bin

https://jsbin.com/

今回比較した中で最も動作が軽快に感じました。JavaScriptのライブラリーが豊富です。
あと特徴としてはConsole表示の枠が用意されているところでしょうか。
こちらは、iPadでHTMLやCSSなどの編集領域の枠の大きさをドラッグで変更できます。
冒頭で記しました私の個人的な使用目的・条件をほぼ満たしてくれました。
現在、最も使いやすいエディターだと思います。

HTML CSS JavaScript
  • Markdown
  • Jade
  • Less
  • Myth
  • Stylus
  • Sass & SCSS
    (with Compass & Bourbon)
  • 6to5
  • Coffeescript
  • Processing
  • React (jsx)
  • Traceur
  • TypeScript
  • LiveScript

引用=https://jsbin.com/help/versions

JSFIDDLE

https://jsfiddle.net/

シンプルな画面でJavaScriptのライブラリーが豊富です。
動作が少し遅い時があるのと自作コードをダウンロードできないのが残念です。

HTML CSS JavaScript
SCSS CoffeeScript

引用=https://doc.jsfiddle.net/use/panels.html

Liveweave

https://liveweave.com/

編集画面は文字色などカラフルで綺麗です。JavaScriptライブラリーも豊富です。
また、「CSS3 Code Generator」という機能があり、例えばborder-radiusやbox-shadowなどをスライダーを使って調節すると自動的にコードを書いてくれます。
こちらは、iPadでHTMLやCSSなどの編集領域の枠の大きさをドラッグで変更できます。
ただ、動きが少し遅いなと感じるときがあるのとエンベッド機能がないようで残念です。

HTML CSS JavaScript

以上
iPadで使用することを考えると「JS Bin」が、最も使いやすいかなと思います。
ただ、それぞれのWebサービスは日々進化していて今後、機能も豊富になりスピードも速くなっていくだろうと思いますので、また今後もチェックしていきたいと思います。

tagTimeLog Lite

Simple time tracking tool
Developed by Namu Work Studio