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メニューから共有できます。
#感想
バージョン管理もできるみたい。こつこつ修正しながら説明していくときに使えそう。類似サービスは他にもあるみたいなので、そっちも試していきたい。