どんどん作ろう。オンラインでHTML5/JavaScript/CSS3の実行確認ができるWebサービス×16選
Web技術の良いところはブラウザさえあれば実行確認ができて、テキストエディタだけで作れてしまう所ではないでしょうか。さらに今回紹介するようなサービスはWeb上にHTML5/JavaScript/CSS3を保存して共有できるので、HTML5の新しいAPIを試すのに使ったり、テクニックを披露するのに使えますよ。
JSFiddle
多種多様なJavaScriptフレームワークの読み込みも可能で、HTML/JavaScript/スタイルシートの記述ができます。
Create a new fiddle – JSFiddle
CodePen
グラフィックス系の投稿も良く見かけるWebプレイグラウンドです。
CodePen – Front End Developer Playground & Code Editor in the Browser
JS Bin
2ペイン構成で左側がエディタ、右側にプレビューが出せるようになっています。
JS Bin – Collaborative JavaScript Debugging
CSSDeck
特にCSS3でのテクニックが多いようです。
HTML5, CSS3, JS Demos, Creations and Experiments | CSSDeck
jsdo.it
カヤックさんのサービスです。英語、日本語、中国語で提供されています。
jsdo.it – Share JavaScript, HTML5 and CSS
Cssizer.com
JavaScriptはなく、スタイルシートのリアルタイム反映に特化しています。
Cssizer.com | Real Time CSS Editing
scratchpad.io
HTMLのbody部だけを変更できるサービスです。URLを共有して編集できます。
D3.js Playground
データの高度なビジュアル化を行うD3.jsに特化したプレイグラウンドです。
Html5 Snippet
HTML5に特化しています。JavaScript/CSS3の記述を行えます。
CSSDesk – Online CSS Sandbox
スタイルシートの編集ができます。JavaScriptはありません。
dabblet.com
縦3つに分割されているのが印象的なスタイルシートプレイグラウンドです。JavaScriptはα版として提供されています。
Codecademy Labs
オンラインプログラミング学習サイトCodecademyで提供されているJavaScript実行環境です。
Mozilla Thimble
Mozillaが提供するHTMLプレイグラウンドです。JavaScriptの自動実行の切り替え機能があります。
Liveweave
4つに区切られた画面構成が特徴的です。右下に実行結果が表示されます。
Liveweave – HTML5, CSS3 & JavaScript playground for web designers & developers
tmpltr
HTML/JSON/CSSという組み合わせでJavaScriptを実行するのではなく、JSONデータをHTMLテンプレートと組み合わせて表示するサービスになっています。
HTMLiveCode
シンプルなHTMLプレイグラウンドです。自由にHTML/JavaScript/CSSが実行できます。
HTMLiveCode – Browser-based editor for HTML/CSS/JS prototyping
いかがでしたか。自分の作品を作るのはもちろん、他の人の作品を見ても勉強になるでしょう。また友人や同僚とみんなで一つのプロジェクトを試したり、JavaScriptの実行結果を確認したりするのも便利です。
Webサーバを立てたりしなくとも、これらのサービスを使えばHTML5アプリケーションが簡単に試せます。どんどん作ってHTML5の世界に飛び込んでください！
hifive – HTML5企業Webシステムのための開発プラットフォーム – hifive
hifive開発者ブログ 
コメントは受け付けていません。