Nullyのぶろぐ

仙台から東京へ転勤したエンジニアのブログ

JavaScriptのフレームワークをいろいろ使えるオンラインエディタ JSFIDDLE

プログラム

最近はホントいろいろなJavaScriptライブラリが出ていて、いろいろやりたいけど、微妙なところで手間だったり、実際やってみたいけどなかなか手が出せない...なんてことがあると思います。

そこで今回はJSのライブラリをいろいろ試せて自分のスニペット集になるJSFIDDLEをご紹介[wp_emoji2 code="d160" alt="double exclamation"]

日本でJavaScriptオンラインエディタといえば、KAYACさんが提供しているjsdo.itが有名です。

日本の物なので日本語化されている（当たり前）のでやはり人気が高いのも1つの理由。

JSFIDDLEって？

JSFIDDLEはMootoolsを利用して作られているオンラインエディタです。

jsdo.itとは違い、JSFIDDLEにアクセスするといきなりエディタが表示されます。

使い方

使い方はいたって簡単で、利用したい（試してみたい）ライブラリを左ペインから選択し、ザクザク書いていくだけです[wp_emoji2 code="d214" alt="鉛筆"]

画面構成

画面構成は以下のようになってます。

  1. 左ペイン

    • 設定フィールド

  2. 右ペイン

    • HTMLエディタ

    • CSSエディタ

    • JavaScriptエディタ

    • 実行結果画面

設定フィールドについて（左ペイン）

エディタ設定フィールドではいろいろな設定ができるようになっています。

利用するライブラリもこのフィールドから選択します。

Choose Framework

利用したい（試してみたい）フレームワークを選択します。

利用できるライブラリはたくさんあり、以下の内容が現時点（2011/06/01現在）で利用出来ます。

  1. Mootools

  2. jQuery

  3. Prototype

  4. YUI

  5. Glow

  6. Dojo

  7. Processing.js

  8. ExtJs

  9. Raphael

  10. RightJS

また、初期表示では「onLoad」となっている所は、どのタイミングで処理を実行するかを指定する項目です。

指定できるタイミングは以下のとおりです。

onLoad
onLoadイベント（読み込み完了時）の際に呼び出されるように、書いたコードをラップします。 

jQueryだと、jQuery(window).load();関数で囲まれます。

onDomReady
onDomReadyイベント（DOM読み込み完了時）の際に呼び出されるように、書いたコードをラップします。 

jQueryだと、jQuery(function(){});で囲まれます。

noWrap（head）
特別な囲み（onLoadイベントやonDomReadyイベント）は無く、headタグの終了直前に配置されます。
noWrap（body）
特別な囲み（onLoadイベントやonDomReadyイベント）は無く、bodyタグの終了直前に配置されます。

Library tag attributes

<script>タグに追加するHTML属性を書きます。

defer="defer"のように通常HTMLに書く属性と同様に書いていきます。

Normalized CSS

ブラウザ差異を無くす場合はチェックを入れておきます。

Add Resources

読み込みたい追加リソースを指定することが出来ます。

「例えば自分で作ったソースを読み込ませたい」場合などに、ファイルへのURLを記述します。

Info

今現在書いている内容のタイトルや説明、bodyの開始タグ、DTDを設定出来ます。

Testing Ajax requests

AjaxレスポンスをテストするためのAPIのURLが記述されています。

このURLにリクエストを送信することで、渡したデータをそのままJSONやHTML、XMLなどで返却してくれるので、Ajaxのテストもこれで困ること無し[wp_emoji2 code="d160" alt="double exclamation"]

Examples

いろいろあるライブラリの実行例を見ることが出来ます。

Legal stuff and credits

JSFIDDLEを作った方々のクレジットが書いてあります。

感謝[wp_emoji2 code="d160" alt="double exclamation"]

右ペイン

エディタ右ペインにはエディタと、書いたコードの実行結果をえるウィンドウがあります。

HTMLエディタ
HTMLコードを記述します。
CSSエディタ
CSSをゴリゴリ書きます。
JavaScriptエディタ
JavaScriptもゴリゴリ。
実行結果画面
上記3つの書いたコードの実行結果が反映されます。（わはー☆）

書き終えたら

実行ボタンコードを書き終えたら、上部にあるRunボタンを押すことで実行結果画面に実行結果が表示されます。

終りに

HTML5が普及することでいろいろなトランジションを追加して、オリジナリティが溢れるサイトがわさわさでてくるかとおもいますが、こういったオンラインエディタを利用して、どこでも練習・スニペットを集めておくのも1つの手段だと思います。

Evernoteなどでスニペット化するのもいいと思いますが、動きの見れるスニペットの方が一掃刺激が高くなり、インスピレーションも高まると思います。