ホーム > XHTML/CSS > jsFiddleをとことん楽しむために知っておくと良い15の事

jsFiddleをとことん楽しむために知っておくと良い15の事

2011 年 6 月 10 日 tokkonoPapa コメントをどうぞ コメント

jsFiddle

「fiddle」 には、「いじくる, もて遊ぶ」 とか 「暇・時間をつぶす」 などの意味があるようです。「jsFiddle」 はご存知の通り、HTML + CSS + Mootools、jQuery、Prototype、Dojo などの各種 JavaScript フレームワークで、遊んでみようというサイトです。日本には、「jsdo.it」 という、楽しいサイトもあるのですが、jsFiddle はまだαバージョン。次のβバージョンでは機能追加が数多く予定されており、個人的には期待大なのです。また jsdo.it にはない機能もありますので、必要に応じて使い分けるのが吉だと思います。

今回はそんな魅力が伝えられるよう、まとめてみたいと思います。

1.Firebug Liteの組み込み

クロス・ブラウザのチェックも含めて、console 系のデバッグ出力 を使いたい場合、Firebug Lite を組み込むのが良いでしょう。で、なぜか 「Choose Framework」 で 「jQuery (edge)」 だけが、Firebug Lite を選択できます。そもそも 「edge （エッジ）」 は、開発中を含めて最新バージョンを指すので、普段はあまり使わないでしょう。例えばこの記事を書いている時点では、「jQuery 1.6.2pre」が指定されています。便利なため、私は多用しちゃってますが、Firebug Lite を使うだけなら「Add Resouces」 で 「https://getfirebug.com/firebug-lite-debug.js」 を指定すれば良いです。またβ版では、全てのフレームワークで組み込みが可能となるようです。

jQuery Edge

参考情報

2.Library tag attributes には何を指定する？

<script> タグに指定できる属性なら何でも良いのですが、defer がその典型例でしょう。

参考情報

3.Normalized CSS って何？

コリスさんの記事 「じっくりコードを勉強したくなる、ブラウザのスタイルをリセットするスタイルシート -Normalize CSS」 と類似の品です。「リセット ≒ ゼロに設定する」 のではなく、可能な限りブラウザのデフォルトを使い、異なる属性だけを設定します。独自のリセットをしない限り、チェックしておくのが吉です。

参考情報

4.Add Resoucesの末尾は必ず.js、.css

Add Resources

JavaScript か CSS かを URL 末尾の拡張子で判定しているので、例えばバージョン番号の様なクエリ文字を指定するには、次のようにちょっと工夫が必要です。

http://example.com/js/script.js?ver=1.0&dummy=.js

参考情報

5.iOS の特殊なメタタグを <head> に組み込むには？

CSS のパネルに次のように入れれば OK です。

/* 一旦スタイルを閉じる */
</style>
<!-- ここにメタタグを挿入 -->
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black">
<!-- 再びスタイルを開く -->
<style>

参考情報

6.キーボード・ショートカット

サイドバーの左下 「Keyboard shortcuts」 をクリックすれば、説明が出てきますが、私のお勧めは次の2つです。

  • control + shift + 上矢印
    • 「サイドバー表示のオン／オフ」 で一番のお勧めです。コードを記述する領域が広く使えます。
  • control + shift + Enter
    • 「ドラフトとして保存」 です。jsFiddle では、「Save」 か 「Update」 でバージョン番号が１つずつ上がりながら保存されていきますが、この番号が上がらずに一時的に保存されます。異なるブラウザの動作を確認したい場合に、そのブラウザでログイン後、http://jsfiddle.net/draft/ にアクセスすれば、保存されたドラフトで確認できますので、OK ならおもむろに 「Update」 すれば良いのです。
サイドバーを消して、広々と使う！

サイドバーを消して、広々と使う！

参考情報

7.古いバージョンを引き出すには？

http://jsfiddle.net/ユーザー名/fiddle No/バージョン番号/ にアクセスするだけです。β版では、2つのバージョンの差異もチェックできるようになるとか。

参考情報

8.echo機能でサブリソースへのリクエストをテストする

何かサーバーにリクエストを出し、そのレスポンスを受信するログラムを試したい場合、特に XHR や JSON など、セキュリティー上の問題から外部サーバーを使う事が出来ない場合には、指定したデータやクエリをオオム返しに返してくれる echo 機能が便利です。マニュアルには MooTools のサンプルコードがありますが、jQuery のサンプルを作りましたので、参考にして下さい。

HTML

/echo/html/ に対し、以下をパラメータに POST でリクエストします。$.fn.load() と $.ajax() を使った例はこちら：http://jsfiddle.net/gh/gist/jquery/1.6/1020376/

  • html
    • 受信したい HTML を文字列で指定します。
  • delay
    • オプションで、受信までのタイムラグを秒で指定します。

JSON

/echo/json/ に対し、以下をパラメータに POST でリクエストします。$.post() と $.ajax() を使った例はこちら：http://jsfiddle.net/gh/gist/jquery/1.6/1020389/ （jQuery プラグインの jquery-json を使っています）

  • json
    • 正しく記述した JSON 形式のデータ。
  • delay
    • オプションで、受信までのタイムラグを秒で指定します。

JSONP

http://jsfiddle.net/echo/jsonp/ に対し、以下をパラメータに GET でリクエストします。$.ajax() を使った例はこちら：http://jsfiddle.net/gh/gist/jquery/1.6/1020393/ （$.ajax() は JSONP のリクエストに対し、デフォルトでキャッシュを無効にするための {"_": "時刻を表す数字"} という JSON 形式のデータが挿入します。それがそのままエコーバックされるため、キャッシュを有効化しています）

  • callback
    • コールバック用の関数名を指定しますが、jsFiddle はこれを返しません。
  • delay
    • オプションで、受信までのタイムラグを秒で指定します。

XML

/echo/xml/ に対し、以下をパラメータに POST でリクエストします。$.post() を使った例はこちら：http://jsfiddle.net/gh/gist/jquery/1.6/1020398/

  • xml
    • レスポンスすべき正しい XML 文字列を指定します。
  • delay
    • オプションで、受信までのタイムラグを秒で指定します。

JavaScript

/echo/js/ または http://jsfiddle.net/echo/js/ に GET でリクエストします。$.getScript() を使った例はこちら：http://jsfiddle.net/gh/gist/jquery/1.6/1020402/

  • js
    • レスポンスすべき URL エンコードされた JavaScript コードの文字列を指定します。
  • delay
    • オプションで、受信までのタイムラグを秒で指定します。

ここで、長い JavaScript のコードを文字列で指定するのは大変なので、一旦、無名関数でくくり、toString() 関数で文字列に変換するという Tips を紹介します。次のコードを参考にして下さい。

// JavaScript コード （長いコードを一旦、無名関数でくくる）
var code = function() {
	$('#result').css('color', 'red');
	...
}

// 関数オブジェクトを文字列、実行形式に変換し、URL エンコードする
var script = encodeURIComponent("(" + code.toString() + ")();");

参考情報

9.Web Workersのテストは？

次の様に、前項 8. の JavaScript をエコーバックする仕組みを使えば出来そうです が、実際には、Script file not found のエラーで動きません。

var code = function() {
	// Web Workers のコード
}
var script = encodeURIComponent("(" + code.toString() + ")();");
var worker = new Worker("/echo/js/?delay=2&js=" + script);

また /echo/js/ を http://jsfiddle.net/echo/js/ にした場合には、セキュリティ上の理由から Failed to load script となります。コードは http://fiddle.jshell.net 上で実行され、ドメインが異なるからです。

この問題は、「echo JS from GET request」 でも取り上げられています が、まだクローズせず懸案として残っています。解決するのを待ちましょう ;-) 。

2011年6月26日追記：動かない理由を報告したところ、問題が修正されました。動作するサンプルは コチラ です。

参考情報

10.Gistとの連携

Gist は、コード・スニペットのバージョン管理や公開、他ツールやサイトへの埋め込みが極めてお手軽に出来るサービスで、ご存知の方も多いでしょう。利用するには GitHub のアカウントが必要ですが、Gist の個人利用だけなら、ユーザー名とメールの登録だけで無料で利用可能です。例えば私が登録した Gist は こちら で、本記事用のサンプルを何本かアップロードしています。

この Gist と jsFiddle は次の2つのパターンで連携をします。

fiddle のコードを Gist に丸ごとアップロードする

Gist の1つのツリー上に、jsFiddle に投稿する HTML、CSS、JavaScript をそれぞれ次の様なファイル名 （固定） でアップロードします。

  • fiddle.js
  • fiddle.html
  • fiddle.css
  • fiddle.manifest

マニフェストにはタイトルや著者、解説、追加リソース等を記述します。詳しくは ドキュメント を参照してください。このマニフェストには JavaScript のフレームワークは記述せず、次の様に fiddle としてアクセスする URL で指定します。

http://jsfiddle.net/gh/gist/フレームワーク/バージョン/Gistツリー番号/

例えば この Gist を jQuery 1.6 のフレームワークで呼び出すには、http://jsfiddle.net/gh/gist/jquery/1.6/1007809/ とします。

注意事項

fiddle.manifest には、左サイドバーで設定する項目全てが指定できる訳ではないようです。特に fiddle.js は no wrap (head) と同じ <head> 内の実行となるため、必要なら DOM 構築終了を待つようにしましょう （jQuery なら $(function() {...}); など）。

また、Gist と jsFiddle の間にはキャッシュの時間遅れがある ようです。α版のうちに Fix するとは言っていますが…。

XHR のレスポンス用ファイルをアップロードしておく（echo機能の代わり）

HTML、JSON、XML、JavaScript を XHR でリクエストした時のレスポンスを、予めファイルで用意しておくことが出来ます。データ量がちょっと大きい時に使うと便利でしょう。

  • fiddle.response.html
  • fiddle.response.json
  • fiddle.response.xml
  • fiddle.response.js

リクエストの URL は次の様になります。

/gh/gist/response.{html|json|xml|js}/Gistツリー番号/
注意事項

ドキュメントでは /gh/get/ となっていますが、これは次項の GitHub 用で、Gist 用は /gh/gist/ だと思います。また JavaScript は 途中で仕様追加された ようで、ドキュメントには書いてありません。

参考情報

11.GitHubとの連携

GitHub は、分散型バージョン管理システム Git のリポジトリ作成・公開が出来るホスティング・サービスで、近年オープンソースなプロジェクトで多用されています。jsFiddle はこの GitHub との連携も可能です。

前述の Gist 同様、利用可能な2つのパターンがありますが、違いとしては、GitHub で公開するコードのデモ用に jsFiddle の利用を想定しているところだと思います。

fiddle のコードを GitHub 上のリポジトリに丸ごとアップロードする

以下のファイルを GitHub のリポジトリ上に用意し、次の URL で fiddle を表示させます。

http://jsfiddle.net/gh/get/フレームワーク/バージョン/GitHubツリー/
  • Demo/demo.js
  • Demo/demo.html
  • Demo/demo.css
  • Demo/demo.details

例えば、私の GitHub 上のリポジトリ Hello-World に上げた Demo ディレクトリは、https://github.com/tokkonopapa/Hello-World/tree/master/Demo/ に展開されます。この URL から http://github.com/ を除いた部分を GitHubツリー とし、http://jsfiddle.net/gh/get/jquery/1.6/ の後ろに付ければ fiddle の URL となります -> http://jsfiddle.net/gh/get/jquery/1.6/tokkonopapa/Hello-World/tree/master/Demo/

レスポンス用ファイルを GitHub 上のリポジトリにアップロードする

以下のファイルを GitHub のリポジトリ上に用意します。

  • Demo/demo.response.html
  • Demo/demo.response.json
  • Demo/demo.response.xml

そうすれば、次の URL に Ajax リクエストを出す事が出来るようになります。

/gh/get/response.{html|json|xml}/GitHubツリー/

余談

最初、Demo （名前は Sample とかでも OK） ディレクトリを作らず、直接リポジトリのルートにファイルを置いたのですが、うまく行きませんでした。まだ Git は慣れていないため、ファイルの mv 方法が分からず、結局、GitHub 上でリポジトリごと削除し、ローカル PC 上のディレクトリも rm -rf で、丸ごと削除しました。おそらく Git の管理情報は、.git ディレクトリ中に保存されていたハズなので、不整合は起きていないとは思いますが…。詳しい方、ご教示いただければ幸いです ;-) 。

「思い直すなら今だヨ」と、しつこく確認してきます

リポジトリの削除は慎重に。「思い直すなら今だヨ」と、しつこく確認してきます。

参考情報

12.画像の埋め込み方

jsFiddler では Dynamic Dummy Image Generator と、かわいい猫の写真を提供してくれている placekitten が紹介されています。

また、DATA URI で直接 HTML か、CSS に埋め込んでしまうのが良いでしょう。

私はよく Image To Data URI Convertor というのを使っていますが、jsdo.it に投稿されている DATA URI Playground2 (jsdo.itエディタ対応DATA-URI生成) というすばらしいスクリプトを使うのも手です。

placekitten

placekitten

画像をData URI形式に変換してくれます

画像をData URI形式に変換してくれます

13.他人の公開fiddleの検索方法

β版では計画されているよう ですが、現時点では検索エンジンを使うしかなさそうです。Twitter で jsfiddle を検索語にするのが比較的高確率で引っかかります （みんなでハッシュタグ #jsfiddle をはやらせましょう！）。以下に Twitter 公式のウィジェット を置いておきますので、参考にどうぞ。

2011年6月26日追記

こんな検索方法 がありましたネ！効率よく大量に見つかります。

14.特定の人の公開fiddleを見る方法

おもしろい fiddle が見つかったら、その人の fiddle をもっと見てみたくなりますよネ。そんな時の fiddle を紹介します。

参考情報

2011年8月11日追記

http://jsfiddle.net/user/tokkonopapa/fiddles/ で簡単に見れますネ。

15.公開したコードのライセンスに関して

サイトやドキュメントには何の記述もありません。この辺が しっかりしている jsdo.it とは大きな違いです。元々、Piotr Zalewa – @zalun と Oskar Krawczyk – @oskar の2人が趣味で（？）開発しているような感じなので、しっかりと自分でライセンス表示をし、防衛するのが吉だと思います。

最後にもう1つ

オープンソース開発にも貢献しようという志の見える jsFiddle と、コミュニティー機能を充実させる jsdo.it、それぞれに特色のある発展の仕方をしていって欲しいと思います。今後は、スマホ系の投稿も増えてくるでしょうし、楽しみですネ。

最後に、何に役立つか分かりませんが、面白い！と思って Fork しておいた、こんな fiddle とか、Les Paul ギター とか…

カテゴリー: XHTML/CSS タグ: , ,