オークションモニタを使ってみる

次のデモ「オークションモニタ」は、オークションの状況を見るためのアプリケーションである。商品、競り値、残り時間などを見ることができ、もちろん自らビッドすることも可能である。また、画面下部には、チャットアプリケーションも用意されている。

このデモアプリケーションを堪能するために、ブラウザを2つ起動しよう。そして、それぞれのブラウザで、「http://auctionmonitor.icefaces.org/auctionMonitor/」にアクセスしてほしい。

アクセスすると、以下のような画面(画面2)が表示される。まず目に留まるのは、入札の残り時間が1秒ずつ減っていることだ(しかしこれは、JavaScriptのタイマイベントで実施しているわけではない)。

画面2: オークションモニタ

デザイン的な面では、商品一覧表の列"Item Name"は折りたたみ可能なパネルになっており、また、各列はソート可能になっている(これらは、後述するコンポーネントショーケースを参照のこと)。

早速Bidボタンを押下し、片方のブラウザで競り値を付けてみる。すると、即座にもう片方のブラウザに反映される。画面2は、手前のブラウザ(Firefox)にて、商品ICEsoft Ice Skateに777ドルの競り値を付けたときの様子だ。後方のブラウザ(Internet Explorer)にその値が反映されていることがおわかりいただけるだろう。

Cometタイプのアプリケーション

このような動作は、どのように実現されているのだろうか。ブラウザの画面が更新されるのは、リクエストを送信し、レスポンスが返ってきた時だけである。ということは、ブラウザから非常に短い間隔でリクエストを送信(ポーリング)し続けているのだろうか。

実はICEfacesでは、長い間隔でポーリングを実施することにより、サーバサイドの更新をクライアントへリアルタイムに反映することを実現している。これは、Cometと呼ばれる技術の実現方法の一つであり、ICEfacesを用いると、このようなCometタイプのアプリケーションを構築することができる。

ちなみに、このような仕組みを、ICEfacesでは、非同期アップデート(Asynchronous Updates)と呼んでいる。ここで言う「非同期」は、「画面遷移に対して非同期」という意味ではなく、「ユーザのアクションに対して非同期」という意味である。ICEfacesのデフォルト設定では、この非同期モードが採用される。

さて、それでは非同期アップデートの具体的な仕組みについて説明しよう。図4にその概要を示す。クライアントサイドのAjaxブリッジには、コネクション管理(Connection Management)の機能が存在し、ポーリング、コネクションの状態の管理、コネクションをロストした場合の別ページへのリダイレクトなどを実行する。

図4: 非同期アップデートの概要

まず、このクライアント側のAjaxブリッジにて、リクエストが送信される。すると――ここがポイントなのだが――サーバ側では、すぐにレスポンスを返さず、一定時間コネクションを維持したままにしておく。この間に、サーバ側でイベントが発生した場合には、維持していたコネクションに対してレスポンスを送信する。レスポンスを受信したら、クライアントからすぐにリクエストを送信し、再度コネクションを維持しておく。

このようにして、大量のリクエストを発生させることなく、サーバサイドの更新をリアルタイムにレスポンスとして返すことが可能である。

また、ICEfacesにおいては、サーバサイドの状態の更新を契機に、レスポンスのレンダリングフェーズを実行する機構が用意されている。ICEfacesではこの機構を、サーバ起動のレンダリング(Server-initiated Rendering)と呼んでいる。詳細な説明は割愛するが、安全かつスケーラブルに利用できるレンダラが、数種類用意されている。例えば、ビッドされた後の状態の反映には、状態を即座に更新するためのOnDemandRendererを用いており、入札の残り時間の更新には、時間間隔を指定可能なIntervalRendererを用いている。

このような、長い間隔でのポーリング、そしてサーバ側の変化をトリガとして処理を実行し、クライアントに伝える「サーバ起動のレンダリング」により、オークションモニタのようなWebアプリケーションを実現することができる。

ICEfacesのコンポーネント

Ajaxフレームワークの紹介であるならば、リッチなUIコンポーネントを紹介するべきなのかもしれない。例えば、ICEfacesにおいては、ドラッグアンドドロップやエフェクトにscript.aculo.us(スクリプタキュラス)を用いており、リッチなUIを実現している。

しかし、ICEfacesがデフォルトでサポートしている全てのコンポーネントが、デモ「コンポーネントショーケース」にて紹介されているので、詳細はそちらを参照していただくことにし、ここでは割愛する。

各コンポーネントのサンプルには、説明やコード例も示されているため、概要の理解のみならず、開発時にも大いに参考になるだろう。

その他の特徴

今回は紹介しきれなかったが、ICEfacesは他にも様々な特徴を持つ。

大きな特徴としては、他フレームワークと連携可能な点である。特にJBoss Seamとの連携については、次のように力が入っていることがうかがえる。

  • プロジェクトの自動生成ツールであるseam-genがICEfaces用に拡張されている
  • JBoss Seamと連携したデモ「コンポーネントショーケース」が提供されている
  • JBoss Seamとの連携方法が、マニュアルに比較的詳しく記載されている

また、Eclipse、MyEclipse、NetBeans、Oracle JDeveloperといった著名なIDEのプラグインが用意されており、開発を容易にしてくれる点も見逃せない。

以上、本稿ではICEfacesの基本的な機能について解説してきた。これまで見てきた通り、ICEfacesは、JSFの優れた設計思想を十分に生かし、Ajaxに対応したフレームワークである。JavaによるAjaxアプリケーション構築においては、ICEfacesが有力な選択肢の一つとなるのではないだろうか。

プロフィール

株式会社日本総研ソリューションズ 足羽 崇

2003年慶應義塾大学大学院修了（基礎理工学専攻、物理学専修）。同年、株式会社日本総合研究所入社。プラットフォームのセキュリティ検査業務、Webアプリケーションの開発・保守業務を経て、現在は、株式会社日本総研ソリューションズにて、システム開発業務、Webアプリケーションのセキュリティ教育などに従事。