WebSphere PortalによるAjaxの使用

コンテンツ はじめに AjaxとWebSphere Portalが適合する理由 AjaxとWebSphere Portalが適合しない理由 設計に関する考慮事項 Ajaxツールキット Ajaxをポートレット・アプリケーションに追加する ポータル固有の考慮事項 まとめ リソース 筆者について（原文のまま）

Ajaxについての噂を聞いて、自分のポータル・アプリケーションに使用できないかと考えてはいませんか。この記事では、ポータルでのAjaxの基本的な使用方法について説明します。ポータルにおいて最もコストのかかる操作の1つが、ページの更新操作です。Ajaxを使用すると、多数のユーザー対話イベントを処理してからページの各部分に更新を適用できるため、ページ全体を更新する必要がなくなります。これにより、ポータルのパフォーマンスを向上させ、ポータル・アプリケーション全体のアーキテクチャーをよりクリーンに作成することができますが、一番重要なことは、こうしたレスポンスのよいポータルによってユーザーの満足度が高くなるということです。

はじめに

この記事では、Ajaxをポータル・アプリケーションに統合する概念について説明します。一般的ないくつかのAjaxの記事は既に入手できるため(『リソース』セクションを参照)、この記事の読者はAjaxの基礎を理解していることを前提としています。つまり、Ajaxとは何か、その名前の由来、Ajaxは新しい概念ではないという事実、Googleが世界中の経営者や技術者にこの技術を浸透させた方法について、既に理解しているという前提です。CTO(最高技術責任者)からの電話で、会社のポータル・アプリケーションがAjax対応なのかを尋ねられたとき、立ち上がって「もちろんです！」と即答できるように、ポータル・アプリケーションにおけるAjaxの使用に関する有益な情報をこの記事で提供します。

この記事を読んで、会社のポータルにAjaxを採用するかどうかを検討してください。この記事ではポータル・アプリケーションを中心に説明しますが、ここで述べるヒントは通常、ほとんどの複雑なアプリケーションに対して応用できます。この記事は、今後のチュートリアルを理解するための準備でもあります。今後のチュートリアルの中で、Ajaxポートレット・アプリケーションの作成について詳しく説明していきます。

本題に入る前に、次のことに注意してください。Ajaxについて普段目にする内容の多くは、本来のAjaxではなくDynamic HTML (DHTML)についての内容です。Ajaxはその本来の意味において、「XMLHttpRequest」という単一のJavaScriptオブジェクトで構成されています。このクラスは、サーバーとその結果応答に対するバックグラウンド通信チャネルを指定します。ドラッグ・アンド・ドロップ、DOMの更新、スタイリング、その他の先進的な技術など、バックグラウンド通信チャネル以外はすべてDHTMLによるものです。

上に戻る

AjaxとWebSphere Portalが適合する理由

ポータル環境で最もコストのかかる操作の1つが、ページの更新です。ユーザーがページ上でリンクのクリックやその他の操作を行った場合、ポータルは、対象となるポートレットに対して actionPerformed() メソッドを実行し、このページの各ポートレットに対して doView() メソッドを実行します。次に、この結果がポータルによって集約され、HTML文書全体がブラウザーに送信されます。

キャッシングによってオーバーヘッドの大部分が削減されますが、実行中のものも多数あります。Ajaxを使用すると、バックグラウンドで多数のユーザー対話イベントを処理してからページの各部分を更新することができます。その際、ポータル全体の更新サイクルは必要はありません。この技術によって各操作の応答性を高めることで、エンド・ユーザー・エクスペリエンスやアプリケーション全体のパフォーマンスを大幅に改善することができます。特定の状況においてAjaxを使用すると、アプリケーション全体のアーキテクチャーが一層クリーンになります。2次Ajaxコントローラー(サーブレットやWebサービスなど)を使用すると、モデル・コードはより厳密に分割されます。

完全なAjaxコントローラーの設計をアプリケーションに適用する場合、Ajaxコントローラーによってすべての基本ユーザー入力操作とセグメント化された表示の更新を処理する必要があります。ページ・レベルの移行時または主要な状態変更を処理する場合に限り、ポータルの actionPerformed() メソッドを使用します。

上に戻る

AjaxとWebSphere Portalが適合しない理由

ではなぜ、高機能なインターネット・アプリケーションに、この新しい流行の技術を使用しないのでしょうか。あらゆる技術情報の週刊誌でAjaxがいいと紹介され、会社の上司からは「我々の業務目標の1つ」だから使用するようにと指示されているかもしれません。そのため使用してはいけないとは言いませんが、いくつかの落とし穴の可能性について理解しておく必要があります。

• 複数のコントローラー(ポートレット、サーブレット、Webサービスなど)を使用することにより、アプリケーションがより複雑になる。
• Ajaxを使用した場合、クライアントで多数のロジックを処理する必要がある。
• 特にクロス・ブラウザー環境において、JavaScriptのデバッグが難しくなる可能性がある。
• アクセシビリティの問題とモバイル・デバイスを考慮し、冗長コードの使用が必要になる場合がある。多くのスクリーン・リーダーやその他の補助装置がJavaScriptまたはAjaxに対応していないため、代わりの機能が必要になる。
• アプリケーションによっては、ブラウザーに対する余分なデータ更新がページ間で必要ではない場合がある。

ここで重要なのは、慎重に行うことです。多少の変更を行ってもかまわないアプリケーションを用意し、ユーザーのフォームやウィザードに簡単なAjax機能を追加してみてください。少しの工夫で効果的なユーザー拡張が作成できるということを理解すれば、ポータル・アプリケーションに対して実際に仕掛けを追加する準備ができたことになります。

上に戻る

設計に関する考慮事項

ポータル・アプリケーションにAjaxを追加する場合、複数のコントローラーを従来のMVCパターンに効果的に追加することになります。この場合、モデル・ロジックをクリーンに分割するという潜在的な利点があります。マイナス面は、より複雑になるということと、コントローラーを次の3つのアスペクトに分割せざるを得ないということです。

• ポートレット
• サーブレットまたはWebサービス
• JavaScriptベースのクライアント

上に戻る

Ajaxツールキット

Ajaxを実装するマイナス面の1つとして、適切なクロス・ブラウザーのJavaScriptの作成が難しいことが挙げられます。Ajaxの抽象化を実現するJavaScriptやDHTMLの各種ツールキットがありますが、実際には種類が多すぎて、どのツールキットが現在のニーズに最適かをテストすることはできません。すべてのオープン・ソース・プロジェクトと同様に、これからの数年間で淘汰されるでしょう。

最も有望な品質の高い設計ツールキットとして、これまでに次の製品を使用してきました。Dojo、Rico、DWR (『リソース』セクションを参照)です。DoJoを使用するのは、Aspectのような高度なアーキテクチャーが使用されているためです。DWR (Direct Web Rendering)には、クライアントのJavaScriptからホスト・ベースのJavaBeansを参照する簡単な機能が備わっています。この他にも多数の製品が利用できます。現在の環境にはどの製品が適切であるかを判断する必要があります。

上に戻る

Ajaxをポートレット・アプリケーションに追加する

ポータル・アプリケーションにAjaxを実装するには、次に示す簡単な手順に従います。次の説明は、AjaxサーブレットにポートレットWARファイルをバンドルすることを前提としています。

1. Ajaxサーブレットの作成と定義を行う。
2. サーブレットをポイントするJavaScript参照変数を定義する。
3. 外部のJavaScriptファイルをロードする。
4. Ajaxフレームワークを実装する。

1.Ajaxサーブレットの作成と定義を行う

サーブレットにポートレットのWARファイルをバンドルするプロセスは非常に簡単ですが、経験豊富なポートレット開発者でさえ、常にすべての詳細を理解しているわけではありません。このためここでは、完全で安全な詳細を示します。

1. リスト1のとおり、サーブレットをweb.xmlファイル内に定義します。
2. サーブレットをJARファイルまたはクラスに組み込みます。

<servlet>
  <servlet-name>MyAjaxServlet</servlet-name>
  <display-name>MyAjaxServlet</display-name>
  <description></description>
  <servlet-class>
    com.ibm.ajax.MyAjaxServlet
  </servlet-class>
</servlet>
<servlet-mapping>
  <servlet-name>MyAjaxServlet</servlet-name>
  <url-pattern>/Ajax</url-pattern>
</servlet-mapping>

2. サーブレットへのJavaScript参照を定義する

グローバル参照(リスト2参照)をJSPファイル内に定義し、ポートレット要求ライブラリーにアクセスできるようにする必要があります。グローバル変数を定義した後は、組込まれたJavaScriptにより、その参照を使用してサーブレットを安全にポイントできます。

<script type="text/javaScript">
  var PATH = "<%= request.getContextPath() %>";
  var Ajax_SERVLET = PATH + "/Ajax";
</script>

3. 外部のJavaScriptファイルをロードする

ポートレット・ページに追加する外部リソースと同様に、リスト3のとおり、URLをエンコードしてベース・コンテキストを設定します。

<script type="text/javascript"
  src="<%=renderResponse.encodeURL(
          renderRequest.getContextPath() + "/js/myajax.js?v1.1.2")%>" >
</script>

ヒント： JavaScriptパラメーターに文字列引数を使用して、各ロード処理時にブラウザーによるキャッシュの更新処理を実行します。頻繁に変更される可能性のあるJavaScriptがある場合、この更新処理により、キャッシュされた古いコードがブラウザーで使用されなくなります。この例ではバージョンID (?v1.1.2) を使用していますが、どんな文字列でも機能します。

4. Ajaxフレームワークを実装する

いくつかの定型的な操作を実行することにより、Ajaxの機能を実行することができます。ここで、概要を説明します。コードの説明については、今後の追加のチュートリアルを参照してください。

1. グローバル・オブジェクト変数XMLHttpRequestを作成します。通信はすべて非同期であるため、各Ajaxイベントに対して固有の変数を定義する必要があります。
2. プロセスをトリガーするイベントを定義します。通常、入力タグのJavaScriptイベントを使用します。
   例: <input onChange='eventHandlerFunction()' ... >
3. このイベントを処理する関数を定義します。具体的には、次のタスクを実装するように定義してください。
   • XMLHttpRequest (xhr) オブジェクト変数のインスタンスを作成する。この詳細は、ブラウザーごとに異なります。これについては、今後のチュートリアルで説明します。
   • xhrコールバック関数を設定する。xhr.onreadystatechange()
   • サーブレット、型、パラメーターを設定する。xhr.open(), xhr.setRequestHandler(), and xhr.send()。
4. 通信状態や応答データを処理するコールバック関数を定義します。
   • この関数は、コールの開始時、接続の確立時、応答の受信時など、様々な通信状態の変化を処理します。
   • 応答の処理は通常、返されたXML(または他のコンテンツ)の解析と、このデータを使用したDOMツリーの更新から構成されています。

図2は、各部分がどのように関連しているかを示したものです。

上に戻る

ポータル固有の考慮事項

Ajaxをポータル・アプリケーションに実装する際に、注意するべき問題がいくつかあります。

グローバルJavaScript変数

通常の場合、ポータル・アプリケーション内のJavaScriptにはグローバル変数を使用しないようにします。ポータルにより、複数のポートレットが1つのページに集約されているためです。グローバルのJavaScript変数(リスト4を参照)のネーム・スペースを指定する場合が、そのいい例です。この場合、同じポートレットが同じページ上に2度デプロイされる場合でも、変数名が固有になるように指定します。

// Global XMLHttpRequest variable
var <portlet:namespace />xhrFieldsRequest;

Ajaxツールキットを使用している場合、抽象化層によって名前の競合が解決されます。

ID属性の使用

ページの一部を素早く更新する際に、Ajaxでは通常、ID属性が使用されます。HTMLタグで囲まれたID属性はDOMに対してグローバルであるため、これらのID属性が確実に固有の値になるようにします。重複したID属性が存在する場合、その結果は予測できず(通常は、望まない結果になります)、その問題の追跡は非常に困難になることがあります。

安全のため、リスト5に表示されているように(コードが読みづらくなることもありますが)、すべてのID属性にネーム・スペースを指定します。

<h1 id="<portlet:namespace />header">Hello</h1>
<script type="text/javascript">
  var x = document.getElementByID
    ("<portlet:namespace/>header");
  x.innerHtml = "GOODBYE!";
</script>

状態のメンテナンス

ページの一部を素早く更新する際に、Ajaxでは通常、ID属性が使用されます。HTMLタグで囲まれたID属性はDOMに対してグローバルであるため、これらのID属性が確実に固有の値になるようにします。重複したID属性が存在する場合、その結果は予測できず(通常は、望まない結果になります)、その問題の追跡は非常に困難になることがあります。

安全のため、リスト5に表示されているように(コードが読みづらくなることもありますが)、すべてのID属性にネーム・スペースを指定します。

セッション・データの共有

サーブレットにポータル・アプリケーションをバンドルすると、サーブレットとポートレットの間でセッション・データを共有できます。通常、セッション・データを共有する場合は、アプリケーション・スコープを使用します。サーブレットに対して、これが通常のセッション・スコープになります。サーブレットからポートレット・スコープ変数にアクセスするには、特別なネーム・スペースが指定された名前の値が必要になります。これは、ポータルに最初にデプロイされたときに設定されたポートレットIDに基づいた値です。開発中にこの値を抽出するのは、非常に困難です。あまり実用的ではありませんが、ポートレット・スコープ変数の構文は次のとおりです。

javax.portlet.p.<ID>?<NAME>

それぞれの値は、次のとおりです。

<ID> は、ポートレットに固有のIDです。

<NAME> は、ポートレット・セッションでオブジェクトを設定するときに使用されます。

アクションURL

Ajaxを使用している場合、アクションURLの処理には細心の注意が必要になることがあります。一般に、アクションURLは現在の doView() に対してのみ有効であるため、共有セッション内にアクションURLを格納しないでください。セッション内に格納されたアクションURLを前のサイクルの doView() から使用しようとすると、予期せぬ結果が発生します。

アクションURLをセッション内に格納してもかまわない場合の例として、データ・セットの一部としてアクションURLのリンクが含まれているAjax駆動型のページング・データ・テーブルが挙げられます。ユーザーが「次へ」をクリックすると、ブラウザーによってサーブレットへのAjaxコールが生成されます。その後、サーブレットによってセッションから次ページのデータが抽出されるため、あらかじめアクションURLを定義しておく必要があります。doView() コールが処理されるたびに、アクションURLを保持するセッション・データが再生成されるようにする必要があります。

アクティビティーの通知

集約した情報が単一ページに詰め込まれた場合、ポータル・ページが非常にビジー状態になることがよくあります。バックグラウンドで実行されているAjaxコールはブラウザーのアクティビティー・アイコンをトリガーしないため、ユーザーに何らかのアクティビティーが実行されていることを一貫した表示方法で通知する必要があります。通知しない場合、アプリケーションがアクションの処理中でビジー状態になっていることを知らずに、ユーザーが混乱してしまう可能性があります(ユーザーを混乱させることは避けるべきです)。

この通知は、アクティビティー中にフローティングDIVセクション表示を使用したり、ブラウザーのステータス・バーに単純なメッセージを使用することにより(この方法は一部で不適切な形式だと考えられていますが)、実装することができます。そのページのAjax対応ポートレットに対して、一般的な「お待ちください」というメッセージを表示するカスタムのテーマ拡張を統合することも可能です。

上に戻る

まとめ

この記事では、ポータル・アプリケーションにおけるAjaxの使用方法と使用する理由を説明しました。今後の関連チュートリアルでは、すべての部品をまとめてAjax対応データベース管理ツールを作成する方法を説明する予定です。こちらもぜひ参照してください。

上に戻る

リソース

		Introduction to Ajax on DeveloperWorks(US)
		Dojo(US)
		Rico(US)
		DWR(US)
		script.aculo.us(US)
		Behaviour(US)
		Zimbra(US)
		CLEARNOVA Basic AJAX Exanples(US)
		http://www.yourhtmlsource.com/javascript/ajax.html(US)
		http://en.wikibooks.org/wiki/Programming:Ajax(US)
		Mozilla Developer Center(US)
		Ajax in Action(US)
		Dynamic HTML, The Definitive Guide, O'Reilly(US)
		JavaScript, The Definitive Guide, O'Reilly(US)
Build enterprise SOA Ajax clients with the Dojo toolkit and JSON-RPC(US)

		IBM alpheWorks: Ajax Toolkit Framework(US)
		eclipse.org: Ajax Toolkit Framework(US)

上に戻る

筆者について(原文のまま)

		Karl Bishop is a Senior Software Engineer on the IBM Web Enablement and Support team. He works from the wilds of North Carolina. Karl works on various internal and external portal based applications, as well as being a strong proponent of Linux based solutions.

		Doug Phillips is an Advisory Software Engineer for IBM's elite group of skilled professionals known as IBM's Web Enablement and Support team. He has worked in many organizations within IBM and currently designs and develops both internal and external WebSphere Portal applications using IBM middleware and Linux. Doug is WebSphere and DB2 certified.

上に戻る