ZK を使ったリッチ・インターネット・アプリケーション

オープンソースの Ajax フレームワーク

ZK は Java™ コードで作成されたオープンソースの Ajax (Asynchronous JavaScript + XML) フレームワークです。ZK を使用すると、JavaScript コードを 1 行も作成せずに Web 2.0 対応のリッチ・インターネット・アプリケーションを作成することができます。Dojo などの典型的な Ajax フレームワークには、「Ajax 化された」呼び出しを行うための API を提供している JavaScript ライブラリーがありますが、ZK では XML によるメタ定義を使ってユーザー・インターフェースを定義します。そしてこのユーザー・インターフェースを提供しているページをユーザーが要求したときに、HTML コードへの変換が行われます。この記事では ZK について説明するとともに、ZK を使って作成した実際のアプリケーションを Apache Tomcat 上で実行して MySQL データベースに接続する例を紹介します。

Sachin K Mahajan (sachin.mahajan@in.ibm.com), Software Developer, IBM  

Sachin は米国ユタ州のソルトレーク・シティーにある University of Utah の修士号を取得しています。彼は米国とインドで中小企業でも大企業でも働いたことがあり、技術者として、また監督者として多様な業務を行ってきました。彼は現在、IBM Software Group の Lotus 部門で働いています。



2010年 1月 05日

はじめに

ZK は JavaScript なしの Ajax のようなものと考えることができます。ZK を構成するのは、Ajax ベースでイベント駆動のエンジン、豊富な XHTML コンポーネントと XUL コンポーネント、そして ZUML と呼ばれるマークアップ言語です。ZUML は、機能豊富なユーザー・インターフェースの作成に使用されます。ZK では、ビジネス・ロジックを Java コードで作成して直接アプリケーションに統合することができ、そのビジネス・ロジックはイベントまたはコンポーネントによってトリガーされます。ZK の最も強力な特徴は、ユーザー・インターフェースを開発するための豊富なコントロールのライブラリーです。興味深いと思いませんか。

まず、ここまでに述べたことを、もう少し詳細に説明しましょう。

  • XHTML: Extensible Hypertext Markup Language、つまり XHTML は、HTML と XML を組み合わせたものです。XHTML には、HTML の強力さと柔軟性に XML の拡張性が追加されています。リスト 1 は XHTML コードの一例です。
    リスト 1. XHTML コードの例
    <?xml version="1.0" encoding="iso-8859-1"?>
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 
    Transitional//EN" "DTD/xhtml1-transitional.dtd">
    <html xml:lang="en" lang="en" xmlns="http://www.w3.org/1999/xhtml">
     <head>
     <title>Hello ZK</title>
     </head>
     <body>
     <h1>Introducing XHTML</h1>
     </body>
     </html>
  • XUL: XML User Interface Language、つまり XUL (「ズール」と発音します) は Mozilla によって開発されたマークアップ言語であり、グラフィカル・ユーザー・インターフェースの記述に使われる XML アプリケーションでもあります。XUL は、入力コントロール、ツールバー、メニュー、ツリー、キーボード・ショートカットなどの要素を作成する機能を持っています。リスト 2 は XUL コードの例を示しています。
    リスト 2. XUL コードの例
    <?xml version="1.0"?>
    <?xml-stylesheet href="chrome://global/skin/" type="text/css"?>
    <window id="main" title="My App" width="300" height="300"
        xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul">
       <caption label="Hello World"/>
       </window>
  • ZUML: ZK User Interface Markup Language、つまり ZUML は、リッチなユーザー・インターフェースを定義するために使われます。ZUML は XML をベースにしているため、それぞれの要素がコンポーネントを表し、それぞれの属性がコンポーネントの値を表します。リスト 3 は ZUML コードの一例を示しています。
    リスト 3. ZUML コードの例
    <window title="Hello ZUML" border="normal">
       Hello World!
       </window>

ZK を入手する

ZK はとても簡単に入手してインストールすることができます。ZK のドキュメント・サイトには、フォルダー構造の設定方法が非常に詳しく説明されており、またライブラリーに関するドキュメントもあります (「参考文献」のリンクを参照)。そのため、ZK の入手や Hello World アプリケーションの実行は容易なはずです。

なぜ ZK なのか

ZK は Ajax を直接実装したもの、つまりサーバー中心のモデルです。これは、Ajax 呼び出しのためには面倒な詳細設定が必要な他のフレームワークとは異なります。また Ajax 呼び出しでは、ブラウザー (クライアント) での DOM (Document Object Model) 操作や、クライアント・サーバー間通信でのデータ同期に、JavaScript が多用されるため、JavaScript を十分に理解している必要があります。ZK は、こうした複雑さを隠してくれるため、開発者はビジネス・ロジックに集中することができます。ZK には他にも以下のようなメリットがあります。

  • 豊富なユーザー・インターフェースが用意されている
  • Web サービスにアクセスできる
  • コンポーネント・データのバインディングができる
  • 単純ながら強力なマークアップ言語 ZUML が用意されている
  • クライアント・コードがないため、保守や拡張が非常に容易である
  • 非常に使いやすい
  • 開発者の生産性が向上する

ZK の実際

ZK の動作を理解するために、実際の例を見てみましょう。この例は顧客を管理するアプリケーションです。このアプリケーションを使用すると、新しい顧客の追加、顧客データの編集、そして顧客エントリーの論理削除など、データベースに対するさまざまな操作を行うことができます。ここではアプリケーションのコードについて説明する前に、ZK を使って生成されたユーザー・インターフェースの画面をいくつか紹介し、さらにこの素晴らしいユーザー・インターフェースを生成するためのベースとなるエンジン、すなわち ZK のアーキテクチャーについて説明します。そして最後に、このアプリケーションで使われている構成パラメーターと併せてコード・レベルの詳細を説明します。

図 1 は、この顧客管理アプリケーションを立ち上げると最初に表示される画面です。

図 1. 顧客管理アプリケーションのインデックス・ページ
顧客管理アプリケーションがスプレッドシート形式でデータを表示しており、データとしては、ID、名前、最後にアクションがあった日付、アカウントが削除されているかどうかが表示されています。

図 1 は、このアプリケーションに登録されている顧客のリストを示しています。このリストはグリッドとして表示されており、列としては、Id (ID)、Name (顧客の名前)、Active Date (最後にアクションがあった日付)、そして Deleted? (削除) フラグがあります。このグリッドの中にあるデータは、列名の近くにあるボタンをクリックすることで、(昇順または降順で) ソートすることができます。ソートが行える列は、Id (int)、Name (String)、Active Date (Date) です。この記事の後の方で、Comparator オブジェクトを使ってソートをカスタマイズする方法を説明します。また、このアプリケーションではページネーション機能も有効になっており (画面の下の方を見てください)、1 ページに一度に 5 件のレコードを表示するようになっています。また、次のページを表示したり、指定したページへ直接ジャンプしたりすることもできます。

図 2. 最上部のメニュー・バー
メニューのスクリーンショットとして、「Register New Customer (新規顧客の登録)」と「Exit (終了)」が表示されています。

図 2 は、この顧客管理アプリケーションの最上部のバーを示しています。このバーは ZK の menubar ウィジェットを使って実装されています。このバーからは、新規の顧客を登録することと、アプリケーションを終了することができます。

ここまでで、このサンプル・アプリケーションの 2 つのユーザー・フローを紹介したので、今度は ZK のアーキテクチャーの詳細を説明することにしましょう。

ZK の内部

ZK アプリケーションはデスクトップ・アプリケーションと同じように動作します。つまり、ユーザー・アクティビティーによって、クライアント・エンジンをとおしてサーバー上でイベントが自動的に起動されます。すると、サーバー上で実行中のコンポーネントがビューを更新し、クライアントのビューと一致させます。クライアント (ブラウザー) は単なるビューとして動作する一方、アプリケーションはサーバー上で実行され、データベースや Web サービスなどのリソースにフル・アクセスすることができます。そのため、セキュリティーに関する懸念を最小限にとどめることができます。

ZK フレームワークには主なコンポーネントが 3 つあります。図 3 に示すように、この 3 つというのは、ZK クライアント・エンジン、ZK ローダー、そして ZK アップデート・エンジンです。

  • ZK クライアント・エンジン: これはクライアント・サイドの ZK であり、サーバーにリクエストを送信し、それに対応する ZK レスポンスを取得します。そして ZK クライアント・エンジンは、これらのレスポンスを使ってブラウザーの DOM を更新します。
  • ZK ローダー: このコンポーネントは、クライアントが要求した URL に基づいて HTML ページを生成します。
  • ZK アップデート・エンジン: これは AU (Asynchronous Update: 非同期更新) エンジンとも呼ばれます。このコンポーネントは Ajax リクエストを受信し、この ZK コンポーネントの対応する属性を更新します。それによってクライアント・エンジンはブラウザーのビューを更新します。
図 3. ZK のアーキテクチャー
ブラウザーとサーバーを含めて ZK のアーキテクチャーが図で説明されています。クライアントとサーバーはリクエストとレスポンスによって互いの通信を行います。

図 3 に示したフローのメカニズムは以下のとおりです。

  • ZK ローダーは、クライアントが要求した URL に基づき、CSS、JavaScript、等々を含む HTML を提供します。この HTML の中には ZK クライアント・エンジンも含まれており、ZK クライアント・エンジンはクライアント・サイドのイベントを監視し、サーバーとの間で ZK リクエストと ZK レスポンスの送受信を行います。
  • クライアント・エンジンはユーザーのアクション (onChange、onClick など) に基づいてイベントをトリガーします。
  • これらのイベントによって ZK アップデート・エンジンが呼び出され、ZK アップデート・エンジンは ZK コンポーネントのプロパティーを更新してクライアント・エンジンに応答します。
  • このレスポンスを受信すると、クライアント・エンジンはブラウザーの DOM ツリーを更新し、この更新されたビューがユーザーに表示されます。

ZK を使って顧客を管理する

次に、顧客を管理するサンプル・アプリケーションの作成の詳細に移りましょう。ここでは Eclipse IDE (統合開発環境) を使用してアプリケーションを作成する方法を説明しますが、この方法はどのような IDE でも同じはずです。

基本的な考え方としては、動的 Web アプリケーションのプロジェクトを作成し、そのプロジェクトがアプリケーション・サーバー・ランタイムを指すようにします。この場合、そのランタイムは Apache Tomcat ランタイムです。

新しいプロジェクトとランタイムをセットアップしたら、フォルダー構造を図 4 のようにします。

図 4. フォルダー構造
zkManageCustomers のパッケージ・ビューが表示されており、src の下に Customer.java と CustomerService.java があり、WebContent の下に addCustomer.zul、editCustomer.zul、index.zul、そして timeout.zul があります。

この顧客管理アプリケーションのフォルダー構造は、図 4 のフォルダー構造と同じパターンに従います。

このアプリケーションの中心となるファイル群が WebContent フォルダーの中に含まれていることに注目してください。この WebContent フォルダーの中に、以下のサブフォルダーが配置されています。

  • META-INF – ここには MySQL データベースに接続するための、データベースのクレデンシャル情報が含まれています。
  • WEB-INF – ここには、アプリケーションの実行に必要な ZK JAR ファイルを含むライブラリー・フォルダーが含まれています。またデータソースを記述する web.xml ファイルも含まれています。
  • また、関連するすべての zul ファイルと HTML ファイルは WebContent フォルダーに含まれています。これらのファイルはアプリケーションのビュー部分として機能し、動的コンテンツと静的コンテンツを Web アプリケーションに提供します。

サンプル・ファイル zkManageCustomer.zip (「ダウンロード」を参照) にはアプリケーションの zip 版が含まれています。またこのサンプル・ファイルには Eclipse に必要なメタデータ・ファイルも含まれているため、そのまま直接 Eclipse にインポートすることができます。

Eclipse の「J2EE (Java 2 Platform, Enterprise Edition)」パースペクティブには「サーバー」タブがあり、このタブを右クリックすると、新しいサーバーを作成するためのメニューが表示されます。このサーバーを使用して、Eclipse IDE からアプリケーション・サーバーを管理することができます。

新しいサーバーを構成したら、新たに作成されたリソースをサーバー上で構成する必要があります。このようにサーバーを構成することによって、それまでに作成されたリソースがデプロイされます。


Tomcat と MySQL を構成する

このサンプル・プログラムは Tomcat と MySQL を使って動作するように構成されています。しかしこのプログラムは、WebSphere のような他の Java アプリケーション・サーバーでも問題なく実行できるはずです。このサンプルは JDBC を使用しているため、JDBC をサポートする任意の SQL データベース (DB2 Express-C など) でも、接続コードを少し変更するだけで動作するはずです。

Tomcat を MySQL データベースに接続するためには、リソース参照を定義する必要があります。リソース参照要素によって、リソース・マネージャー接続ファクトリーの参照名を指定します。この場合のリソース参照は jdbc/mysql という名前のデータベース接続であり、その型は javax.sql.DataSource です。

リスト 4. web.xml でのリソース・マネージャー接続ファクトリー
	. . .
	<resource-ref>
	      <description>DB Connection</description>
	      <res-ref-name>jdbc/mysql</res-ref-name>
	      <res-type>javax.sql.DataSource</res-type>
	      <res-auth>Container</res-auth>
	</resource-ref>
	. . .

また、WebContent/META-INF フォルダー配下の context.xml ファイルの中で接続リソースも定義する必要があります。このファイルには、ドライバー名、jndi 名、ユーザー名、パスワード、データ型、URL などのプロパティーが含まれています。

リスト 5. context.xml でのコンテキスト定義
	. . .
	<Context>
	<Resource driverClassName="com.mysql.jdbc.Driver" 
	maxActive="4" maxIdle="2" maxWait="5000" auth="Container" 
	name="jdbc/mysql" password="" type="javax.sql.DataSource" 
	url="jdbc:mysql://localhost:3306/customer" username="root"/>
	</Context>
	. . .

この顧客データベースには、リスト 6 のスクリプトを実行することで作成されるテーブルが 1 つあります。

リスト 6. データベースを作成するスクリプト
	use customer;
	CREATE TABLE `customer` (
	  `ID` int(11) NOT NULL AUTO_INCREMENT,
	  `name` varchar(255) DEFAULT NULL,
	  `date` date DEFAULT NULL,
	  `deleted` tinyint(1) DEFAULT '0',
	  PRIMARY KEY (`ID`)
	);

DB2 で動作するようにアプリケーションを調整する

Tomcat を DB2-Express C または他の DB2 シリーズのデータベースに接続する場合、構成方法は MySQL の場合と非常によく似ています。下記は web.xml でのリソース・マネージャー接続ファクトリーの構成の一例です。

リスト 7. web.xml でのリソース・マネージャー接続ファクトリー
. . .
DB Connection 
jdbc/db2db 
javax.sql.DataSource 
Container 
. . .

コンテキスト定義の典型的な例を以下に示します。

リスト 8. コンテキスト定義
. . .
maxActive="4" maxIdle="2" maxWait="5000" auth="Container" 
name="jdbc/db2db" password="" type="javax.sql.DataSource" 
url="jdbc:db2://localhost:(port)/customer" username="db2admin"/>
. . .

アプリケーションの概要

このアプリケーションについては、この記事の前の方で簡単に説明しました。この顧客管理アプリケーションには以下の機能があります。

  • ユーザーが操作できるダッシュボード・ページ (すべての顧客のリストが表示されます)
  • 新しい顧客の追加
  • 既存の顧客の編集
  • 顧客の削除 (論理削除)

図 5 は、このアプリケーションのダッシュボード・ページを示しています。デフォルトのビューでは、データベースの中にある顧客のリストが表示されます。

図 5. ダッシュボードの画面
ダッシュボード画面のスクリーンショットとして、スプレッドシート形式のレイアウトでデータが表示されています。

ダッシュボード画面には、登録されているすべての顧客のリストが表示されています。ユーザーはこのリストを ID または名前のいずれかでソートすることができます。

index.zul ファイルには、さまざまな属性 (borderlayoutmenubarmenumenupopup など) があり、これらの属性によってアプリケーションのルック・アンド・フィールを定義することができます。

リスト 9. index.zul ファイル
<menubar id="menubar" width="800px">
 <menu label="Manage Customers">
   <menupopup>
     <menuitem label="Register New Customer">
      <attribute name="onClick"><![CDATA[
        Window win = (Window) Executions.createComponents("addCustomer.zul", null, null);
        win.doModal();
        win.setTitle("Enter Customer Data");
        win.setClosable(true);
        win.setMaximizable(true);
        ]]></attribute>
     </menuitem>
    <menuseparator />
   <menuitem label="Exit" onClick="win.detach()" />
 </menupopup>
</menu>
</menubar>

リスト 9 に示すように、ここでは新しい顧客を登録するためのメニュー・ラベルを持つ menubar を定義しています。このメニューをクリックすると (onClick)、addCustomer という zul を使う Window オブジェクトが Executions オブジェクトによってインスタンス化されます。また、modalclosable などのダイアログを作成するための属性も設定しています。さらに、アプリケーションを終了するための Exit メニューも含めてあります。この menubar、そしていくつかの定義された属性によって、このアプリケーションはリッチ・クライアントらしいルック・アンド・フィールを持つようになります。

リスト 10 は listbox 要素を使ってテーブルにデータを追加する方法を示しています。ここでは、どのテーブル要素にデータを追加するかに応じてモデルを定義しています。

リスト 10. テーブルを定義する listbox 要素の例
	<listbox id="customerList" model="@{myList}" mold="paging" pageSize="5"
		multiple="true" width="800px" rows="${custCount}">
	  <listhead sizable="true">
	    <listheader label="Id" sort="auto(id)"/>
	    <listheader label="Name" sort="auto(name)"/>
	    <listheader label="Active Date" sort="auto(date)"/>
	    <listheader label="Deleted?" />
	  </listhead>
	    <listitem self="@{each=myList}" onClick="showEdit(self.getLabel())">
	      <listcell label="@{myList.id}" />
	      <listcell label="@{myList.name}" />
	      <listcell label="@{myList.date}" />
	      <listcell label="@{myList.deleted}"/>
	    </listitem>
	</listbox>

ページネーション機能を有効にするためには listboxmold 属性を使います。また、列ヘッダーを利用したソートを定義するためには、listheader の sort 属性で auto を有効にします。myList オブジェクトは Customer オブジェクトのリストであり、Customer オブジェクトは、その顧客の属性 (idnamedatedeleted flag など) で構成されます。このリストがサービスによって返され、このリストに対し、ZK が each=myList に従って繰り返し処理を行います。すると listcell のラベルによって Customer オブジェクトの各属性が listbox の中に表示されます。

また、編集機能を有効にするために、onClick イベントに showEdit メソッドを指定します。

顧客登録ダイアログはグリッドとして実装され、Customer Name と Date には必ず値が入力されていなければなりません。

リスト 11. 顧客登録ダイアログのグリッドのコード
	<grid fixedLayout="true" width="450px">
	  <rows>
	    <row>
	      <label value="Customer Name" />
	      <textbox id="customerName" constraint="no empty" />
	    </row>
	    <row>
	      <label value="Date" />
	      <datebox id="date" constraint="no empty"/>
	      </row>
	    <row>
	    <button label="Save" onClick="submit()" />
	    <button label="Cancel" onClick="addCustomerWin.detach()" />
	    </row>
	   </rows>
	</grid>

このダイアログでは、値の入力が必須であるという制約を指定するために、constraint 属性として "no empty" を使っています。ZK ではカスタムの制約を定義することもできます。

また Save ボタンがクリックされたときに、このイベントによって submit() という Java メソッドが呼び出されるようにします。この submit() メソッドはユーザーが入力した Custom Name と Date の値を取得し、新たに作成された Customer オブジェクトの中で、それらの値を設定します。値が設定された Customer オブジェクトはサービスに渡され、データベースに追加されます。リスト 12 は、このコードを示しています。

リスト 12. Save ボタンの Java コード
void submit() throws Exception {
     Customer cust = new Customer();
     cust.setName(customerName.getValue());
     java.util.Date utilDate = date.getValue();
     java.sql.Date sqlDate = new java.sql.Date(utilDate.getTime());
     cust.setDate(sqlDate);
     com.test.services.CustomerService custSvc = new com.test.services.CustomerService();
     custSvc.addCustomer(cust);
     Executions.getCurrent().sendRedirect("index.zul");
     addCustomerWin.detach();
}
図 6. 顧客の登録
顧客データを入力するためのポップアップ画面のスクリーンショットです。画面には、Customer Name に値が必要であるというデータ認証メッセージが表示されています。

図 7 は、顧客の名前や日付を編集するための画面を示しています。この画面には、論理削除を行うオプションもあります。

図 7. 編集と削除の画面
アプリケーションのデータ入力用ポップアップ画面のスクリーンショットです。画面ではデータが入力されており、チェックボックスにもチェックが付けられています。

編集のメカニズムは顧客を登録する場合と非常によく似ています。Customer Name、Date、Deleted? フラグの新しい値をアップデート・サービスに渡し、データベースの中のレコードを更新します。ヘルプ表示を追加したい場合には、リスト 13 のコードを使用してポップアップ要素を作成することができます。

リスト 13. ポップアップ要素のためのコード
	<row>
	  <label value="Delete?"/>
	    <hbox>
	      <checkbox id="deleted" name="deleted" checked="${cust.deleted}"/>
	      <label value="whats this?" style="font:9;cursor:help;valign:center"
	       popup="help"/>
	    </hbox>
	    <popup id="help" width="400px">
	    <html>Checking this box will enable soft delete of the record.</html>
	    </popup>
	</row>

ZK 用の開発ツール

ZK の大きな強みはツールにあります。その一例が、統合開発環境として使われる ZK-Studio (Eclipse プラグイン) です。ZK-Studio には、ZUL エディター、ZUL ビジュアル・エディター、ZK スタイル・デザイナー、DB フォーム・ビルダーなどの機能が含まれています。図 8 は、このサンプル・プロジェクトの作成に使用した ZUL ビジュアル・エディターを示しています。

図 8. ZUL ビジュアル・エディター
ZUL ビジュアル・エディターのスクリーンショットとして、典型的なテキスト・エディターが表示されています。

まとめ

この記事では、Java コードで作成されたオープンソースの Ajax フレームワークである、ZK の特徴について説明しました。またこの記事では、Apache Tomcat 上で実行して MySQL に接続する、簡単で現実的な例を使用しました。ZK フレームワークはオープンソースでイベント駆動の Ajax フレームワークであると同時に、豊富なコンポーネント・セット、マークアップ言語、強力な開発ツール、優れたドキュメントを備えています。そのため、ZK は安価なリッチ・インターネット・アプリケーションを作成するための選択肢として、よく使われるようになりつつあります。


ダウンロード

内容ファイル名サイズ
Sample applicationzkManageCustomers.zip67KB

参考文献

学ぶために

  • ZK プロジェクトのサイトで ZK のドキュメントを読んでください。
  • ZK を使ったアプリケーションのライブ・デモを試してみてください。
  • ZK Developer Guide を読み、他の手法についても学んでください。
  • ZK Studio のドキュメントを読み、ZK Studio の機能を詳しく学んでください。
  • Getting started with XULRunner」は XULRunner を使った基本的なデスクトップ・アプリケーションを示しながら、Mozilla プラットフォームを解説しています。
  • DB2 Express-C をダウンロードしてください。DB2 Express-C は無料ですが、DB2 の持つ強力さを備えています。

製品や技術を入手するために

コメント

developerWorks: サイン・イン

必須フィールドは(*)で示されます。


IBM ID が必要ですか?
IBM IDをお忘れですか?


パスワードをお忘れですか?
パスワードの変更

「送信する」をクリックすることにより、お客様は developerWorks のご使用条件に同意したことになります。 ご使用条件を読む

 


お客様が developerWorks に初めてサインインすると、お客様のプロフィールが作成されます。会社名を非表示とする選択を行わない限り、プロフィール内の情報(名前、国/地域や会社名)は公開され、投稿するコンテンツと一緒に表示されますが、いつでもこれらの情報を更新できます。

送信されたすべての情報は安全です。

ディスプレイ・ネームを選択してください



developerWorks に初めてサインインするとプロフィールが作成されますので、その際にディスプレイ・ネームを選択する必要があります。ディスプレイ・ネームは、お客様が developerWorks に投稿するコンテンツと一緒に表示されます。

ディスプレイ・ネームは、3文字から31文字の範囲で指定し、かつ developerWorks コミュニティーでユニークである必要があります。また、プライバシー上の理由でお客様の電子メール・アドレスは使用しないでください。

必須フィールドは(*)で示されます。

3文字から31文字の範囲で指定し

「送信する」をクリックすることにより、お客様は developerWorks のご使用条件に同意したことになります。 ご使用条件を読む

 


送信されたすべての情報は安全です。


static.content.url=http://www.ibm.com/developerworks/js/artrating/
SITE_ID=60
Zone=Web development, Open source
ArticleID=465774
ArticleTitle=ZK を使ったリッチ・インターネット・アプリケーション
publish-date=01052010