Ajax による J2EE アプリケーションの機能強化 by usr10478

VIEWS: 60 PAGES: 23

									WebSphere 開発




     Ajax による J2EE アプリケーションの機能強化




            IBM® WebSphere® Application Server Feature Pack for
                        Web 2.0 を使用した例




Kevin Haverlock
WebSphere Application Server Development, Ajax Technologies
kbh@us.ibm.com
ブラウザー上でリッチなユーザー・インターフェースを表示できるようにする Ajax
は、Web 開発の進化を象徴しています。ネイティブ・オペレーティング・システム上
で動作する重たいグラフィカル・ユーザー・インターフェース・アプリケーションと、
最近のブラウザーで実現可能なリッチなアプリケーションとを分け隔てる境界線は曖
昧になりつつあります。この事実に Ajax 技術がいかに貢献しているかは、Google
マップや最近新しくなった Yahoo!メールを見れば明らかです。

ブラウザー・ベースのユーザー・インターフェースに起こりつつある革新によって、
顧客はこのような機能を、自分たちが利用する Web サイトにも期待するようになっ
てきました。Ajax 開発は、ユーザーにコンテンツを配信する方法を一新する絶好の機
会となります。

それと同時に考えなければならないのは、最近の J2EE アプリケーションというコン
テキストのなかで Ajax 開発による革新的なコンテンツの配信を実現する方法です。
この記事では、WebSphere Application Server での Ajax 開発向けに IBM がリリース
した最新のフィーチャー・パックを使用して、既存の J2EE アプリケーションの機能
を強化する例を紹介します。

図 1.0 に、Web 開発シナリオではかなり一般的な Web ベースのアプリケーション・
パターンを示します。このパターンでは、サーバーがブラウザーからのリクエストを
受け取ると、  クライアントにレスポンスを返します。     クライアントとしてのブラウザー
は、リクエストを送信した後、リクエストに対するレスポンスを待機します。通常、
レスポンスは HTML で、これはブラウザーでページをどのようにレイアウトするか
を指定するプレゼンテーション情報が含まれるメタデータに過ぎません。スタイル設
定が追加される場合には、その情報が CSS (Content Style Sheets) の形で返されます。
コンテンツはサーバー・サイドで作成されてからブラウザーに返されます。ページの
コンテンツは多くの場合、多数のバックエンド・ソースから集められます。さらに他
のドメインに対して Web サービス・リクエストが行われたり、            DB2、Derby、MySql な
どの永続データ・ストアに保管されているコンテンツに対して Web サービス・リク
エストが行われたりすることもあります。サーバーに返されるページには JavaScript
が含まれる場合もありますが、通常 JavaScript は、ページをよりインタラクティブに
見せるための補助的な役割として使用されます。


図 1.0: 典型的 Web アーキテクチャー




Ajax 設計パターンでは、サーバー・サイドで作成されるユーザー・インターフェース
の割合を減らし、ブラウザー・クライアントで作成される割合を増やすことができま



                                                              2
す。 表示可能なコンテンツの作成は、ブラウザーとサーバーとで共有できるからです。
Web アプリケーションのなかには、表示の大部分をブラウザー内で行うものもありま
す。その一例は、ローカル・オペレーティング・システムで実行されているような形
でスプレッドシート、文書、プレゼンテーションの機能を提供する Google Docs Beta
です。このようなアプリケーションでは、クライアントで実行されるウィジェット・
コードをカスタマイズして、静的 HTML と組み合わせています。図 2.0 に、Ajax が
典型的な Web ベースのアプリケーションにどのように影響を与えるかを示します。


図 2.0: Ajax によって機能強化された Web アプリケーション




Ajax モデルでは、ブラウザーのコンテンツはブラウザーでローカルに作成されます。
そのために JavaScript では、ドキュメント・オブジェクト・モデル (DOM) を操作し
ます。DOM は、ユーザーに表示する文書の表示方法を記述したもので、ブラウザー
が保持しています。DOM を更新すると、即座にブラウザー内でユーザーが見る表示
にその更新が反映されます。ブラウザー・サイドでは、この構造体は「ウィジェット」
という名前で知られています。ウィジェットはかつて、表示を操作したり、ユーザー
入力に反応したり、あるいはサーバーと非同期に通信したりするために使用できる自
己完結型コードと表現されていました。

ブラウザーに表示が委任されることから、今やブラウザーには情報を引き出すために
サーバーと通信する方法が必要になってきました。         例えば、  ウィジェットに Web テー
ブルがあるとします。このテーブルをデータベース・サーバーに格納されている複数
行のデータで更新する場合、JavaScript では XHR (XMLHttpRequest) と呼ばれる強力
な API を使用することができます。  XHR リクエストによって、       サーバーと、   ユーザー
が表示しているブラウザー・ページとの間に、独立した通信チャネルを確立すること
ができます。この API では XML やその他のテキスト情報を HTTP を使って転送で
きるため、サーバーはクライアントからのリクエストを通常のリクエストのように
扱ってレスポンスを返します。このレスポンスに、ウィジェットがブラウザーに表示
するデータを含めることができます。



                                                      3
IBM WebSphere Application Server Feature Pack for Web 2.0
の概要
IBM WebSphere Application Server Feature Pack for Web 2.0 が提供するのは、Ajax スタ
イルのアーキテクチャーを作成するための技術です。このフィーチャー・パックは、
WebSphere Application Server 6.1、6.0.2、および WebSphere Community Edition 2.0 に用
意されています。フィーチャー・パックの機能は、開発者やアーキテクトに、Ajax ス
タイルの Web アプリケーションおよびアーキテクチャーを作成するためのリソース
を提供することを目的としています。フィーチャー・パックには、クライアント・サ
イドのランタイムとサーバー・サイドの機能の両方が含まれています。図 3.0 に、
フィーチャー・パックのインストール・パネルを示します。



図 3.0: フィーチャー・パックのインストール・パネル




                                                                            4
クライアント・ランタイム – Dojo Toolkit、そして IBM による
拡張機能
フィーチャー・パックに含まれるクライアント・ランタイムは、ブラウザー・クライ
アント上で動作する技術で構成されています。これらの技術には、オープンソースの
Dojo Toolkit、そして追加機能をサポートするために IBM が用意した、Dojo Toolkit に
対する一連の拡張機能が組み込まれています。

Dojo Toolkit 1.0 (www.dojotoolkit.org) は、強力なオープンソースの JavaScript ライブラ
リーであり、このツールキットを利用すると、ブラウザー内で動作するリッチで多種
多様なユーザー・インターフェースを作成することができます。このライブラリーは
ブラウザー・サイドのランタイム・プラグインを一切必要とせずに、主要なあらゆる
ブラウザーでネイティブに動作します。このようにブラウザー実装ごとに異なる特徴
が抽象化されるため、JavaScript 開発者にとっては非常に役立ちます。

IBM のフィーチャー・パックに用意されているオープンソースの Dojo Toolkit は、以
下の 5 つのセクションに分けられます。

      Base および Core
      Dojo Toolkit のカーネルである Base を構成するのは dojo.js です。このファ
      イルはブラウザーへのダウンロードに時間がかからないように、小型化され
      た上で最適化されています。Base には、ブートストラップ、便利なユーティ
      リティー、イベント通知をはじめ、さまざまなアイテムが含まれています。

      Core には、多種多様なグラフィカル・インターフェース・ウィジェット、そ
      してサーバーへの XHR リクエストに対応する I/O トランスポートが含ま
      れています。

      Dijit
      Dijit には、Base と Core をベースとした豊富な追加ウィジェット・コント
      ロールが用意されています。コントロールは国際化およびアクセシビリ
      ティーにも対応しています。

      Dojox
      Dojo Toolkit の実験的側面を持つ Dojox は、いずれは Base または Dijit モ
      ジュールに組み込まれる可能性のある革新的なモジュールが含まれています。
      Dojox はある種のインキュベーターであり、新規フィーチャーのプレビュー
      と言えます。Dojox 内にあるモジュールの例をいくつか挙げると、グラフ作
      成モジュール、オフライン・ストレージ・モジュール、グリッド・モジュー
      ルなどがあります。

      Util
      Dojo のテスト用ハーネスが含まれる Util は、Dojo Toolkit に付属のウィ
      ジェットをテストするために使用することができます。

Dojo Toolkit の感触をつかむ最良の方法は、付属のテスト・サンプルを試してみること
です。サンプルはブラウザー内で直接開くことができます。これらのサンプルを開く
と、独自のカスタム・ウィジェットを作成したり、ツールキットに付属のウィジェッ
トを使用したりする上での信じられないほどの柔軟性と創造性を垣間見ることができ
ます。




                                                                   5
IBM による Dojo Toolkit の拡張機能
リッチなクライアント・サイドのアプリケーションを作成できるオープンソースの
Dojo Toolkit に加え、IBM では開発者に役立つ一連の JavaScript 拡張機能も用意して
います。

Atom フィード・ウィジェット
Atom ライブラリーは、Atom 配信フィードをレンダリングしたり、使用したりする際
に使うことが可能なクライアント・サイドのウィジェットです。このライブラリーに
は、開発者が独自のコードのなかで Atom フィードを利用する際に参考となるように、
以下のサンプル・コンポーネントが含まれています。

   •   基本ライブラリー。ユーティリティー関数や、JavaScript オブジェクトとして
       の Atom データ・モデルの実装、Atom フィードとの双方向通信に対処する
       ラッパー・オブジェクトなどを提供します。
   •   AppStore。アプリケーション・サーバーによってサポートされるデータ・スト
       レージ・ソリューションを提供する dojo.data API の実装です。

IBM ゲージ・ウィジェット
ゲージ・ライブラリーには、数値データを充実したグラフィックで表示するための 2
つのウィジェットが含まれています。AnalogGauge ウィジェットと BarGraph ウィ
ジェットは、ブラウザーに応じて SVG (Scalable Vector Graphics) または VML (Vector
Markup Language) のどちらかを使用し、表示範囲をカスタマイズ可能な数値データ、
目盛り、   そして任意のサイズのインジケーターを表示します。            IBM ゲージ ・ウィジェッ
トを使用すれば、動的に自己更新するグラフィック表示とダッシュボードを作成する
ことができます。

Atom ライブラリーと同じく、ゲージ・ライブラリーにもその機能を明らかにする複
数のサンプルとテスト・ケースが用意されています。図 4.0 は、IBM ゲージ・ライブ
ラリーの一例です。

図 4.0: IBM ゲージ・ウィジェットおよび IBM 棒グラフ・ウィジェット




                                                             6
IBM SOAP
IBM SOAP 拡張機能によって、クライアント・サイドのブラウザー・ウィジェットを
既存の SOAP ベースのサービスに接続することができます。 SOAP エンベロープ作成
のオーバーヘッドや、SOAP サービスを呼び出すためのリモート・プロシージャー・
コールは、この拡張機能が対処します。

IBM Open Search ライブラリー
IBM Open Search 拡張機能は、Open Search に準拠したサービスの呼び出し、そして
Ajax アプリケーション内での検索結果とウィジェットのバインドを容易にします。




サーバー・サイドのライブラリーおよび接続機能
これまで、IBM フィーチャー・パックのクライアント・サイドのランタイムについて
説明してきましたが、サーバー・サイドにも、クライアント開発を支援する豊富なラ
イブラリーと接続機能が提供されています。これらのフィーチャーには、以下のもの
があります。

Ajax プロキシー
フィーチャー・パックは、さまざまなサイトからのコンテンツを集約するために使用
できる、サーブレット・ベースのフォワード・プロキシーを提供します。プロキシー
の制御を可能にするため、プロキシーにはホワイト・リストの構成ファイルが含まれ
ています。このリストを使って、プロキシーにアクセスを許可するサイトを定義する
ことができます。さらに、プロキシーは HTTP ヘッダー、cookie、MIME タイプを基
準にフィルタリングを行うことによって、ブラウザー・ベースのクライアントに対し
てアクセスを許可するサイトを制御することもできます。

Java コンポーネントの Web リモーティング
Ajax スタイルのアーキテクチャーと J2EE を組み合わせる際に問題となるのは、       クラ
イアント・サイドのランタイムと J2EE の構成要素とのマッピングです。例えば、表
に情報を表示する JavaScript ウィジェットを JavaScript を使用して動的に作成する
とします。  表に必要なデータはサーバー上にあり、      そのデータには EJB を使用してア
クセスすることができますが、      これらの EJB 構成要素にはどのようにアクセスするの
でしょうか。

フィーチャー・パックには、サーバー・サイドの Web アプリケーションに組み込む
ことができるリモート プロシージャー コール アダプター (RPCAdapter) が JAR ラ
             ・            ・   ・
イブラリーとして提供されています。この RPCAdapter を使用すれば、POST や GET
などの HTTP リクエストを受け入れ、      そのリクエストをユーザーが作成したクラスに
直接マッピングすることが可能になります。RPCAdapter のなかでも強力な側面は、
EJB セッションと Collection データを、ブラウザー・クライアントに返される JSON
または XML ストリームにシリアライズできることです。そのため JSON および
XML データに、ウィジェットが表示する情報を含めることができます。




                                                       7
Apache Abdera ライブラリー
Apache Abdera は、フィード配信のサポートを提供するオープンソースのプロジェク
トです。Abdera は Atom 配信フォーマットと Atom 出版プロトコルの両方に対処し
ています。Abdera ライブラリーをサーバー上で使用することで、他のソースからの配
信フィードを読み取ったり、ウィジェットで使用する独自のフィード・コンテンツを
生成したりすることができます。


JSON4J
JSON4J ライブラリーは、Java 環境内で使用する一連の JSON 処理クラスの実装です。
このライブラリーを使用すると、独自の JSON データ・ストリームを派生させること
ができます。以下に挙げるのは、JSON4J ライブラリーが提供する機能です。

   •   単純な Java モデル。JSON としてレンダリングするデータを構成および操作
       するためのモデルです。

   •   XML と JSON との間の高速変換。JSON4J を使用して、Web サービスから
       の XML 応答を Ajax アプリケーションで使用しやすい JSON 構造に変換す
       ることができます。

       この変換の利点は、Ajax パターンのアプリケーションが、Microsoft® Internet
       Explorer での XML 変換のための ActiveX オブジェクトや、その他のプラッ
       トフォーム固有の XML パーサーに依存することなく、         JSON フォーマットの
       データを処理できるという点です。さらに、JSON フォーマットのデータはよ
       り簡潔になる傾向があるため、効率的な転送が可能になります。

   •   JSON ストリングおよびストリーム・パーサー。対応する JSONObject を生成
       し、それによって JSON 構造を Java で表現します。

Web メッセージング・サービス
Web メッセージング・サービスでは、パブリッシュ/サブスクライブ・パターンを使用
してブラウザーを WebSphere Application Server Service Integration Bus に接続し、サー
バー・サイドのイベントをブラウザーにプッシュします。クライアント・サーバー間
の通信には、Bayeux プロトコルが使用されます。Web メッセージング・サービスの
実装は、Comet サーバーの実装とみなすことができます。クライアント・サイドのサ
ポートは、Dojo Toolkit が提供します。

現在 Bayeux プロトコルをサポートする JavaScript ライブラリーは唯一、Dojo Toolkit
だけですが、Bayeux プロトコルのサポートを実装する JavaScript ライブラリーであ
れば、Web メッセージング・サービスと通信することができます。Web メッセージン
グ・サービス・サーバーがブラウザー・クライアントをサービス統合バスにつなげ、
このバスに接続された Web サービスやその他のアイテムが、Web ベースのクライア
ントにイベントをパブリッシュできるようにします。                   また、アプリケーション Web モ
ジュール内にユーティリティー・ファイル・ライブラリーの JAR を配置し、単純な
構成ファイルをセットアップし、サーブレット・マッピングを構成することで、新規
のアプリケーションでも既存のアプリケーションでも Web メッセージング・サービ
スを利用できるようになります。Web メッセージング・サービスは、WebSphere
Application Server 製品サンプルの Quote Streamer に組み込まれています。




                                                                    8
サンプル・アプリケーション: J2EE の例
典型的な Ajax ベースのアーキテクチャーと、IBM WebSphere のフィーチャー・パッ
クの目的および機能について一通り説明したところで、     今後はその概念が既存の J2EE
アプリケーションでどのように具体化されるのかを見てみることにします。

IBM WebSphere Application Server Feature Pack for Web 2.0 に付属の多数のサンプルの
なかに、  「Plants By WebSphere」というサンプル・アプリケーションがあります。この
サンプル・アプリケーションが表しているのは、花、木、野菜、およびアクセサリー
を注文し、購入できる架空のオンライン園芸店です。図 5.0 に、このアプリケーショ
ンのフロント・ページを示します。

図 5.0: PlantsByWebSpereAjax のフロント・ページ




図 6.0 は、アプリケーションに Ajax スタイルの機能を追加する前の、元のアーキテ
クチャーを示しています。これは、WebSphere Application Server 上で実行される極め
て典型的な J2EE アプリケーション用のアーキテクチャーです。このアプリケーショ
ンは上位レベルで MVC (モデル・ビュー・コントローラー) デザイン・パターンに従っ
ていますが、大部分の Web アプリケーションはいずれかのレベルでこのパターンに
従っています。  ブラウザーがアプリケーションの URL にアクセスすると、           アプリケー
ションは JSP によってレンダリングされた HTML ページを返します。さらに、ブラ
ウザーが Web アプリケーションに対してリクエストを発行し、ユーザーが商品を購
入するためのリクエストを行うところまで進んでいく際には、サーブレットを使用し
てフローが制御されます。                       ・
              データベース上にあるモデル データを提供するためには、
EJB が使用されます。



                                                                     9
図 6.0: Plants By WebSphere の典型的な Web アーキテクチャー




図 7.0 に、Ajax を使用して強化した後のアプリケーションのアーキテクチャーを示
します。

この強化の目的は、アプリケーションを再作成することではなく、IBM フィー
チャー・パックに用意された技術を利用してユーザー・エクスペリエンスを改善し、
対話性に優れたリッチなエクスペリエンスを作り出すことにあります。

図 7.0: Ajax とフィーチャー・パックの機能による拡張




ブラウザー サイドでは、
       ・     このアプリケーションは Dojo Toolkit に提供されているウィ
ジェットを使用しています。さらに、Plants By WebSphere を作成し直すことなくその
対話性を改善するために、カスタマイズされたユーザー・インターフェース・ウィ
ジェットも作成されています。  これらのカスタマイズされたユーザー・        インターフェー
ス・ウィジェットは非同期であるため、  Dojo Toolkit でサポートされているブラウザー
の XHR 機構を使用して通信します。ウィジェットがサーバーとデータを交換するた
めに使用するフォーマットは、XML 交換フォーマットです。サーバーでは、フィー
チャー・パックに提供されている RPCAdapter を使用して、EJB データを XML 交換
フォーマットに変換し、ブラウザーで新たに作成されたウィジェットが簡単にこの
データを使用できるようにします。

Ajax アプリケーションの 1 つの特徴は、ユーザー・インターフェースのレスポンス
が改善されることです。  Plants By WebSphere はアプリケーションのユーザー インター
                                               ・



                                                   10
フェースを改善するために、Web ブラウザー内で Dojo Toolkit を使用しています。
Dojo Toolkit は純粋な JavaScript であり、JavaScript ファイルを直接 WAR (Web
Archive) ファイルの Web-Content ディレクトリーに配置することも、パフォーマンス
が最適化されたコンテンツ配信ネットワークに静的 Web コンテンツとして置くこと
もできます。この例では、Dojo Toolkit JavaScript ファイルは WAR の一部として提供
されています。

Dojo Toolkit は宣言型で使用することも、          プロシージャー型で使用することもできます。
宣言型で使う場合は、使用する予定の JavaScript を HTML コンテンツのなかに直接
埋め込みます。Dojo Toolkit には、HTML 内で宣言するだけで使用できる豊富なウィ
ジェットが含まれており、           関数をハンドコーディングする必要が少なくなっています。
Plants By WebSphere の場合、Dojo Toolkit のウィジェットは JSP ページに直接埋め込
まれています。

例: Web フォームの処理
フォームの処理は、Web アプリケーションでは一般的なシナリオです。ユーザーが
Web ページに名前、住所、好みなどのデータを入力すると、その情報がサーバーに送
信され、サーバーで処理された結果がユーザーに返されます。フォームに対する一般
的なアクションとして、ユーザーが入力したコンテンツが正しいことを確認するため
の検証があります。例えば、文字の代わりに数字が入力されていないかどうか、正し
い郵便番号が入力されているかどうかなどの検証です。Dojo Toolkit には、Web ペー
ジに追加できる、フォーム処理のための豊富な検証機能が用意されています。以下に
挙げるのは、Plants By WebSphere アプリケーションで使用されている例です。この例
は、 Web アプリケーション内で Dojo Toolkit を宣言型で使う場合の典型的な方法を示
しています。

まず、     HTML ページのなかで Dojo の使用を宣言するところから始めます。           リスト 1.0
を見ると、最初の <script> タグが dojo.js を使用することを宣言しています。dojo.js
はコアとなる Dojo Toolkit カーネルなので、Dojo Toolkit を使用する場合には必ず必
要です。2 番目の <script> タグでは、ページで使用する Dojo ウィジェットを宣言し
ています。dojo.require 節は、Java の import 文、あるいは C++ の include 節に相当
します。この文が dojo.parser に指示している内容は、ページで使用する Dojo Toolkit
JavaScript ファイルを検索する場所です。この例の場合、ページは
dijit.form.ValidationTextBox ウィジェットを使用しています。さらに、JavaScript
dojo.parser も含める必要があります。このパーサーは、宣言が必要なウィジェットが
このページにないか調べるために使われます。リスト 2.0 は、その理由を説明してい
ます。

リスト 1.0: Dojo ValidationTextBox の使用宣言




                                                             11
リスト 1.0 は、Dojo Toolkit を JavaScript 内で宣言する方法と、ページで使用するウィ
ジェットのタイプを宣言する方法を示しています。リスト 2.0 は、このページのなか
でのウィジェットの宣言方法を示しています。リスト 1.0 で宣言された dojo.parser
はページをスキャンし、Dojo Toolkit から必要な JavaScript コードを埋め込んで動的
なフォームの検証を可能にするために使用されます。

リスト 2.0: Dojo ValidationTextBox ウィジェットの使用宣言




図 8.0 に結果を示します。ユーザーが必須フィールドに値を入力しないと、ブラウ
ザーがユーザーに値を入力するよう動的に通知します。


図 8.0




フォームの検証は、既存の J2EE アプリケーションのなかで、どのように Ajax を使
い始められるかを示す単純な例です。それと同時に、膨大な量の既存のコードを再作
成することなく、    ・
        ユーザー インターフェースをシームレスに改善できることを示す、
説得力のある例でもあります。

Dojo Toolkit を使用した宣言型のプログラミングを J2EE アプリケーションで使用す
る例は、    この他にも多数あり、   Dojo Toolkit の test ディレクトリーに多彩なサンプル・
アプリケーションが提供されています。これらのアプリケーションをブラウザー内で
実行するには、HTML ページを開いてください。




                                                       12
独自のカスタム・ウィジェットの作成
もう 1 つの興味深い例は、独自にカスタマイズしたウィジェットを作成することです。
HTML ページに直接組み込める革新的なウィジェットを作成する上で、Dojo は強力
なフレームワークになります。

図 9.0 に、Plants By WebSphere アプリケーションのカタログ閲覧ページを示します。
カタログ・ページの上部には商品の画像が並べられており、ユーザーが画像の 1 つを
クリックすると、その商品の詳細情報がページの下部に表示されます。

図 9.0: Plants By WebSphere のカタログ・ページ




このページは各種のウィジェットで構成されていますが、ここではページ下部にある
ItemDetails ウィジェットについて見ていきます (図 10.0)。itemDetail ウィジェットは
サーバーから情報を取得し、その情報を詳細ウィンドウに表示します。ユーザーはボ
タンをクリックして商品をカートに追加することも、左マウス・ボタンを使って商品
をカートにドラッグすることもできます。ユーザーが上部のカタログ商品のいずれか
をクリックすると、ウィジェットがサーバーから情報を取得します。それでは、この
ItemDetail ウィジェットがどのように作成されたのかを調べてみましょう。




                                                       13
図 10.0: ItemDetails ウィジェット




ウィジェットを作成する際には、検討しなければならないファイルが 3 つあります。
そのうちの 2 つは、HTML ファイルと CSS テンプレート・ファイルです。この 2 つ
のファイルを使用して、ウィジェットがブラウザー内にレンダリングされる際に、そ
のページをどのように見せるかの骨格を定義します。HTML ページには、ウィジェッ
トが DOM 要素を挿入する場所として宣言された接続ポイントが含まれることにな
ります。接続ポイントは、DojoAttachPoint と呼ばれます。

リスト 3.0 に示す部分は、ItemDetail ウィジェットの HTML テンプレートと、テー
ブルの行に対応する DojoAttachPoint です。カスタマイズされたウィジェットの
JavaScript は、コンテンツを処理しながら動的に要素を作成し、作成した要素を DOM
の接続ポイントに挿入します。




                                                14
リスト 3.0: ItemDetails.html Dojo テンプレート内での dojoAtachPoint




ウィジェットのテンプレートと CSS が、    ウィジェットの外観を定義し、DOM のどこ
が更新されるのかを特定します。次のステップは、実際の作業を行うウィジェットに
JavaScript コードを追加することです。

リスト 4.0 に、       カスタマイズされた ItemDetail ウィジェットの最初のセクションを記
載します。このコードはまず、作成するウィジェットを宣言しています
(dojo.provide("ibm.widget.ItemDetails");)。




                                                          15
新たに作成されるウィジェットを参照する際には、この名前が使われます。

dojo.provide の下には、dojo.declare があります。dojo.declare はこのウィジェットと、
このウィジェットが持っている可能性のあるすべての継承を定義します。この例で
コードが宣言しているのは、基底クラスの dijit._Widget および dijit._Templated から
の継承です。このウィジェットはテンプレート用のウィジェットなので、コードは
templatePath を宣言しています。テンプレート・パスは、上記で定義されたテンプレー
トの場所を定義します。dojo.moduleUrl は、テンプレートの場所を解決するために使
用されるユーティリティー関数です。

コードをさらに下に進むと、リスト 3.0 で定義された DojoAtachPoint が宣言されて
います。これらの宣言は、更新される DOM を参照する際のルート・ノードになりま
す。この例で宣言されているいくつもの変数のなかに、  nameElement と descElement が
あります。この 2 つの要素がどのように変更されるのかについては、次のセクション
で説明します。



リスト 4.0: ItemDetails ウィジェットの宣言




このウィジェットを実際に興味深いものにするためには、ウィジェットに入力する
データが必要です。ItemDetails ウィジェット用のデータはサーバー上にあります。こ
の場合、ページにレンダリングする商品説明用のデータを取得するにはどうすればよ
いでしょうか。

Dojo Toolkit が提供する強力な I/O トランスポート機構を利用することで、XHR
(XMLHttpRequest) リクエストをサーバーに送信し、結果を処理することができます。
XHR API は、ブラウザー内に独立した通信チャネルを開きます。XHR は Ajax の対
話動作を実現するための核心部分です。



                                                           16
リスト 5.0 は dojo.xhrGet 関数を使用してサーバーからデータを取得する方法を示し
ています。Dojo Toolkit は XHR API を独自の API でラップするため、XHR API が使
いやすくなります。url: が定義するのはサーバーのアドレスで、?p0="+item.id はサー
バーに渡される URL パラメーターです。timeout は、サーバーとの接続の試行を中止
するまでの待ち時間を定義します。headers は、サーバーに送信されるリクエストに適
用する追加の HTTP ヘッダーを定義します。handleAs はレスポンスの処理方法を
Dojo Toolkit に指示します。この例の場合に期待されるレスポンスは XML コードで
す。

deferred.addCallback(function(response) は、  サーバーからレスポンスが返ってきたとき
に Dojo Toolkit が呼び出すコールバック関数です。前のセクションでは
DojoAttachPoint を、   変更される DOM ノードの位置であると説明しました。                           この例で
変更される DOM ノードの 1 つは、                  descElement です。self.descElement.innerHTML の
値は、XML で返された商品説明用のテキストに設定されます。descElement は、先
ほどウィジェットの Template ファイルで宣言された DOM ノードです。リスト 3.0
を参照してください。

リスト 5.0: サーバーに対する XHR GET リクエスト




カスタマイズした Dojo ウィジェットを作成したら、そのウィジェットを使用できるよう
に HTML ページに挿入する必要があります。ウィジェットが挿入されたページは、図
10.0 のようになります。ここに表示されている内容は、flowers.html ファイルからのもの
です。リスト 6.0 に、このページの HTML フラグメントを記載します。ウィジェットを
組み込むために使用する DIV タグには、 ItemDetail ウィジェットを宣言する dojoType と




                                                                               17
いうキーワードが含まれています。ウィジェットには、追加パラメーターが url という形
で渡されていますが、これはサーバー上の RPCAdapter に対する URL リクエストです。
前にも説明したように、     ItemDetails ウィジェットはサーバーに対する XML リクエストに
よって、表示するデータをサーバーから取得します。サーバー・サイドのコードについて
は、RPCAdapter の使用方法について調べる次のセクションで説明します。




リスト 6.0: HTML ページでの ItemDetails の宣言




                                                    18
サーバー・サイドでの処理
これまで、カスタマイズしたウィジェットを Dojo で作成する方法、そしてそのウィ
ジェットが XHR リクエストをサーバーに送信する仕組みについて見てきました。こ
こからは、サーバーがウィジェットから受け取った XHR リクエストをどのように処
理するかについて見ていきます。

Plants By WebSphere アプリケーションの場合、ウィジェットは何らかのデータを取得
するためにサーバーに対して XHR リクエストを発行します。サーブレットがそのリ
クエストを読み取って、適切な EJB を検索します。EJB が呼び出されると、EJB コ
ンテナーがデータベースに対してリクエストを発行し、データベースが結果を返しま
す。この結果は、XML にエンコードしてからブラウザーの JavaScript ウィジェット
に返さなければなりません。

このシナリオでは、IBM WebSphere Application Server のフィーチャー・パックに提供
されているリモート・プロシージャー・コール・アダプター (RPCAdapter) を使用し
て Plants By WebSphere の EJB に接続します。

Plants By WebSphere アプリケーションに組み込まれている RPCAdapter ランタイム
JAR は、WAR ファイルの WEB-INF ディレクトリーに置かれている XML ファイル
によって構成されます。リスト 7.0 は、構成の一例です。

リスト 7.0: RpcAdapterConfig.xml




                                                       19
RpcAdapterConfig.xml ファイルをよく見てみると、まず、RPCAdapter によって返され
る <default-format> は XML として宣言されています。このアダプターは、データを
JSON (JavaScript Object Notation) で返すこともできます。<implementation> 要素には、
RPCAdapter がメソッドを呼び出すためにインスタンス化するユーザー定義クラスの
定義が含まれています。このクラスで呼び出されるメソッドの名前は、<name> 要素
に定義されているとおり、detailRequest です。RPCAdapter が想定している
<http-method> は GET です。URL リクエストで想定されるパラメーターは、
「message」という名前になっています。

以上の説明をまとめると、図 10.0 の ItemDetail ウィジェットは、以下のフォーマッ
トを使用して RPCAdapter を呼び出します (このフォーマットの F001 は、商品の ID
です)。




RPCAdapter によって返される結果は、XML データです。図 11.0 に、その XML 出
力を示します。

図 11.0: RPCAdapter から ItemDetail ウィジェットに返された XML 出力




今度は実装クラスの詳細を見てみましょう。RpcAdapterConfig.xml ファイルに定義さ
れたこのクラスには、detailRequest メソッドが含まれています。リスト 8.0 に、前の



                                                                 20
リストに記載した RpcAdapterConfig.xml 構成ファイルに定義されている実装クラス、
com.ibm.websphere.samples.plantsbywebspherewar.RpcConnecter を記載します。

リスト 8.0: com.ibm.websphere.samples.plantsbywebspherewar.RpcConnecter
実装クラス




                                                                   21
detailrequest( ) メソッドは、POJO 要素のコレクションを返します。Collection クラス
は java.util パッケージに含まれています。      データが返されると、 そこから POJO 要素
を抽出するために StoreItem EJB が呼び出されます。StoreItem は Catalog EJB から取
得されます。Catalog EJB は、Derby データベースにある Plants By WebSphere インベ
ントリー内に含まれる商品のコレクションです。Java Collection が返されると、
RPCAdapter は Collection をそのまま XML データにマッピングします。    Collection の
キーは XML 要素に対応し、キーの値は XML 値に対応します。そしてこの XML ス
トリームが ItemDetail ウィジェットに返されるというわけです。

RPCAdapter を使用し、このアダプターに XML を返させることで、他からも接続で
きるサービスを作成したことになります。このサービスは単にデータを返すだけで、
そのデータをどのようにレンダリングするかは、呼び出し側に依存します。使い方の
シナリオとしては、     例えば Plants By WebSphere の取引会社が、その会社所有の温室か
らのデータと Plants By WebSphere が維持管理するカタログ情報を集約するなどが考
えられます。このようなシナリオは、マッシュアップと呼ばれることもあります。


考慮する価値のあるその他のシナリオ
Plants By WebSphere アプリケーションでは以下に挙げるような特定のシナリオを実装
していませんが、これらのシナリオは、J2EE アプリケーションで IBM WebSphere
Application Server Feature Pack for Web 2.0 の利点を活用するための他の方法を理解す
る上で役に立つはずです。

プロキシー・サービス
この記事では、複数のサイトからのコンテンツを組み合わせて 1 つのサイトの外観を
作り上げる、マッシュアップ・アプリケーションの作成について簡単に触れました。
マッシュアップの典型的な例は、Google マップを利用して、ユーザー独自のロケー
ションをベースとしたコンテンツでカスタマイズするというアプリケーションです。
マッシュアップを作成する際の課題の 1 つは、ブラウザー内でのクロスサイト・スク
リプティングにどのように対処するかです。例えば、Plants By WebSphere アプリケー
ションを利用するために mydomain.com にアクセスするとします。ところが、作成さ
れたウィジェットは XHR を使って mypartner.com に XML リクエストを送信する
ため、ブラウザーはそのリクエストを禁止します。通常であれば、これは極めて適切
な動作です。なぜなら、この動作によって、Web 上のページにアクセスする際に生じ
るクロスサイト・スクリプティングに対する脆弱性を防止できるからです。

Plants By WebSphere の場合には、作成したウィジェットが他のサイトのコンテンツに
アクセスできるようにする必要があります。それにはブラウザー内で責任を持ってク
ロスサイト・スクリプティングを許可するにはどうすればよいのでしょうか。

一般的な方法の 1 つは、フォワード・プロキシーを使用することです。フォワード・
プロキシーはブラウザーからのリクエストを取得し、その URL を調べてからリクエ
ストを適切なドメインに転送します。ブラウザーの観点からすると、情報は同じドメ
インから送られてくるように見えますが、実際のところ、コンテンツのリクエストは
クライアントに代わってプロキシーが行っています。                 IBM WebSphere Application Server
Feature Pack for Web 2.0 に付属の Ajax プロキシーには、カスタマイズ可能なサーブ
レット・プロキシーが含まれています。

このプロキシーはサーブレットをベースとしており、 EAR ファイルに直接組み込むこ
とも、サーバー上で WAR ファイルとして実行することもできます。プロキシーには



                                                                       22
ホワイト・リスト機能も組み込まれているので、さらにこの機能も利用すれば、プロ
キシーが受け付けることのできるリクエストの種類を制限することもできます。      また、
このプロキシーには、ヘッダー、MIME タイプ、cookie に基づいてフィルタリングす
る機能もあります。プロキシーは、XML ファイルを使用してカスタマイズすることが
できます。

フィードの配信 – 世界を舞台にした情報配信
コンテンツを他のサイトで使用できるようにする Web 配信は、Web フィードと呼ば
れることがよくあります。通常、サイトが公開する Web フィードには、コンテンツ
のタイトルと簡単な説明が含まれます。ユーザーはコンテンツに興味を持って、その
リンクをクリックすると、さらに詳細な情報を読むことのできるサイトが表示されま
す。Plants By WebSphere アプリケーションの場合で言うと、Web フィードには、植え
付けに関するヒント、特価品、園芸の専門家によるブログなどを追加することが考え
られます。

IBM Feature Pack for Web 2.0 が提供する Apache Abdera ライブラリーには、独自の
フィードを開発する際に役立つ Atom 配信フォーマットおよび Atom 出版プロトコ
ルの実装が組み込まれています。

配信によるソリューションは、クライアント・サイドの実装を考慮に入れない限り、
完全なものにはなりません。そこで、IBM フィーチャー・パックでは Dojo Toolkit 拡
張機能の一部として、Atom Feed ビューアーを提供しています。このビューアーは、
フィードの表示機能を提供するウィジェットとして HTML に組み込むことができま
す。




参考文献
   •   WebSphere Application Server Version 6.x Feature Pack for Web 2.0
       http://www.ibm.com/software/jp/websphere/apptransaction/was/featurepacks/web20/

   •   Dojo Toolkit Web サイト
       http://www.dojotoolkit.org

   •   Dojo Toolkit の資料
       http://www.dojotoolkit.org/docs

   •   Apache Abdera
       http://incubator.apache.org/abdera/

著者について
Kevin Haverlock は、IBM WebSphere Application Server 製品のアーキテクト兼開発者で
す。彼は現在、IBM WebSphere Application Server Feature Pack for Web 2.0 チームに参加
しています。彼の連絡先は、kbh@us.ibm.com です。




                                                                                         23

								
To top