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

Presentation on theme: "Ajax フレームワークの比較 株式会社 フォアフロンティア たにあん. 説明の範囲 今回の技術発表会の説明範囲としては、 Ajax 開発におけるプ ログラム言語と連携するフレームワークについて比較し、特 に DWR について説明を行なうものとします。"— Presentation transcript:

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

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

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

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

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

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

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

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

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

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

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

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

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

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