2007-08-12

Browser Selector Plugin for jQuery アップデート

Browser Selector Plugin for jQuery 1.1.2
Browser Selector Plugin はメソッドチェーンを途切ることなく、特定の Web ブラウザに依存したコードを書き分けることができる jQuery プラグインです。
上記のとおり、以前に公開した Browser Selector Plugin は、メソッドチェーンを途切ることなく Selector 風の使い勝手を提案したプラグインでしたが、今回は jQuery の Selector 自体を拡張して、Selector 構文を使って Web ブラウザに依存したコードを書き分けることができるようにしました。

jQuery は Selector を拡張する仕組みも持っているのですね。こんなに簡単に!

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 : []);
};

// :browser
$.extend($.expr[':'], {
'browser': 'jQuery.browser[m[3]]',
'msie': 'jQuery.browser["msie"]',
'mozilla': 'jQuery.browser["mozilla"]',
'opera': 'jQuery.browser["opera"]',
'safari': 'jQuery.browser["safari"]'
});

})(jQuery); // function($)
次のサンプルは Internet Explorer と Mozilla (Firefox) で JavaScript コードを書き分け、異なる CSS を適用するものです。:browser と Web ブラウザの名前を指定して JavaScript コードを書き分けています。

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

<script type="text/javascript">
//<![CDATA[
jQuery(function($) {
$('#r2:browser(msie)')
.css('color', 'blue')
.css('margin', '.5em 0');
$('#r2:browser(mozilla)')
.css('color', 'red')
.css('margin', '1em 0')
$('#r2')
.text('Postal Search APIs & Solutions')
});
//]]>
</script>
次のサンプルは、上記のサンプルと同じですが、:browser を使わずに :msie や :mozilla のように Web ブラウザの名前を指定しています。:browser のショートカット(エイリアス) を表したものです。少し直感的な印象になりました。

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

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

なお、jQuery のプラグインを作る方法や Selector を拡張する方法は 『Learning jQuery: Better Interaction Design and Web Development with Simple JavaScript Techniques』 を参考にしています。この洋書は実例に富んでいて、アイディアを支えてくれます。

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-08-05

Postal Search Ajax API 0.4.2 リリース

本日(8月5日) Postal Search Ajax API 0.4.2 をリリースしました。今回から Postal Lookup Plugin for jQuery と Postal Coder Plugin for jQuery を含めて配布するようにしました。

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

jQuery のメソッドチェーンの中で Postal Lookup Ajax API を使えるようになり、jQuery との親和性の高さを実感できると思います。

郵便番号から住所を検索する
住所の単語から郵便番号を検索する
住所の単語から郵便番号を検索してその住所を表示する

もちろん今までどおり、通常の JavaScript としても利用できます。また、条件が付きますが jQuery 以外の JavaScript ライブラリとの併用もできます。詳しくは Postal Search Ajax API with jQuery 1.1.2 リリース を見てください。

今後も引き続き jQuery との関係性を高めていきます。

2007-08-04

7月31日付の郵便番号データを反映して検索できるようにしました

本日7月31日付の 郵便番号データ(全国) を反映して検索できるようにしました。