« 2005年08月 | メイン | 2005年10月 »

2005年09月22日

CBL Partial Updater (20050922) リリース

 簡単 Ajax ライブラリ、CBL Partial Updater に、スピナーを表示する機能をつけました。

 Ajax のリクエスト処理中は spinner.gif が表示されます (別のインジケータにすることもできます) 。

 詳しくは、上記リンク先をごらんください。

投稿者 kazuho : 2005年09月22日 14:06 | コメント (6) | トラックバック (0) このエントリーを含むはてなブックマーク このエントリーを含むはてなブックマーク

prototype.js のイベント順序

 prototype.js (1.3.1) を使用していて、奇妙な現象にぶつかったので、メモをかねてブログ。

 prototype.js を非同期モード (asynchronous:true) で実行している場合、 onComplete の後に onLoading が呼ばれることがある。

 原因は、prototype.js のこのコード:

if (this.options.asynchronous) {
  this.transport.onreadystatechange = this.onStateChange.bind(this);
  setTimeout((function() {this.respondToReadyState(1)}).bind(this), 10);
}
onLoading を自前でスケジュールしている点。

 たぶん、なんらかの理由があってそうなっているんだろうけど (どうして?) 、イヤな仕様ですね。

 とりあえず、 onComplete ハンドラで onLoading ハンドラをリセットすることで、問題に対処しました。

投稿者 kazuho : 2005年09月22日 11:47 | コメント (5) | トラックバック (0) このエントリーを含むはてなブックマーク このエントリーを含むはてなブックマーク

2005年09月16日

さらば Paged List

 サイボウズ・ラボでも好きな人が多い Ajax ですが、これまでのところ、部分差換の技術として利用されているケースが多いようです。しかし、 Ajax は遅延送信の技術としても利用することができます。

 こちらのサイトをごらんください注1

ajaxscrollbar.gif


 なんてことはない、ML のアーカイブ表示です (先頭の方の日本語サブジェクトが化けているのはご愛嬌) 。ただ、従来の ML アーカイブと何が違うのかというと、メールの一覧を複数のページに分割せずに、表示している点です。

 実は、このリスト、 Ajax で送信を遅延しています。50 件単位で、表示中の部分だけを転送するようになっているので、10000 件データがある場合でも、遅くなりません。

 Gmail でも何故か未採用のテクニックですが、今後一般的になってくると思います。

注1: w3ml に手を入れたものでデモを作成しています。パッチを見つけるまで Ruby 1.8 で動作しなくて、どうなることかと思いました。

投稿者 kazuho : 2005年09月16日 15:12 | コメント (6) | トラックバック (1) このエントリーを含むはてなブックマーク このエントリーを含むはてなブックマーク

2005年09月08日

CBL Partial Updater

 サイボウズ・ラボに入社して、そろそろ1ヶ月になります。その間、こちらのブログは閑古鳥が鳴いていたわけなのですが、そろそろ仕込んできた小ネタを公開していこうと思います。

 というわけで、第1弾は AJAX を楽に書く話。

 もともと PDA 用のウェブブラウザ屋さんだったりする関係で AJAX は敵だったのですが、ラボに入社以来、いろいろ実例を見せてもらっています。その中で、自分でも AJAX アプリを書いてみようと思ったのですが、めんどくさそうなのでラッパーを作りました。

 このラッパー「CBL Partial Updater」を使えば、既存の PHP コードをそのまま AJAX 化することができます。
 まず、例として、テストページ (PHP ソースコード, HTML テンプレート) をご覧ください。

 通常の PHP コードと違うのは、以下の点です。

require_once('partialupdater.class.php');

(略)

if (isset($_REQUEST['_'])) {
    $updater = new CBL_PartialUpdater(array('encoding' => 'euc-jp'));
    $updater->send($smarty->fetch('index.tpl'),array('count','table','error'));
} else {
    $smarty->display('index.tpl');
}

 これで、クライアントからのリクエストが AJAX だった場合は、CBL_PartialUpdater ライブラリが出力結果の HTML を解析し、指定された id 要素の部分だけを転送、差替してくれます (この例では、 count, table, error 要素が差し替わります) 。

 あとは、HTML の中で、<span id="...">...</span> などと宣言して、差し替える部分を宣言し、フォームの onSubmit ハンドラを書けば終わりです。

 これで、お気楽に AJAX することができて、私はハッピーになりました。

 最後になりましたが、このライブラリは、 SourceForge.net を公開することになりました。こちらよりダウンロードできますので、ご意見、ご感想などいただければと思います。

2005/09/22 追記: 最新情報については CBL Partial Updater カテゴリ をご覧ください。

投稿者 kazuho : 2005年09月08日 13:38 | コメント (5) | トラックバック (1) このエントリーを含むはてなブックマーク このエントリーを含むはてなブックマーク