jsFiddleを使ってみた

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

開眼! JavaScript ―言語仕様から学ぶJavaScriptの本質

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

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

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

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

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

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

この画面がユーザーのホーム画面のようなもので「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.」
と表示されています。

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

エディタ起動
メニューの一番左の「Editor」をクリックすると、下記の画面がひらきます。
HTMLコード記入
4分割された画面の左上がＨＴＭＬを記述するエリアです。
<html>や<head>の記述は不要なので、<body>～</body>の中だけを書きます。
やっぱ最初はこれですよね「Hello World!」
実行
メニューの一番左の「Run」をクリックするとコードが実行されます。
実行結果は、4分割の右下に表示されます。

HTMLだけなので地味ですが、右下に「Hello World!」と表示されました。
保存（Save）
Saveをクリックすると、

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

dashboardに戻ってみると、一覧に表示されていました。
一覧のタイトルはディフォルトではURLになります。
ここでは4vuyfrf4です。
更新（Update）
一度Saveするとメニューから「Save」がなくなり「Update」「Fork」「Set as base」が追加されます。
Updateをクリックすると、URLが変わります。
https://jsfiddle.net/[ユーザー名]/4vuyfrf4/1/　に保存されています。

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

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

Dashboardに戻ると、タイトルの横に赤文字で「#2 is the last revision」と表示されます。
直訳すると「#2は最新の改訂番号です」。
タイトルをクリックすると、Update前のバージョンが開き、
赤文字をクリックすると最後にUpdateしたバージョンが開きます。
ベース（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/ になっています。

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

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

この段階でURLは４種類出来てきます。
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を入力して開きます。
複製（Fork）
今あるコードの複製を作って、そちらに手を加えて行きたい時はForkを使います。

ForkをクリックするとURLが変わります。

ここでは、
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が複製されたのが確認できます。
CSSの記述
CSSは、右上に記述します。
JavaScriptの記述
JavaScriptは左下に記述します。
<script>の記述は不要です。
jQueryを使う
JavaScript記述エリアの右上にある「JAVASCRIPT」をクリックするとメニューが開きます。

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

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

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

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

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

コメントを入れたら「Update」「Set as base」を順にクリックします。
Dashboardに戻ると変更が確認できます。
ブログに貼り付ける
Editor画面のメニューの「Embed」をクリックすると、以下のメニューが開きます。

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

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

EMBED CODE:
XHTML

<iframe width="100%" height="300" src="//jsfiddle.net/SugiFiddle2/4vuyfrf4/embedded/" allowfullscreen="allowfullscreen" frameborder="0"></iframe>

1
2

<iframe width="100%" height="300" src="//jsfiddle.net/SugiFiddle2/4vuyfrf4/embedded/"
allowfullscreen="allowfullscreen" frameborder="0"></iframe>

これをブログに張ると、

上部メニューを切り替えると、JavaScript,HTML,CSSのコードや実行結果を見ることができます。
公開されているコードを取り込む
まず、jsFiddleにログインしておきます。
公開されているURLを、ブラウザで指定します。
「開眼！JavaScript」に掲載されているサンプルのURLを入れてみました。

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

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