Posted at

jsFiddleを使ってみる

More than 3 years have passed since last update.

http://doc.jsfiddle.net/basic/introduction.html

コード載せるときなど便利そうなのでjsfiddleを使ってみることにしました。なお、後で見つけたため上記リンクには参考程度で以下の内容はそれに沿っていません。


Sign up

メールアドレスが必要です。確認メールは送られてきませんでした。登録後、基本情報の入力画面に遷移しますが入力は必須ではないようです。お好みでどうぞ。左上のEditorから作成開始です。


Left Panel

今回はボタンを押すとalertがでるサンプルをつくります。左枠でいろいろ設定できるようです。


Frameworks & Extensions

jQueryなど使用するライブラリを選択できます。設定すると自動的に読み込まれるため、本体での定義は不要のようです。

onLoad, onDomReadyなどは自作のコードの実行タイミングを設定します。


Fiddle Options


  • Name your fiddle: 作成物の名前。埋め込み時にタイトルバーに表示されます。

  • Description: 作成物の説明。公開Fiddleリストに表示されます。

  • Normalized CSS: Normalize.cssの適応

  • Body tag: 必要ならBodyタグを定義できます。例:<body class="dark_ui">

  • DTD: DOCTYPEを指定。

  • Framework script attribute: 自動的に設定されるスクリプトタグに属性を追加できます。


External Resources

CSSかJSの外部リソースを読み込みます。


Languages

使用言語を選択できます。coffeescriptとscssを使用することにしました。Jadeは使えないようです。


Ajax Requests

Ajaxにも対応?してるようです。詳しくは

http://doc.jsfiddle.net/use/echo.html

を参照してください。今回は使わないので触りません。


Right Panel


HTML(左上)

上記の説明で察しがついていると思いますが、headタグなどは自動的に作成されるため、bodyタグの中身のみ記述します。今回は簡単にこうしました。

<input type="button" id="target" value="BUTTON"/>


Script(左下)

スクリプトを記述します。実行タイミングはFrameworks & Extensionsで指定したタイミングになります。今回はonLoad時に次のcoffeescriptを実行するようにしました。

$("#target").on 'click', ->

alert 'Hello'


css/scss(右上)

スタイルを記述します。今回特に必要ないのですが一応つぎのスタイルを指定しました。このスタイルも自動的に読み込まれます。

input {

width: 100%;
}


Run

上部のRunボタンを押し、Fiddleを実行します。

右下のResult Panel(右下)にボタンが表示され、押すとアラートがでるはずです。


Save

出来上がったら上部のSaveボタンで保存します。


Share

保存できたら上部のShareメニューから共有できます。

https://jsfiddle.net/kzqooq/azcjbohv/


感想

バージョン管理もできるみたい。こつこつ修正しながら説明していくときに使えそう。類似サービスは他にもあるみたいなので、そっちも試していきたい。