JavaScriptをもっと学ぼうと、「開眼! JavaScript ―言語仕様から学ぶJavaScriptの本質」という本を入手したところ、この本のサンプルコードは、「jsFiddleを使ってfirebug-lite-devをプラグインとして含めた環境で公開しています」とありました。

jsFiddleは、JavaScriptの動作をオンラインで確認できるエディタだそうです。
JQueryの公開サイトでも「バグを伝えるときはjsFiddleを使用して動作を見せる」ように薦められているそうです。

なので、使ってみました。

まずはユーザー登録から。
http://jsfiddle.net
アクセスすると下記のページが開きます。
00000930

メールアドレス、ユーザー名、パスワードを入力し、下の赤い所の写真に写っている番号を、その下のテキストボックスに入力してから[Create an account]をクリックします。
「A user with that username already exists」と表示されたら入力したユーザー名は既に使われているので、別のユーザー名でチャレンジします。

アカウントを無事作成できたら下記の画面になります。
00000934

プロフィールを入力する画面ですが、何も入力しなくても大丈夫なので、上部メニューの「All your fiddles」をクリックすると、下記の画面になります。
00000967

この画面がユーザーのホーム画面のようなもので「Dashboard」と呼んでるようです。
ログインするとこの画面に来ます。
先ほどのプロフィール画面は右上の「Edit your profile」をクリックすると行けます。
この画面の左側に作成したコードへのインデックスが並びますが、今はなにもないので、
「You don’t have any Fiddles yet.
You will find all your fiddles here after you will create or fork them.」
と表示されています。

まず、基本的な使い方を追って行きます。

  1. エディタ起動
    メニューの一番左の「Editor」をクリックすると、下記の画面がひらきます。
    00000968
  2. HTMLコード記入
    4分割された画面の左上がHTMLを記述するエリアです。
    <html>や<head>の記述は不要なので、<body>~</body>の中だけを書きます。
    やっぱ最初はこれですよね「Hello World!」
    00000969
  3. 実行
    メニューの一番左の「Run」をクリックするとコードが実行されます。
    実行結果は、4分割の右下に表示されます。
    00000970
    HTMLだけなので地味ですが、右下に「Hello World!」と表示されました。
  4. 保存(Save)
    Saveをクリックすると、
    h28093001

    メニューが変わり、URLも変わります。
    このURLが保存先のようです。
    ここでは、https://jsfiddle.net/[ユーザー名]/4vuyfrf4/ に保存されています。
    h28093002

    dashboardに戻ってみると、一覧に表示されていました。
    一覧のタイトルはディフォルトではURLになります。
    ここでは4vuyfrf4です。
    00001016

  5. 更新(Update)
    一度Saveするとメニューから「Save」がなくなり「Update」「Fork」「Set as base」が追加されます。
    Updateをクリックすると、URLが変わります。
    https://jsfiddle.net/[ユーザー名]/4vuyfrf4/1/ に保存されています。
    h28093005

    Update前のバージョンは
    https://jsfiddle.net/[ユーザー名]/4vuyfrf4
    に残ったまま、最新のバージョンが
    https://jsfiddle.net/[ユーザー名]/4vuyfrf4/1/
    に保存されます。

    さらにUpdateをクリックするとURLは
    https://jsfiddle.net/[ユーザー名]/4vuyfrf4/2/
    になります。
    h28093007

    Dashboardに戻ると、タイトルの横に赤文字で「#2 is the last revision」と表示されます。
    直訳すると「#2は最新の改訂番号です」。
    タイトルをクリックすると、Update前のバージョンが開き、
    赤文字をクリックすると最後にUpdateしたバージョンが開きます。

  6. ベース(Set as base)
    Dashboardでタイトルクリックで表示されるバージョンがbase(ベース)となります。
    先ほどのUpdateを2回した段階では、baseは一番古いバージョンのままなので、タイトルクリックでは古いバージョンが開き、最新を開くには赤文字の「#2 is the last revision」をクリックする必要があります。

    これだと面倒なので、最新をbaseにしたいと思います。
    Dashboardで赤文字の「#2 is the last revision」をクリックし、最新を開きます。
    この段階ではURLは、https://jsfiddle.net/[ユーザー名]/4vuyfrf4/2/ になっています。
    h28093007

    「Set as base」をクリックすると、URLが https://jsfiddle.net/[ユーザー名]/4vuyfrf4 に変わります。
    h28093009

    Dashboardに戻ると、赤文字の「#2 is the last revision」は消えていて、タイトルをクリックすると、最新のコードが表示されるようになります。

    この段階でURLは4種類出来てきます。
    https://jsfiddle.net/[ユーザー名]/4vuyfrf4          最新のバージョンが表示されます。
    https://jsfiddle.net/[ユーザー名]/4vuyfrf4/0/      Saveをクリックした時のバージョンが表示されます。
    https://jsfiddle.net/[ユーザー名]/4vuyfrf4/1/      1度目のUpdate時のバージョンが表示されます。
    https://jsfiddle.net/[ユーザー名]/4vuyfrf4/2/      2度目のUpdate時のバージョンが表示されます。

    古いバージョンのコードを見たい時は、ブラウザに直接URLを入力して開きます。

  7. 複製(Fork)
    今あるコードの複製を作って、そちらに手を加えて行きたい時はForkを使います。

    ForkをクリックするとURLが変わります。
    h28093010
    ここでは、
    https://jsfiddle.net/[ユーザー名]/4vuyfrf4

    https://jsfiddle.net/[ユーザー名]/b9sjwrmhy
    に変わりました。

    このコードを変更してUpdateしていくと、
    https://jsfiddle.net/[ユーザー名]/b9sjwrmhy/0/
    https://jsfiddle.net/[ユーザー名]/b9sjwrmhy/1/
    https://jsfiddle.net/[ユーザー名]/b9sjwrmhy/2/
    というURLに保存されていきますので、/4vuyfrf4のコードとは別の流れを作ることが出来ます。

    Dashboardに戻ると、b9sjwrmhyが複製されたのが確認できます。
    00001026

  8. CSSの記述
    CSSは、右上に記述します。
    00001027
  9. JavaScriptの記述
    JavaScriptは左下に記述します。
    <script>の記述は不要です。
    00001028
  10. jQueryを使う
    JavaScript記述エリアの右上にある「JAVASCRIPT」をクリックするとメニューが開きます。
    00001029

    メニューの2つ目の項目「FRAMEWORKS & EXTENSIONS」のリストボックスから利用したいjQueryのバージョンを選択すると、jQueryが使えるようになります。
    00001030

    00001031

    jQueryを記述し実行
    00001032

  11. console.log()を使えるようにする
    左側メニューの「External Resources」をクリックすると、「JavaScript/CSS URL」書かれた入力覧が表示されます。
    h28093011

    ここに、以下のアドレスをコピー&ペーストし、リターンを押します。
    https://getfirebug.com/firebug-lite-debug.js
    h28093012

    以下のようになればconsole.log()が使えます。
    h28093013

    テストしてみました。
    00001037

  12. タイトルを付ける
    Dashboardの一覧で、タイトルが「4vuyfrf4」だとわかりづらいので、タイトルを変更します。
    左側メニューの「Fiddle Meta」をクリックすると、入力覧が開きます。
    Untitled fiddle がタイトルで、No description がコメントです。
    h28093014

    コメントを入れたら「Update」「Set as base」を順にクリックします。
    Dashboardに戻ると変更が確認できます。
    00001041

  13. ブログに貼り付ける
    Editor画面のメニューの「Embed」をクリックすると、以下のメニューが開きます。
    h28093016

    メニュー左下の「EMBED CODE:」横の「Prefer iframe?」をクリックすると、その下のテキストボックスの内容が変わります。
    h28093017

    この内容を選択して、コピーします。
    内容はこんな感じです。

    これをブログに張ると、

    上部メニューを切り替えると、JavaScript,HTML,CSSのコードや実行結果を見ることができます。

  14. 公開されているコードを取り込む
    まず、jsFiddleにログインしておきます。
    公開されているURLを、ブラウザで指定します。
    「開眼!JavaScript」に掲載されているサンプルのURLを入れてみました。
    00001046

    メニューの「Fork」をクリックすると、複製が作られます。
    URLが、
    https://jsfiddle.net/[ユーザー名]/新しいフォルダ名/
    になっています。
    h28093018

    Dashboardに戻ると、一覧の中に入ってました。
    00001048

他にもいろいろ設定できそうですが、細かいところは使いながら探って行こうと思います。