こんばんわ、Suzuです。

今回もサービスを使ってみたネタでいきたいと思います。

先日、同僚にこのBLOGの中でJavascriptを動かしたいんだけどと相談を受けました。
というわけで、今回は彼に紹介した「jsdo.it」というサービスを紹介します。
といっても、このサービスがリリースされたのは2年前のことなので、ご存知の方も多いと思います。

jsdo.itとは一言で言えば、ブラウザ上でHTML5、CSS、JavaScriptを書いて、
その場で実行することができる素晴らしいサービスです。

WEBで提供されるエディタで作成したコードは保存後、その場で動作させることができます。
そしてこのサービス上だけでなく、自分のBLOGなどでも作品としても公開することが可能です。

以下は試しに描いてみた、CSS Spriteのサンプルコードです。
初期表示はソースコードになっていますが、
右下の「Play」ボタンを押すと、実際に動作させることができます。(初期表示をどちらにするかは選択可能)

Rotate reel by css sprite sample. – jsdo.it – share JavaScript, HTML5 and CSS

ちなみに上のソースは、Startボタンを押すと数字がスロットのリールみたいに回転します。
(面白いプログラムではなくて、ごめんなさい)

BLOGにいちいちソースコードを貼って、その解説を書くよりも、実際に動くもの見せられるってのは凄い便利ですね。

Forkする。

「Play」ボタンの隣の「Fork」ボタンを押すと、ソースコードのforkが可能になります。
forkとは他人のソースコードを自分用にコピーして編集できるようにする機能です。
それだけではなく、自分のコードが誰にforkされたかを確認したり、元のコードとの変更点を確認することができます。
便利ですし、コーディングが楽しくなる機能ですね。

使い始めて、すぐにコードを書き始めたくなった場合、
Chromeには、JustEditというプラグインがあり、
これをいれるとブラウザ上からすぐにコードを書き始めることができます。

Chrome以外の人は以下のアドレスをブックマークするといいと思います。
http://jsdo.it/code/new

すぐにコードを書く

使い始めて、すぐにコードを書き始めたくなった場合、
Chromeには、JustEditというプラグインがあり、
これをいれるとブラウザ上からすぐにコードを書き始めることができます。

Chrome以外の人は以下のアドレスをブックマークするといいと思います。
http://jsdo.it/code/new

最後に

と、これだけでは魅力を存分には紹介しきれていませんが、
トップページに並んでいる人気コードやトピック、カテゴリで分類されたコードを見るだけで、
非常に勉強になると思います。
まだ触ったことがない人は是非遊んでみてください。
http://jsdo.it/