2007-07-30

『Learning JQuery』が届きました。

昨日(7月29日) 『Learning JQuery: Better Interaction Design and Web Development with Simple JavaScript Techniques』 が Amazon から届きました。

ざっと目を通してみると Learning とあるだけあって、ケーススタディを中心に展開して、その中で解説やヒントを提示していくといったスタイルです。

JavaScriptコードはもちろんのこと、HTML/CSS やそのスクリーンショットも省くことなく掲載しているので、JavaScriptコードが HTML/CSS にどういった効果を与えるのか捉えやすい印象があります。

目次や趣旨は公式ブログにあります。参考にしてください。jQuery: » Learning jQuery Book Details

Learning Jquery: Better Interaction Design and Web Development with Simple JavaScript Techniques

2007-07-24

Postal Coder Plugin for jQuery 1.1.2

Postal Coder Plugin は Postal Search Ajax APIPostal.Coder クラス を jQuery プラグインにラップしたものです。Postal Coder Plugin を使うと Postal.Coder クラスが持つ「住所の単語から郵便番号を検索する」機能を jQuery らしくメソッドチェーンの中で利用できます。

住所の単語から郵便番号を検索するときは coder メソッドを使います。coder メソッドの引数には住所の単語とコールバック関数を指定します。coder メソッドはその中で Postal.Coder クラスをを使って住所の単語から郵便番号を検索し、その結果をコールバック関数を使って伝えます。このときの検索は非同期です。

コールバック関数の引数は検索結果とステータスコードです。検索結果は Postal.Coder クラス の response プロパティに対応します。住所の単語から郵便番号が見つからないときは空の配列になります。ステータスコードは Postal.Coder クラス の status プロパティに該当します。エラーが発生したときは 200 以外の値になります。

Postal Coder Plugin for jQuery ダウンロード
/*
* Postal Coder Plugin for jQuery 1.1.2
*
* Copyright(C) 2007 LEARNING RESOURCE LAB.
* http://postal-search-apis-and-solutions.blogspot.com/
*
* Dual licensed under the MIT (MIT-LICENSE.txt)
* and GPL (GPL-LICENSE.txt) licenses.
*/
(function($) {

// $.coderSettings
$.coderSettings = {
timeout: 30
};

// $.coderSetup
$.coderSetup = function(settings) {
jQuery.extend($.coderSettings, settings);
};

// $.coder
$.coder = function(a, fn) {
var coder = new Postal.Coder($.coderSettings);
coder.onload = function() {
fn(coder.response, coder.status);
};
coder.onerror = function() {
fn([], coder.status);
};
coder.send(a) || setTimeout(function() {
fn([], 200);
}, 10);
};

// coder
$.fn.coder = function(a, fn) {
var self = this;
$.coder(a, function() {
self.each(fn, arguments);
});
return self;
};

})(jQuery); // function($)
次のサンプルは住所の単語 "新宿" の郵便番号を検索するものです。はじめに検索中を表す loading ... というテキストを表示し、その後 coder メソッドを使って住所の単語から郵便番号を検索しています。郵便番号が見つかったときは、前述の loading... を上書きして郵便番号をリスト表示しています。

Postal Coder Plugin for jQuery サンプル
<div id="r"></div>

<script type="text/javascript" src="http://developmentor.lrlab.to/postal/js/postalua.js?"></script>
<script type="text/javascript" src="jquery.coder.js"></script>
<script type="text/javascript">
//<![CDATA[
jQuery(function($) {
$('#r')
.text('Loading ...')
.coder('新宿', function(response) {
var ul = $('<ul />');
$.each(response, function() {
$('<li />')
.text(this.c)
.appendTo(ul);
});
$(this)
.empty()
.append(ul);
});
});
//]]>
</script>
検索のタイムアウトを長くするときは $.coderSetup メソッドを使います。タイムアウトの初期値は30秒です。通常は変更せずそのまま使います。$.coderSetup メソッドは Postal.Coder クラス のコンストラクタのオプションに対応します。
$.coderSetup({
timeout: 180
});
Postal Coder Plugin は 2007年8月上旬から Postal Search Ajax API に含めて配布します。それまでは Postal Coder Plugin をダウンロードしてお使いください。Postal Coder Plugin のライセンスは jQuery と同じにしておきます。

2007-07-22

Postal Lookup Plugin for jQuery 1.1.2

Postal Lookup Plugin は Postal Search Ajax APIPostal.Lookup クラス を jQuery プラグインにラップしたものです。Postal Lookup Plugin を使うと Postal.Lookup クラスが持つ「郵便番号から住所を検索する」機能を jQuery らしくメソッドチェーンの中で利用できます。

郵便番号から住所を検索するときは lookup メソッドを使います。lookup メソッドの引数には郵便番号とコールバック関数を指定します。lookup メソッドはその中で Postal.Lookup クラスをを使って郵便番号から住所を検索し、その結果をコールバック関数を使って伝えます。このときの検索は非同期です。

コールバック関数の引数は検索結果とステータスコードです。検索結果は Postal.Lookup クラス の response プロパティに対応します。郵便番号から住所が見つからないときは空の配列になります。ステータスコードは Postal.Lookup クラス の status プロパティに該当します。エラーが発生したときは 200 以外の値になります。

Postal Lookup Plugin for jQuery ダウンロード
/*
* Postal Lookup Plugin for jQuery 1.1.2
*
* Copyright(C) 2007 LEARNING RESOURCE LAB.
* http://postal-search-apis-and-solutions.blogspot.com/
*
* Dual licensed under the MIT (MIT-LICENSE.txt)
* and GPL (GPL-LICENSE.txt) licenses.
*/
(function($) {

// $.lookupSettings
$.lookupSettings = {
timeout: 30
};

// $.lookupSetup
$.lookupSetup = function(settings) {
jQuery.extend($.lookupSettings, settings);
};

// $.lookup
$.lookup = function(c, fn) {
var lookup = new Postal.Lookup($.lookupSettings);
lookup.onload = function() {
fn(lookup.response, lookup.status);
};
lookup.onerror = function() {
fn([], lookup.status);
};
lookup.send(c) || setTimeout(function() {
fn([], 200);
}, 10);
};

// lookup
$.fn.lookup = function(c, fn) {
var self = this;
$.lookup(c, function() {
self.each(fn, arguments);
});
return self;
};

})(jQuery); // function($)
次のサンプルは郵便番号 160-0021 の住所を検索するものです。はじめに検索中を表す loading ... というテキストを表示し、その後 lookup メソッドを使って郵便番号から住所を検索しています。住所が見つかったときは、前述の loading... を上書きして住所を表示しています。

Postal Lookup Plugin for jQuery サンプル
<div id="r"></div>

<script type="text/javascript" src="http://developmentor.lrlab.to/postal/js/postalua.js?"></script>
<script type="text/javascript" src="jquery.lookup.js"></script>
<script type="text/javascript">
//<![CDATA[
jQuery(function($) {
$('#r')
.text('Loading ...')
.lookup('160-0021', function(response) {
if (response.length > 0) {
var addr = response[0];
$(this).text(addr.a);
}
});
});
//]]>
</script>
検索のタイムアウトを長くするときは $.lookupSetup メソッドを使います。タイムアウトの初期値は30秒です。通常は変更せずそのまま使います。$.lookupSetup メソッドは Postal.Lookup クラス のコンストラクタのオプションに対応します。
$.lookupSetup({
timeout: 180
});
Postal Lookup Plugin は 2007年8月上旬から Postal Search Ajax API に含めて配布します。それまでは Postal Lookup Plugin をダウンロードしてお使いください。Postal Lookup Plugin のライセンスは jQuery と同じにしておきます。

2007-07-21

SafariのJavaScriptで特徴だと感じた振る舞い

正式版が出るまでに変更されるかもしれませんが、SafariのJavaScriptで特徴的だと感じた振る舞いをいくつか書いてみます。

■1.組み込みオブジェクトの文字列表現が"[function]"となる
Safari以外の主要ブラウザは、ObjectやStringなどの組み込むオブジェクトから文字列表現(toString()関数で取得)を取り出すと次の形式の文字列が返ります。
function オブジェクト名() {
[native code]
}
この形式は関数インスタンスの文字列表現でも同じで、"[native code]"の部分が関数内のコードに置き換わったものになります。その為、この文字列表現をnative codeを含む関数の判別や、関数名の取得に利用したりするのですが、Safariさんはやってくれました。Safariで組み込みオブジェクトから文字列表現を取り出すと次の文字列が返ります。
[function]
オブジェクト名、"[native code]"どちらもありません。Safariでオブジェクト名を調べる場合はinstanceof演算子を使って調べることになりそうです。またネイティブコードを含む関数かどうかの判定は、「組み込みオブジェクト = ネイティブコードを含む関数」という前提条件をつければ"[function]"はネイティブコードを含む関数とすることができます。

■2.未定義値が設定された配列インデックスはfor inやhasOwnProperty()関数で無いものとして扱われる
Safariは未定義値(void(0))が設定された配列をプロパティとして認識しないようでfor inでは取り出されず、hasOwnProperty()関数にインデックス番号を渡してもfalseが返ります。他のブラウザと同じ振る舞いにするには、hasOwnProperty()関数を自作して判別してあげる必要があります。
var array = ["a","b","c"];
array[0] = void 0;
for(var name in array)
alert(name);
alert(array.hasOwnProperty(0));
このコードを実行すると次の結果になります。
//Internet Explorer、Opera、Mozilla(Firefox)
0
1
2
true

//Safari
1
2
false


個人的には上記の2点は他の主要ブラウザと振る舞いを合わせて欲しいので、もし仕様なら変更してほしいなぁ~と思います。

Learning  jQuery: Better Interaction Design and Web Development With Simple Javascript TechniquesLearning jQuery: Better Interaction Design and Web Development With Simple Javascript Techniques
Jonathan Chaffer Karl Swedberg

Jquery Reference Guide Jquery in Action 2ちゃんねるはなぜ潰れないのか? (扶桑社新書 14) デザイニング・インターフェース ―パターンによる実践的インタラクションデザイン 初めてのJavaScript―Ajax&DOM対応

by G-Tools

2007-07-19

Browser Selector Plugin for jQuery 1.1.2

Browser Selector Plugin はメソッドチェーンを途切ることなく、特定の Web ブラウザに依存したコードを書き分けることができる jQuery プラグインです。

jQuery 自体はクロスブラウザ (Cross-browser) を指向しているので Browser Selector Plugin の存在は矛盾するかもしれません。また、ブラウザの依存性は、他の JavaScript ライブラリを活用したり、CSS を工夫すれば解決できることでもあります。

ただ、場面によって Web ブラウザの違いを JavaScript コードの中で書き分ける(たい)ことがあるのも確かです。Browser Selector Plugin はそのグレーなニーズを埋めるために作ってみたものです。

Browser Selector Plugin 自体はとてもシンプルです。browser メソッドに Web ブラウザを指定すると、その Web ブラウザのみに適用するメソッドチェーンが始まります。そして、browser メソッド以後は、通常どおり jQuery を操作します。最後に end メソッドを呼び出すと Web ブラウザのメソッドチェーンが終わります。

browser メソッドに指定する Web ブラウザの種類は $.browser.* と同じです。safari と opera、msie、mozilla を指定できます。

Browser Selector Plugin for jQuery ダウンロード
/*
* Browser Selector Plugin for jQuery 1.1.2
*
* Copyright(C) 2007 LEARNING RESOURCE LAB.
* http://postal-search-apis-and-solutions.blogspot.com/
*
* Dual licensed under the MIT (MIT-LICENSE.txt)
* and GPL (GPL-LICENSE.txt) licenses.
*/
(function($) {

// browser
$.fn.browser = function(expr) {
var self = this;
return self.pushStack($.browser[expr] ? self : []);
};

})(jQuery); // function($)
次のサンプルは Internet Explorer と Mozilla (Firefox) で JavaScript コードを書き分け、異なる CSS を適用するものです。メソッドチェーンを途切る必要もないし、jQuery の Selector 風に使えるので直感的でしょ。

Browser Selector Plugin for jQuery サンプル
<div id="r"></div>

<script type="text/javascript">
//<![CDATA[
jQuery(function($) {
$('#r')
.browser('msie')
.css('color', 'blue')
.css('margin', '.5em 0')
.end()
.browser('mozilla')
.css('color', 'red')
.css('margin', '1em 0')
.end()
.text('Postal Search APIs & Solutions')
});
//]]>
</script>
Browser Selector Plugin は jQuery の振る舞いを理解する目的で作成したものですが、特定の場面でニーズがあるかもしれませんので公開します。ライセンスは jQuery と同じにしておきます。

Learning  jQuery: Better Interaction Design and Web Development With Simple Javascript TechniquesLearning jQuery: Better Interaction Design and Web Development With Simple Javascript Techniques
Jonathan Chaffer Karl Swedberg

Jquery Reference Guide Jquery in Action 2ちゃんねるはなぜ潰れないのか? (扶桑社新書 14) デザイニング・インターフェース ―パターンによる実践的インタラクションデザイン 初めてのJavaScript―Ajax&DOM対応

by G-Tools

2007-07-16

oogo Plugin for jQuery 1.1.2

Delay Plugin for jQuery 1.1.2
このサンプルを検索ボックスに適用すれば、テレビ CM でよく見かける「○○で検索!」のような動きのある効果にも応用できそうですね。
検索ボックスにキーワードをカチカチと入力し、検索ボタンをクリック!のようなテレビ CM の結びをよく見かけます。いわゆる「○○で検索してください」という手法です。このキーワードをカチカチと入力する雰囲気を実現する jQuery プラグインを作ってみました。

oogo Plugin と名付けました。oo (オーオー) は「○○を検索してください」の「○○を」を、 go (ゴー) は「検索してください」を表現したつもりです。oogo Plugin は Delay Plugin for jQuery 1.1.2 に依存しますので、あわせて使ってください。

検索ボックスのキーワードを入力する input タグに oogo メソッドを適用します。oogo メソッドは、指定したキーワードを1文字ずつに分割し、その文字を Delay Plugin を使って 500 ミリ秒の間隔で1文字ずつ追加するようにします。キーワードを省略すると、事前に入力してあったキーワードを使うようにしています。

これにより、検索ボックスにキーボードでカチカチと入力したような効果が実現できています。

oogo Plugin for jQuery ダウンロード
/*
* oogo Plugin for jQuery 1.1.2
*
* Copyright(C) 2007 LEARNING RESOURCE LAB.
* http://postal-search-apis-and-solutions.blogspot.com/
*
* Dual licensed under the MIT (MIT-LICENSE.txt)
* and GPL (GPL-LICENSE.txt) licenses.
*
* Depend on Delay Plugin for jQuery 1.1.2
* http://postal-search-apis-and-solutions.blogspot.com/
*/
(function($) {

// $.oogo
$.oogo = {

// $.oogo.interval
interval: 500
};

// oogo -- depend on Delay Plugin for jQuery
$.fn.oogo = function(val) {
var self = this;
self.each(function(i, n) {
$.each((val || n.value).split(''), function(i, v) {
jQuery(n).delay(function() {
this.value += v;
});
});
n.value = '';
});
$.resume($.oogo.interval);
return self;
};

})(jQuery); // function($)
次のサンプルは、Google の検索ボックス に FM/V のテレビ CM で話題になった「地底人は誰?」というキーワードを指定したものです。キーボードを使ってカチカチっと入力したかのように見えませんか?

oogo Plugin for jQuery サンプル
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="jquery.delay.js"></script>
<script type="text/javascript" src="jquery.oogo.js"></script>
<script type="text/javascript">
//<![CDATA[
jQuery(function($) {
$('input[@name=q]').oogo('地底人は誰?');
});
//]]>
</script>
oogo Plugin は jQuery の振る舞いを理解する目的で作成したものですが、特定の場面でニーズがあるかもしれませんので公開します。ライセンスは jQuery と同じにしておきます。

Learning  jQuery: Better Interaction Design and Web Development With Simple Javascript TechniquesLearning jQuery: Better Interaction Design and Web Development With Simple Javascript Techniques
Jonathan Chaffer Karl Swedberg

Jquery Reference Guide Jquery in Action 2ちゃんねるはなぜ潰れないのか? (扶桑社新書 14) デザイニング・インターフェース ―パターンによる実践的インタラクションデザイン 初めてのJavaScript―Ajax&DOM対応

by G-Tools

Delay Plugin for jQuery 1.1.2

メソッドチェーンの中で、指定した関数をその場で実行せず、遅延して後回しにできる jQuery プラグインです。jQuery の操作を後でまとめて実行したり、一定の間隔でステップ実行できるので、その特性を活かした様々な応用が期待できます。

後回しにする関数は delay メソッドで指定します。このとき、指定した関数はキューに追加するだけで、その関数は実行しません。delay メソッドで繰り返し関数を指定して、後回しにする関数をどんどん追加していきます。

後回しにする関数は $.resume メソッドで実行します。$.resume メソッドの引数には実行間隔が指定でき、その実行間隔の周期で、キューの中の関数を先頭から1つずつ順番に実行します。実行間隔はミリ秒の単位で指定します。省略したときは 10 ミリ秒です。なお、$.resume メソッドを実行し直すと、現在の実行周期を変更できます。

キューの中の関数がある限り、その関数を実行し続けようとします。ですので、キューの中に関数があるとき、delay メソッドで関数を追加すると、その関数も実行します。ただし、キューの中の関数がなくなると停止となり、delay メソッドで関数を実行しても、その関数は実行しません。そのときは $.resume メソッドを呼び出して再開してください。

Delay Plugin for jQuery ダウンロード
/*
* Delay Plugin for jQuery 1.1.2
*
* Copyright(C) 2007 LEARNING RESOURCE LAB.
* http://postal-search-apis-and-solutions.blogspot.com/
*
* Dual licensed under the MIT (MIT-LICENSE.txt)
* and GPL (GPL-LICENSE.txt) licenses.
*/
(function($) {

// $.delay
$.delay = {

// $.delay.queue
queue: [],

// $.delay.timer
timer: null,

// $.delay.pause
pause: function() {
if (!$.delay.timer)
return;
clearInterval($.delay.timer);
$.delay.timer = null;
}
};

// $.resume
$.resume = function(interval) {
$.delay.pause();
$.delay.timer = setInterval(function() {
var fn = $.delay.queue.shift();
fn ? fn() : $.delay.pause();
}, interval || 10);
};

// delay
$.fn.delay = function(fn) {
var self = this;
$.delay.queue.push(function() {
self.each(fn);
});
return self;
};

})(jQuery); // function($)
次のサンプルは、テキストを入力して実行ボタンをクリックすると、入力したテキストをタイプライタ風に再現するものです。

入力したテキストを1文字ずつに分割して、$.each メソッドで1文字ずつ繰り返しています。その繰り返しの中で、1文字の span タグを組み立てて、その span タグを p タグの末尾に追加しています。このとき、delay メソッドを使って span タグの追加を後回しにしています。

最後に $.resume メソッドを使って、後回しにした関数を200ミリ秒の周期で実行しています。200ミリ秒ごとに p タグに span タグが追加されることになり、入力したテキストを1文字ずつタイプライタで入力したかのように見えます。

このサンプルを検索ボックスに適用すれば、テレビ CM でよく見かける「○○で検索!」のような動きのある効果にも応用できそうですね。

Delay Plugin for jQuery サンプル
<form onsubmit="run(this.q.value); return false;">
<input type="text" name="q" value="Tag Plugin for jQuery 1.1.2" />
<input type="submit" name="g" value="実行" />
</form>
<p id="r"></p>

<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="jquery.delay.js"></script>
<script type="text/javascript">
//<![CDATA[
function run(q) {
$.each(q.split(''), function(i, v) {
$('<span />')
.text(v)
.delay(function() {
$('#r').append(this);
});
});
$.resume(200);
}
//]]>
</script>
Delay Plugin は jQuery の振る舞いを理解する目的で作成したものですが、特定の場面でニーズがあるかもしれませんので公開します。ライセンスは jQuery と同じにしておきます。

Learning  jQuery: Better Interaction Design and Web Development With Simple Javascript TechniquesLearning jQuery: Better Interaction Design and Web Development With Simple Javascript Techniques
Jonathan Chaffer Karl Swedberg

Jquery Reference Guide Jquery in Action 2ちゃんねるはなぜ潰れないのか? (扶桑社新書 14) デザイニング・インターフェース ―パターンによる実践的インタラクションデザイン 初めてのJavaScript―Ajax&DOM対応

by G-Tools

2007-07-15

Postal.$ と Postal.jQuery は jQuery オブジェクトの別名です。

Postal Search Ajax API with jQuery 1.1.2 リリース
本日 2007 年 7 月 7 日から Postal Search Ajax API の中に jQuery 1.1.2 を含めて配布するようにしました。今後 Postal Search Ajax API は jQuery の特徴を活かしつつ jQuery を緩やかに取り込みながら成長していきたいと思います。
Postal Search Ajax API with jQuery では jQuery と $ のほかに Postal.jQuery と Postal.$ という別名でも jQuery オブジェクトを参照できます。

次のとおり Postal.jQuery と Postal.$ は jQuery の参照に過ぎません。Postal Search Ajax API の中に jQuery が含まれることを伝えるため、このような別名を用意しました。
//
// Postal.$
//
Postal.$ = jQuery;

//
// Postal.jQuery
//
Postal.jQuery = jQuery;
jQuery や $、Postal.jQuery、Postal.$ は、どれをとっても結果は同じですので、Postal Search Ajax API を使う目的や主旨によって、そのオブジェクト(別名)を使い分けてもよいですね。

2007-07-12

オブジェクトが持つプロパティの順序性について

JavaScriptのオブジェクトはプロパティを有していますが、このプロパティをfor inで取り出しす際の順序には、プロパティを定義した順に取り出されるというルールがあります。例えば次のオブジェクトのプロパティをfor inで取り出すとa、b、c、dの順に取り出されます。
var object = new Object();
object.a = 3;
object.b = 2;
object.c = 1;
object.d = 0;
世の中のJavaScriptのプログラムはこのルールを前提に作られているものも少なくないと思います。このルールはIEやNN(Firefox)、Operaなど需要ブラウザのJavaScriptエンジンで実装されているので基本的に問題は起こらないのですが、Rhinoでは問題になります。Rhinoでは上記のオブジェクトからfor inでプロパティを取り出すとc、d、a、bの順に取り出されます。値と定義の順序を変えても同じ順序で取り出されるので名前を元に何らかのルールでソートしているようです。
そのため、もしJ2SE 6.0のjrunscriptなどJavaScriptエンジンがRhinoの環境で動くプログラムを書く場合は、for inで取り出されるプロパティの順序に注意してコーディングする必要があります。

以下に私が把握している限りで、各JavaScriptエンジンのプロパティの順序性について示しておきます。(全てWindows環境のものです)

 ■プロパティの定義順
  • Internet Explorer
  • Netscape Navigator
  • Mozilla(Firefox)
  • Opera
  • Safari
  • Windows Script Host
 ■何らかのルールによる順序
  • Rhino


Learning  jQuery: Better Interaction Design and Web Development With Simple Javascript TechniquesLearning jQuery: Better Interaction Design and Web Development With Simple Javascript Techniques
Jonathan Chaffer Karl Swedberg

Jquery Reference Guide Jquery in Action 2ちゃんねるはなぜ潰れないのか? (扶桑社新書 14) デザイニング・インターフェース ―パターンによる実践的インタラクションデザイン 初めてのJavaScript―Ajax&DOM対応

by G-Tools

2007-07-06

Postal Search Ajax API with jQuery 1.1.2 リリース

本日 2007 年 7 月 7 日から Postal Search Ajax API の中に jQuery 1.1.2 を含めて配布するようにしました。今後 Postal Search Ajax API は jQuery の特徴を活かしつつ jQuery を緩やかに取り込みながら成長していきたいと思います。

今回 Postal Search Ajax API に含めた jQuery は、jQuery 1.1.2 (jquery-latest.js uncompressed) をそのまま custom_rhino.jar で圧縮したものです。jQuery のソースコードに手を加えていませんので jQuery のすべての機能をそのまま利用できます。

HTML ページに貼り付けた Postal Search Ajax API の script タグの変更はありません。多くのみなさんは HTML ページを修正することなく、今までどおり利用できます。

ですが、jQuery は他の JavaScript ライブラリとの親和性が高いといいながらも、その相性によって HTML ページの修正が必要になることがあります。Prototype や Mochikit などの JavaScript ライブラリとの併用でうまく動作しないときは、次のとおり対策してみてください。

他の JavaScript ライブラリを Postal Search Ajax API より前にロードしているときは、
<script type="text/javascript" src="prototype.js"></script>
<script type="text/javascript" src="http://developmentor.lrlab.to/postal/js/postalua.js?apikey"></script>
次のように Postal Search Ajax API より後にロードするようにします。
<script type="text/javascript" src="http://developmentor.lrlab.to/postal/js/postalua.js?apikey"></script>
<script type="text/javascript" src="prototype.js"></script>
もしくは Postal Search Ajax API をロードした後に jQuery.noConflict メソッドを呼び出してください。
<script type="text/javascript" src="prototype.js"></script>
<script type="text/javascript" src="http://developmentor.lrlab.to/postal/js/postalua.js?apikey"></script>
<script type="text/javascript">
jQuery.noConflict();
</script>
jQuery と他の JavaScript ライブラリの併用方法は jQuery 公式サイトにも解説 jQuery JavaScript Library has a problem がありますので参考にしてください。

jQuery 1.1.3.1 がリリースされました。現在 Postal Search Ajax API と jQuery 1.1.3.1 の組み合わせの確認をしているところです。なお jQuery 1.1.2 以前との組み合わせは確認していません。また、今後も確認する予定もありません。

とはいっても jQuery 1.1.2 以前との不具合を放っておくものではありません。その原因が明らかであれば前向きに対応しますので、このブログか フォーラム までご連絡ください。

2007-07-05

Favicon Plugin for jQuery 1.1.2

指定した URL からそのサイトの favicon (ファビコン) を表示する jQuery プラグインです。サイトによって favicon があったりなかったりしますが、Favicon Plugin は favicon が見つかったときだけ表示するようにしています。

http:// からはじまる任意の URL を指定できます。その URL からプロトコルとホスト名を切り出して favicon.ico の URL を組み立てます。ですので、相対パスは対応していません。

Favicon Plugin は img タグを操作することを前提としています。favicon.ico の URL を設定し、そのサイズを 16 × 16 としています。

はじめは非表示としておき favicon のロードが完了したとき表示するようにしています。これで favicon のないサイトは img タグが [×] などにならずに済みます。イベントのハンドリングは jQuery の one メソッドを使っています。one メソッドを使うと onload イベントの発生後、そのイベントハンドラを解除してくれます。bind メソッドの1度きり版ですね。

Favicon Plugin for jQuery 1.1.2
/*
* Favicon Plugin for jQuery 1.1.2
*
* Copyright(C) 2007 LEARNING RESOURCE LAB.
* http://postal-search-apis-and-solutions.blogspot.com/
*
* Dual licensed under the MIT (MIT-LICENSE.txt)
* and GPL (GPL-LICENSE.txt) licenses.
*/
(function($) {

// favicon
$.fn.favicon = function(url) {
var self = this;
var dir = url.split('/').splice(0, 3).join('/');
// http://example.com/foo.html -> http://example.com

self.hide();
self.attr('width', 16);
self.attr('height', 16);
self.attr('src', dir + '/favicon.ico');
self.one('load', function() {
self.show();
});

return self;
};

})(jQuery); // function($)
次の例のように Favicon Plugin は img タグを操作します。favicon メソッドに URL を指定すると http://weather.goo.ne.jp/favicon.ico を表示します。
<div id="r1"></div>

<script type="text/javascript">
//<![CDATA[
jQuery(function($) {
$('<img />')
.favicon('http://weather.goo.ne.jp/area/4410.html')
.appendTo('#r1');
});
//]]>
</script>
次の例は HTML ページの全 a タグを探し、その a タグのリンク先の favicon を表示しています。favicon は insertBefore メソッドを使って a タグの直前に追加しています。
<script type="text/javascript">
//<![CDATA[
jQuery(function($) {
$('a').each(function(i, n) {
$('<img />')
.favicon(n.href)
.insertBefore(n);
});
});
//]]>
</script>
Favicon Plugin は jQuery の振る舞いを理解する目的で作成したものですが、特定の場面でニーズがあるかもしれませんので公開します。ライセンスは jQuery と同じにしておきます。

Learning  jQuery: Better Interaction Design and Web Development With Simple Javascript TechniquesLearning jQuery: Better Interaction Design and Web Development With Simple Javascript Techniques
Jonathan Chaffer Karl Swedberg

Jquery Reference Guide Jquery in Action 2ちゃんねるはなぜ潰れないのか? (扶桑社新書 14) デザイニング・インターフェース ―パターンによる実践的インタラクションデザイン 初めてのJavaScript―Ajax&DOM対応

by G-Tools

2007-07-03

JSONP Plugin for jQuery 1.1.2

JSON for jQuery
This adds a json() method to the $ function. The first argument is the URL to the JSON resource, with the text {callback} wherever the JSON callback method should be provided. In a JSONP URL, you would use jsonp={callback}; in a Yahoo! JSON URL you would use format=json&callback={callback}.
JSON for jQuery というプラグインを jQuery ライクに書き換えてみました。

JSONP Plugin for jQuery 1.1.2
/*
* JSONP Plugin for jQuery 1.1.2
*
* Copyright(C) 2007 LEARNING RESOURCE LAB.
* http://postal-search-apis-and-solutions.blogspot.com/
*
* Dual licensed under the MIT (MIT-LICENSE.txt)
* and GPL (GPL-LICENSE.txt) licenses.
*/
(function($) {

// $.jsonp
$.jsonp = {
};

// jsonp
$.fn.jsonp = function(url, fn) {
var self = this;
var key = 'fn' + (new Date()).getTime();

var script = $(document.createElement('script'))
.attr('type', 'text/javascript')
.attr('charset', 'UTF-8')
.attr('src', url.replace(/{fn}/, 'jQuery.jsonp.' + key));

$.jsonp[key] = function(json) {
script.remove();
fn.apply(self, [json]);
};

$('head', document).append(script);

return self;
};

})(jQuery); // function($)
次のとおり、使い方は JSON for jQuery とほとんど変わりありません。JSON for jQuery は URL に埋め込むコールバック関数を {callback} で表しますが、このプラグインは {fn} としています。何でも短い名前が好みなんです。(^^

var url = 'http://express.heartrails.com/api/json?jsonp={fn}';
var params = jQuery.param({
method: 'getStations',
x: 経度,
y: 緯度,
});

jQuery('#station')
.text('loading...')
.jsonp(url+'&'+params, function(json) {
//TODO:
});
JSON for jQuery のアイディアとと実装の枠組みは同じですが、いくつか改善しています。

コールバックしたタイミングで、生成した script タグを削除するようにしています。また、script タグを生成するとき charset 属性を UTF-8 としています。

コールバック関数をグローバルではなく $.jsonp オブジェクトに保持するようにしています。

コールバックのコンテキストをメソッドチェーン中の jQuery オブジェクトとしています。fn.apply(self, [json]) とするか、self.each(fn, [json]) どちらにすべきか悩みましたが、前者を選択しました。jQuery の流儀だと後者の気もします。う~む。まだ悩み中です。

JSONP Plugin は jQuery の振る舞いを理解する目的で作成したものですが、特定の場面でニーズがあるかもしれませんので公開します。ライセンスは jQuery と同じにしておきます。

Learning  jQuery: Better Interaction Design and Web Development With Simple Javascript TechniquesLearning jQuery: Better Interaction Design and Web Development With Simple Javascript Techniques
Jonathan Chaffer Karl Swedberg

Jquery Reference Guide Jquery in Action 2ちゃんねるはなぜ潰れないのか? (扶桑社新書 14) デザイニング・インターフェース ―パターンによる実践的インタラクションデザイン 初めてのJavaScript―Ajax&DOM対応

by G-Tools

2007-07-01

Tag Plugin for jQuery 1.1.2

jQuery のメソッドチェーンを途切ることなく、HTML タグを組み立てるためのプラグインです。HTML タグの生成と追加をスタックで操作することで、メソッドチェーンを崩さずに HTML タグを組み立て続けることができます。

スタックの操作は jQuery 自体が持つスタックの仕組みを利用しています。jQuery は pushStack メソッドで現在のインスタンスをスタックに積み、end メソッドで直前のインスタンスに戻すことができます。

Tag Plugin はこの特性を利用して、tag メソッドで HTML タグを生成して pushStack メソッドでスタックに積みます。gat メソッドで end メソッドでスタックから戻し、HTML タグを追加します。gat メソッドの名前は tag メソッドを逆に読んだものです。戻すや反対という意味を込めています。

また $.tag メソッドを使うと、スタックに積まずに HTML タグを生成できます。起点となる HTML タグを生成して組み立てるときに使えます。

Download Tag Plugin for jQuery 1.1.2
/*
* Tag Plugin for jQuery 1.1.2
*
* Copyright(C) 2007 LEARNING RESOURCE LAB.
* http://postal-search-apis-and-solutions.blogspot.com/
*
* Dual licensed under the MIT (MIT-LICENSE.txt)
* and GPL (GPL-LICENSE.txt) licenses.
*/
(function($) {

// $.tag
$.tag = function(name) {
return jQuery('<' + name + ' />');
};

// tag
$.fn.tag = function(name) {
var self = this;
return self.pushStack($.tag(name));
};

// gat
$.fn.gat = function() {
var self = this;
return self.end().append(self);
};

})(jQuery); // function($)
以下は div タグに a タグを追加する例です。tag メソッドで a タグを生成し、gat メソッドでその a タグを div タグに追加しています。
<div id="r1"></div>

<script type="text/javascript">
//<![CDATA[
jQuery(function($) {
$('#r1')
.tag('a')
.attr('href', 'http://developmentor.lrlab.to/postal/')
.text('Postal Search APIs & Solutions')
.gat();
});
//]]>
</script>
以下は div タグに ul と li のリストタグ、さらに a タグを追加する例です。ul と li タグがスタックに積まれ、最終的に div タグまでさかのぼって追加されることになります。
<div id="r2"></div>

<script type="text/javascript">
//<![CDATA[
jQuery(function($) {
$('#r2')
.tag('ul')
.tag('li')
.tag('a')
.attr('href', 'http://developmentor.lrlab.to/postal/digest.html')
.text('Postal Search Ajax API ダイジェスト')
.gat()
.gat()
.tag('li')
.tag('a')
.attr('href', 'http://developmentor.lrlab.to/postal/reference.html')
.text('Postal Search Ajax API リファレンス')
.gat()
.gat()
.gat()
//]]>
</script>
Tag Plugin は jQuery の振る舞いを理解する目的で作成したものですが、特定の場面でニーズがあるかもしれませんので公開します。ライセンスは jQuery と同じにしておきます。

Learning  jQuery: Better Interaction Design and Web Development With Simple Javascript TechniquesLearning jQuery: Better Interaction Design and Web Development With Simple Javascript Techniques
Jonathan Chaffer Karl Swedberg

Jquery Reference Guide Jquery in Action 2ちゃんねるはなぜ潰れないのか? (扶桑社新書 14) デザイニング・インターフェース ―パターンによる実践的インタラクションデザイン 初めてのJavaScript―Ajax&DOM対応

by G-Tools