Ajax フレームワークの比較 株式会社 フォアフロンティア たにあん

説明の範囲 今回の技術発表会の説明範囲としては、 Ajax 開発におけるプ ログラム言語と連携するフレームワークについて比較し、特 に DWR について説明を行なうものとします。

Ajax フレームワーク一覧 Java ベースの Ajax フレームワークにはさまざまなものがあ り以下にその一部を挙げます。 ・ DWR ・ Seam Remoting ・ jMaki ・ RichFaces ・ ICEFaces

前項に挙げた Ajax フレームワークはそれぞれタイプが異な り ３種類に分ける事ができます。 ・ DWR ・ Seam Remoting ・ jMaki ・ RichFaces ・ ICEFaces

Java Ajax フレームワークの比較 Java Ajax フレームワークをタイプ別に分け、 DWR 、 jMaki RichFaces の３つに焦点をあて、比較、解説を行ないます。 < 既存 Ajax ツールキットの ラッパータ イプ >

ＤＷＲ（ Direct Web Remoting ） ・どんなもの？ Ajax 独特の複雑な JavaScript を必要とせず， JavaScript 内で「クラス名. メソッ ド名」と 記述することにより， Java の該当メソッドを呼び出すことが出来きる、サーバ ー側の リモート・オブジェクトの 呼び出しに特化したフレームワーク。 ・利点 フレームワークによって自動生成された Javascript を読み込む以外には画面側 に 制約がない ため、既存の Ajax ツールキットと自由に併用することができます。 シンプルで余計な機能を提供しない分だけ、幅広く連携することが出来ます。 ・欠点 DWR がカバーする範囲は、基本的には「サーバのロジックを呼び出し、戻り値 を 受け取る」までとなるため、その値を画面側でどのように利用するかはについ ては、 Javascript でそのロジックを記述しなければなりません。 また、リッチな UI コンポーネントなども用意されていませんので、操作性の高 い画面を 実現するには他のツールキットと併用する必要があり、別途そのツールキット の 知識も必要となります。

jMaki （じぇーまき） ・どんなもの？ prototype.js 、ｊ Query 、 Dojo 、 script.acul.us 、 Yahoo UI Library などのさま ざまな ライブラリ（フレームワーク）をラップし、 Java 、 Ruby 、 PHP 等からから簡単 に利用 できるようにするライブラリ（フレームワーク）です。 ・利点 カスタムタグを利用して JavaScript ライブラリを利用するため、 JavaScript を 意識せずに、 Ajax アプリケーションを記述できるようになる。 ・欠点 さまざまな既存 Ajax ツールキットのラッパーとしての動作を想定しているの で、 カスタムタグは汎用的な設計となっています。 その為、 1 つのタグで、描画される UI コンポーネントの種類や詳細な設定をすべ て まかなおうとするので、属性値が多くなっている。 また、当然各 UI コンポーネントごとにどのような設定項目があるかは異なり、 それを覚えていく 必要と Ajax ツールキット自体の知識も必要となります。

RichFaces ・どんなもの？ JSF を拡張し、独自のカスタムタグで、 Javascript を記述することなく Ajax 通 信や リッチな UI コンポーネント ( トグルパネルやツリーメニュー、ドラッグ & ドロッ プ ) を 実現することができるようになっており、基本的にカスタムタグの使い方さえ 覚えれば、 Ajax+ リッチ UI コンポーネントの Web アプリケーションが作成できる ように なっています。 ・利点 基本的に Javascript は記述せず、用途にあったカスタムタグを記述するだけ で、 Ajax を利用したリッチなアプリケーションを作成することができます。 ・欠点 抽象度の高い技術（ＪＳＦ）をベースにし、さらにその中に Javascript を隠蔽 している為、 既存の Ajax ツールキットとの連携や、 Javascript を記述する場合などには逆に 制約があります。

・それぞれのフレームワークのタイプは以下のような位置づけとなります。 ・「 Ajax 呼び出し専門系」 他の Ajax ツールキットとの連携など、カスタマイズ性を備えたタイプ ・「既存 Ajax ツールキットのラッパー系」 カスタマイズ性と生産性のバランスがよいタイプ ・「 JSF 拡張系」 カスタマイズ性よりもわかりやすさや生産性重視のタイプ ◆今回は上記の中で「 Ajax 呼び出し専門系」の技術であるＤＷＲについて 説明いたします。

DWR について ＤＷＲの概要 ＤＷＲは Direct Web Remoting の略で Ajax アプリケーションを Java で 開発するための JavaScript と Java の連携を行なうフレームワークです。 以下、ＤＷＲの全体像となります。 （ 参照）

DWR の特徴 ・リモートオブジェクトの呼び出し JavaScript 内で「クラス名. メソッド名」と記述することによって， Java の該当メソッド を 透過的に呼び出すことが出来ます。 以下、呼び出しイメージとなります。 （ 参照）

・リバース Ajax Java （サーバーサイド）から JavaScript （クライアントサイド）を非同期に呼び出す， サーバープッシュを実現する機能を備えています。 当機能には３つの通信方式（以下、表参照）があり、どの方式を採用するかは DWR が 自動的に判断し利用する仕組みになっています。 ・他のフレームワークとの連携 DWR は， Spring ， Struts ， WebWork ， JSF ， Hibernate ， Beehive ， EJB3 との連携機能 を あらかじめ用意しています。 （ DWR の定義ファイルを Spring の Bean 定義ファイル内に記述できる等） 多少の拡張により， Seasar2 と連携させることも可能。 通信方式説明 Comet 長期間接続したままにする方式 Polling 定期的に通信を発生させる方式 Piggyback 他の通信時にデータを相乗りさせる方 式

・テストの容易性 DWR を利用するための web.xml 内で DWR から提供されているサーブレットの デバッグ・モー ドを有効化することにより Web ブラウザから 「 コンテキストルート /dwr/ 」にアクセスすると，以下の画面が表示されます。 （ 参照） 参照 ※ sayHello の引数に “DWR2.0” を入力して実行した画面

・セキュリティ Ajax では懸念事項になりやすい XSS （クロスサイト・スクリプティング）， CSRF （クロ スサイト・ リクエスト・フォージェリ）の攻撃を抑えやすい構造になっています。 セキュリティのため，リバース Ajax などの一部機能はデフォルトでは利用できない設定に なっており，利用する場合は明示的に web.xm で設定を行う必要があります。 ・マルチブラウザ対応 JavaScript は Web ブラウザによって方言があり，これが Ajax 開発では大きな妨げとなる が、 DWR がライブラリとして提供する JavaScript や動的に生成する JavaScript は， IE 、 FireFox 、 Opera 、 Safari 、 Konqueror など複数のブラウザに対応しています。 ・アノテーションのサポート DWR は，アノテーションをサポートしており， dwr.xml に設定する内容を Java コードに 埋め込むことも可能になっています。 以上