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="鉛筆"]
画面構成
画面構成は以下のようになってます。
- 左ペイン
- 設定フィールド
- 右ペイン
- HTMLエディタ
- CSSエディタ
- JavaScriptエディタ
- 実行結果画面
設定フィールドについて(左ペイン)
設定フィールドではいろいろな設定ができるようになっています。
利用するライブラリもこのフィールドから選択します。
Choose Framework
利用したい(試してみたい)フレームワークを選択します。
利用できるライブラリはたくさんあり、以下の内容が現時点(2011/06/01現在)で利用出来ます。
また、初期表示では「onLoad」となっている所は、どのタイミングで処理を実行するかを指定する項目です。
指定できるタイミングは以下のとおりです。
- onLoad
- onLoadイベント(読み込み完了時)の際に呼び出されるように、書いたコードをラップします。
- onDomReady
- onDomReadyイベント(DOM読み込み完了時)の際に呼び出されるように、書いたコードをラップします。
- 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などでスニペット化するのもいいと思いますが、動きの見れるスニペットの方が一掃刺激が高くなり、インスピレーションも高まると思います。