『jQuery Reference Guide』が届きました

本日(9/12)の夕方ごろ jQuery Reference Guide が届きました。Amazon で予約したときは 8月末の発行予定でしたが、少しばかり(2週間程度)遅れたようですね。

ざっと目次と内容を流し読みした印象だと、基本は jQuery Reference API と同じです。さらに、サンプルコードや図、スクリーンキャプチャを使って説明を補足しているので、jQuery Reference API だけではイメージしにくい振る舞いも捉えやすくなっています。こういうことだったのかと、今さらながら再発見もありました。

Google AJAX Feed API を使って最新情報ページを作る

Postal Search APIs & Solutions (本サイト) の最新情報は ブログ を通じて案内していますが、その最新情報を本サイトのコンテンツとしても案内できるように、Google AJAX Feed API を使って 最新情報 というページを作ってみました。

JavaScript コードは、次のとおりです。ブログ の Feed を取得し、その Feed の先頭から 15件分のエントリを表示しているだけです。

Google AJAX Feed API の JSON Result Format の説明には、エントリの著者を表すプロパティがありませんが、entry.author プロパティで期待どおり取得できています。

<script type="text/javascript" src="http://www.google.com/jsapi?key="></script>
<script type="text/javascript">
//<![CDATA[
google.load('feeds', '1');

// jQuery.ready
jQuery(function($) {
  var feed = new google.feeds.Feed(
    "http://postal-search-apis-and-solutions.blogspot.com/" +
    "feeds/posts/default"
  );
  feed.setNumEntries(15);
  feed.load(function(result) {
    if (result.error)
      return;
    $.each(result.feed.entries, function() {
      $('<h3 />')
        .addClass('style6') 
        .text(this.title)
        .appendTo('#feed');

      var date = new Date(this.publishedDate);
      date = date.getFullYear()
        + '年'
        + (date.getMonth() + 1)
        + '月'
        + date.getDate()
        + '日';
      
      $('<p />')
        .addClass('style3')
        .addClass('small')
        .addClass('bold') 
        .text(' by ' + this.author + ' ' + date)
        .appendTo('#feed');

      $('<div />')
        .html(this.content)
        .appendTo('#feed');
    });
  });
});
//]]>
</script>

<div id="feed"></div>

本サイトでは Feed2JS を使ってブログの最新情報を表示している箇所があるのですが、いろいろ自由に加工できる Google AJAX Feed API に置き換えることにします。

Web開発者のためのRSS & Atomフィード ベン ハンマースリー Ben Hammersley 菅野 良二 by G-Tools

Postal Search Ajax API リファレンス アップデート

Postal Search Ajax API 0.4.3 リリース

本日(9月5日) Postal Search Ajax API 0.4.3 をリリースしました。機能の追加や変更はありませんので、いままでどおりご利用いただけます。

Postal Search Ajax API 0.4.3 のリリースに合わせて Postal Search Ajax API リファレンスをアップデートしました。

変更点は次のとおりです。

jQuery lookup プラグイン のリファレンスを充実しました。

jQuery coder プラグイン のリファレンスを充実しました。

新しく jQuery later プラグイン のリファレンスを追記しました。

Postal Search Ajax API 構築キット リリース

API 構築キットは、あなたの WEB サーバに Postal Search Ajax API の機能を構築するためのパッケージです。 API 構築キットを使うと、あなたの WEB サーバに Postal Search APIs & Solutions とは完全に独立した形で Postal Search Ajax API の環境を構築でき、あなたの WEB サーバのみで独立して運用できるようになります。

API 構築キットは Perl や PHP といった CGI プログラムを必要としません。 API 構築キットのプログラムやデータベースは、すべて JavaScript で構成しています。ですので、FTP を使ってファイルをアップロードでき、JavaScript でプログラミングができる方なら、以下のページの手順にしたがって簡単に導入できるようになっています。

Postal Search Ajax API 構築キット

郵便番号と住所のデータベースは、毎月、最新のデータを公開してダウンロードできるようにし、WEB サーバのデータを簡単に差し替えられるようにします。

Postal Search Ajax API 0.4.3 リリース

本日(9月5日) Postal Search Ajax API 0.4.3 をリリースしました。機能の追加や変更はありませんので、いままでどおりご利用いただけます。

変更点は次のとおりです。

Later Plugin for jQuery を含めて配布するようにしました。Later Plugin for jQuery はメソッドチェーンの中で、ある処理の実行を後回しにできるプラグインです。

JSONP において、コールバック関数を実行する script 要素を Later Plugin for jQuery を使って削除するようにしました。

Safari 3.0.3 (Windows) においても動作するようになりました。

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

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

Later Plugin for jQuery ある処理の実行を後回しにできるプラグイン

Later Plugin for jQuery はメソッドチェーンの中で、ある処理の実行を後回しにできるプラグインです。

JSONP のコールバック関数の中で script 要素を削除すると IE がクラッシュしてしまう問題を jQuery 的に解決しようというのが動機です。

KoshigoeBLOG: 某所の"MochiKit.Async JSONP"を使わさせていただきました。

ロードのたびにユニークにしなければならなかったのは、script要素を削除している辺りにIEのバグが潜んでいたかららしいので、その辺を中心にtry&error。setTimeoutを使ってscript要素の削除を遅延させてみました。

↑Later Plugin for jQuery を作成するにあたり、上記のブログとそのリンク先を参考にさせてもらいました。

さらにいろいろ調べた結果、次の条件を満たすとき、script 要素を削除しようとすると IE がクラッシュすることがわかりました。

(1) file://... といった file プロトコルを使うとき
(2) ブラウザでキャッシュ済みのとき

いずれも Later Plugin for jQuery を使って script 要素の削除を遅らせることによって、うまく解決できています。

Later Plugin for jQuery ダウンロード

/*
 * Later Plugin for jQuery
 *
 * Copyright(C) 2007 LEARNING RESOURCE LAB.
 * http://developmentor.lrlab.to/postal/
 *
 * Dual licensed under the MIT (MIT-LICENSE.txt)
 * and GPL (GPL-LICENSE.txt) licenses.
 */
(function($) {
  
  // later
  $.fn.later = function(fn) {
    var self = this;
    var timer = setTimeout(function() {
      clearTimeout(timer);
      self.each(fn);
    }, 10);
    return self;
  };

})(jQuery); // function($)

次の例は div 要素の削除を後回しにしています。$.later メソッドで指定した関数は 10ms のタイムアウト後、実行されることになります。div 要素を script 要素に置き換えれば JSONP のコールバック関数の問題が解決できます。

<div id="r">foo</div>

<script type="text/javascript">
//<![CDATA[
jQuery(function($) {
  $('#r').later(function() {
    $(this).remove();
  });
});
//]]>
</script>

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

Learning jQuery: Better Interaction Design and Web Development With Simple Javascript Techniques Jonathan Chaffer Karl Swedberg by G-Tools