Skip to content

どんどん作ろう。オンラインでHTML5/JavaScript/CSS3の実行確認ができるWebサービス×16選

by : 2014/07/02

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を共有して編集できます。

scratchpad.io

D3.js Playground

データの高度なビジュアル化を行うD3.jsに特化したプレイグラウンドです。

D3.js Playground

Html5 Snippet

HTML5に特化しています。JavaScript/CSS3の記述を行えます。

Html5 Snippet

CSSDesk – Online CSS Sandbox

スタイルシートの編集ができます。JavaScriptはありません。

CSSDesk – Online CSS Sandbox

dabblet.com

縦3つに分割されているのが印象的なスタイルシートプレイグラウンドです。JavaScriptはα版として提供されています。

dabblet.com

Codecademy Labs

オンラインプログラミング学習サイトCodecademyで提供されているJavaScript実行環境です。

Codecademy Labs

Mozilla Thimble

Mozillaが提供するHTMLプレイグラウンドです。JavaScriptの自動実行の切り替え機能があります。

Mozilla Thimble

Liveweave

4つに区切られた画面構成が特徴的です。右下に実行結果が表示されます。

Liveweave – HTML5, CSS3 & JavaScript playground for web designers & developers

tmpltr

HTML/JSON/CSSという組み合わせでJavaScriptを実行するのではなく、JSONデータをHTMLテンプレートと組み合わせて表示するサービスになっています。

tmpltr

HTMLiveCode

シンプルなHTMLプレイグラウンドです。自由にHTML/JavaScript/CSSが実行できます。

HTMLiveCode – Browser-based editor for HTML/CSS/JS prototyping


いかがでしたか。自分の作品を作るのはもちろん、他の人の作品を見ても勉強になるでしょう。また友人や同僚とみんなで一つのプロジェクトを試したり、JavaScriptの実行結果を確認したりするのも便利です。

Webサーバを立てたりしなくとも、これらのサービスを使えばHTML5アプリケーションが簡単に試せます。どんどん作ってHTML5の世界に飛び込んでください!

hifive – HTML5企業Webシステムのための開発プラットフォーム – hifive

HTML5企業Webシステムのための開発プラットフォーム

From → まとめ

コメントは停止中です。

%d人のブロガーが「いいね」をつけました。