お客様が developerWorks に初めてサインインすると、プロフィールが作成されます。プロフィールで選択した情報は公開されますが、いつでもその情報を編集できます。お客様の姓名（非表示設定にしていない限り）とディスプレイ・ネームは、投稿するコンテンツと一緒に表示されます。

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

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

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

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

My developerWorks：

通知：

サイン・アウト

言語を選択する：

再利用と再配布が可能なコンポーネントを Dojo とAjax で作成する

Manish Kataria (mkataria@in.ibm.com), System Software Engineer, IBM

Manish Kataria は IBM ISL の Lotus Connections Activities Team に所属しています。

概要： この記事では、コア・アプリケーションと容易に統合できる再利用可能なコンポーネントを Dojo とAjax を使って作成する方法を学びます。あるサンプル・ケースの手順を追いながら、既存のブログ・アプリケーションにメール機能を追加し、メール・ウィジェットを生成し、そして面倒なクロスドメインの通信の問題を処理する Web アプリケーションの作成方法を説明します。

タグを付ける!

日付: 2008年 6月 10日
レベル: 中級
この記事の原文: 英語
アクティビティー： 1781 ビュー
お気軽にご意見・ご感想をお寄せください：

はじめに

既存のアプリケーションに機能を追加する作業は、間違いなくソフトウェア開発の中で最も困難な作業の 1 つです。既存のコードを変更しないように注意する必要があり、しかも機能追加による変更は、使いやすさとパフォーマンスに関するすべての要求を満足できるものでなければなりません。この記事では、Web プロジェクトの後半の段階で新しい機能を導入する方法と、その新機能のための変更を既存のプロジェクトとシームレスに統合する方法を学びます。

この記事で説明する方法は、ソフトウェア開発のライフサイクルのうち、次のような段階で特に有効です。

開発段階。顧客は開発チームに対して、製品の使いやすさを向上させる新しい機能を統合するように要求します。(反復型でアジャイルな開発方法がプロジェクトで使われるようになると、こうした事態は他の開発方法を使用した場合よりも一般的になります。) 新しい機能を迅速に分析、統合する必要があり、しかもそれを短時間に、そのアプリケーションの堅牢性と標準性を犠牲にすることなく行う必要があります。
保守段階。機能の追加と削除が頻繁に行われます。開発チームは、ある特定の顧客に対して一部の機能を削除したり、あるいは追加したりするように求められるかもしれません。その他のカスタマイズが求められる場合もよくあります。

開発チームは問題に関する記述にひととおり目を通した後、製品あるいはアプリケーションのコア機能を処理するコードを変更せずに追加や削除が可能な、柔軟なアーキテクチャーを作成する必要があります。理想的には、コア機能に関するコードは (そのコード部分のテストや安定化のために既に費やされた時間を考えれば) 何も変更すべきではありません。この記事ではサンプル・ケースをとおして、そうしたアプリケーションを作成する方法と、それにまつわる課題の概要を説明します。

上に戻る

サンプル・ケース

現在稼働中のブログ・アプリケーションがあります。顧客は、このブログ・システムにメール機能を追加したいという、新しい要求を持っています。顧客はメール・サーバーを持っており、2 つのアプリケーションを何らかの方法で統合したいと思っています。顧客の希望は次のとおりです。

ユーザーが有効な URL をクリックするとウィンドウがユーザーに表示されること
そのウィンドウにはメール・ウィジェットが提供するすべてのオプションが含まれていること
そのメール・ウィンドウからメール・サーバーにメッセージを送信できること

課題

開発チームは、メール機能を追加するためにブログ・システムのコア機能を変更するという危険を冒すことはできません。都合の悪いことに、開発チームはコア機能を開発したときにサードパーティー製のソフトウェアを使用しており、このソフトウェアはソースコードを変更できないため、状況はさらに困難になっています。しかも会社の上層部は、既存のプレゼンテーション層やビジネス層を変更することに難色を示しています。

ソリューション

開発チームが取り得る方法は 2 つあります。図 1 に示す方法では、コア機能と新機能は緊密に統合されていません。このアーキテクチャーでは新しい機能とコア機能は疎結合になっています。

図 1. 緊密に統合されていない、コア機能と新機能

図 2 に示す方法では、コア機能と新機能が緊密に統合されています。このアーキテクチャーでは、新しい機能は元々のコア機能の一部となっています。

図 2. 緊密に統合されている、コア機能と新機能

開発チームは最初の方法 (図 1) を採用することを決定します。この方法は疎結合のアーキテクチャーに関わるあらゆる利点 (例えばコードを再利用できることなど) を備えており、またテストのために必要な作業が少なくてすみます。

Dojo

Dojo、または統合ツールキットは、JavaScript で作成されたオープンソースの DHTML ツールキットです。Dojo を利用すると、Web ページや、通常の形で JavaScript をサポートする任意の環境に動的機能を容易に組み込むことができます。Dojo が提供するコンポーネントを利用することによって、Web サイトのユーザビリティーや応答性、機能性を高めることができます。また、分解可能なユーザー・インターフェースを容易に作成することや、対話型のウィジェットを迅速にプロトタイプ化することができるため、移行を行いやすくなります。Dojo の下位レベル API と互換層を利用すると移植可能な JavaScript を作成することができ、さらに複雑なスクリプトを単純化することができます。Dojo には複数のエントリー･ポイントが用意されていると同時に、Dojo はインタープリターに依存せず、将来を見据えた API を備えており、Dojo を導入する上での障壁をなくすことに力が注がれています。詳しくは「参考文献」を参照してください。

開発チームは Dojo ツールキットを使用してウィジェットを開発し、それらのウィジェットをメインのアプリケーションと疎結合になるように統合します。彼らが Dojo を選択する理由は次のとおりです。

Dojo は JavaScript ベースのツールキットであり、統合を容易に行えるという要件に適っています。単に JavaScript を含めるだけで、大部分の開発作業にとっては十分な、リッチな API を実現できるようになります。Dojo を利用することで、アプリケーションの中に統合するための努力をほとんど、あるいはまったく必要とせずに、驚くほどリッチで素晴らしい外観のウィジェットを作成することができます。
Dojo は Ajax をサポートしています。そのためアプリケーションの応答性が高まり、また全体的な効率が改善されます。さらに重要な点として、Dojo を使うとメインのアプリケーションとの対話動作を非常に高速に行うことができます。
Ajax が初めての人のために説明すると、Ajax は対話型の Web アプリケーションを作成するために使われる、Web 開発のための手法です。Ajax を利用すると Web ページの応答性が高まるように見えます。これは背後にあるサーバーとの間で交換されるデータ量が少なくなり、ユーザーが変更を要求するたびに Web ページ全体をリロードしなくてもよくなるためです。このようにする理由は、Web ページの対話性や速さ、機能、そしてユーザビリティーを高めるためです。Ajax に関する詳細は「参考文献」を参照してください。

Dojo ウィジェットを追加する

まず、Dojo をセットアップする必要があります (セットアップに関しては「参考文献」を参照してください)。セットアップができたら、以下のことを行います。

.js ファイルを作成する必要があります。コーディング作業の大部分は、このファイルに対して行われます。必要な機能を組み込むには、単純にこの .js ファイルをプレゼンテーション層 (jsp、HTML など) に含めます。

プレゼンテーション層に Dojo のライブラリーがインクルードされないようにするために、ステップ 1 で作成した .js ファイルの中に Dojo のライブラリーをインクルードします。リスト 1 は dojo.js をインクルードするためのサンプル・コードを示しています。

リスト 1. dojo.js をインクルードできるようにする

                        
function addOnJsFiles(file)
{
	var scriptTag= document.createElement('script');
	scriptTag.src  = file;
	scriptTag.type = 'text/javascript';
	scriptTag.defer = true;
	document.getElementsByTagName('head').item(0).appendChild(scriptTag);
}

/*Take special care that you have not included the dojo.js in the jsp also, as this
 is known to cause problem in IE though it works fine with Firefox. If  you have 
 included both dojo.js and the .js file in which this function is to implemented, 
 you should remove inclusion of dojo.js from jsp file.*/

ディレクトリーの構造によっては、リスト 1 を呼び出す必要があるかもしれません (リスト 2)。

リスト 2. リスト 1 の関数を呼び出す

                        
addOnJsFiles('js/dojo/dojo.js');  
/* Take care of the directory structure */

構文解析の機構を利用すると、ユーザーが画面上に表示しているすべての E メール・アドレスを知ることができます。このために JavaScript の正規表現を使うことができます (リスト 3)。

リスト 3. 有効な E メールのパターンをすべて検索する
var email = /(([a-zA-Z0-9_\-])+\@(([a-zA-Z0-9\-])+\.)+([a-zA-Z0-9]{2,4})+)/g

E メール・アドレスを label タグの中にラップするコード・スニペットを作成します (リスト 4)。

リスト 4. 有効な E メールのパターンをすべて置き換える

                        
 var htmlContent = document.body.innerHTML;
 htmlContent=htmlContent.replace(email, "<label onclick= 
    "sendmail('$1')\">$1</label>");
 document.body.innerHTML=htmlContent;

sendmail 関数を使って、基本的なビジネス・ロジックと、Dojo ウィジェットの作成と表示を行うコードをインクルードします。どのウィジェットと API を使用するかに応じて、そのウィジェットに必要なファイルをインクルードします。リスト 5 はその一例を示しています。

リスト 5. 必要なパッケージをインクルードする
dojo.require("dojo.widget.*"); dojo.require("dojo.event.*"); dojo.require("dojo.widget.Button"); dojo.require("dojo.widget.Editor2"); dojo.require("dojo.widget.Textbox");
特定のウィジェット・ライブラリー (dojo.widget.Button など) をインクルードする場合であっても、dojo.widget.* のようなパッケージをインクルードする必要があります。この動作は Java や他の言語とは異なります。dojo.require メソッドは JavaScript コードを動的に取得してページの中にロードします。もし dojo.widget.* と dojo.widget.Button とをインクルードしないとランタイム例外が発生しますが、これは一般的なウィジェット・ライブラリーがロードされていないためです。

Dojo には、ウィジェットを作成するための方法が 2 つ用意されています。

ウィジェットの親 ID をコンストラクターの中に渡す方法 (リスト 6)。ここで言う「親」は、このウィジェットの接続先の DOM 要素という意味です。

リスト 6. Dojo ウィジェットの作成

                                
var tmpDiv = document.getElementById(divid);
var FloatingPaneWidget = dojo.widget.createWidget("FloatingPane", 
	{ 
		id:"pane1",windowState:"minimized",
		title:"Send Email", hasShadow: "true", 
		resizable:"true",displayMinimizeAction:"true", 
		toggle:"explode",constrainToContainer: "false" 
	},
	tmpDiv);

プログラムによってウィジェットを作成し、それを逆に DOM 構造の中に挿入する方法 (リスト 7)。

リスト 7. Dojo ウィジェットの作成

                                
var newEditor = dojo.widget.createWidget('Editor2');
var layoutWinEd2 = dojo.widget.createWidget("LayoutContainer",
   {layoutAlign:"top"});
layoutWinEd2.addChild(newEditor);

リスト 7 では、エディターをレイアウト・コンテナーに追加しています。メール・ウィジェットに接続するために、次のコードを含めます。

FloatingPaneWidget.addChild(layoutWinEd2);

Dojo では、ビジネス・ロジック (E メールを送信するための実際のコード) を追加するために、Dojo ツールキットが提供する基本的なメソッドと共にビジネス・ロジックのメソッドを追加できるようになっています。カスタマイズしたメソッドを追加するためには次のようにします。

dojo.event.connect(SubmitButtonId,"onClick", "codeForSendingMail");

onclick イベントを処理する関数を作成します (リスト 8)。

リスト 8. イベントを処理するためのサンプル・コード

                                    
function codeForSendingMail () {
	alert("Special handling for onclick ...");
    ...Your logic goes here
 }

最後に、ウィジェットを表示するためには次のコマンドを使います。

dojo.widget.byId('pane1').show();

非同期にデータを送信するためには dojo.io ライブラリーを使います。このライブラリーには、フォームのデータを bind メソッドによって非同期に送信するための、非常に単純なインターフェースが用意されています。リスト 9 はその一例を示しています。

リスト 9. イベントの処理

                        
var myform = dojo.byId("myform");
dojo.io.bind({
 url: xyz.com, 
 /* This is not required if the form has an action element defined */
 formNode: myform,
 method: myform.method,  /* Get or Post */
 load: myCallBackFuntion,
 error: function(type, error) 
 { 
	alert("Error: " + type + "n" + error); 
 }	
});

Dojo は、クロスドメインの通信をサポートしています。アプリケーションはさまざまなドメイン (アプリケーション・サーバーやメール・サーバーなど) にまたがって通信する必要があるため、開発チームは Dojo の XhrIframeProxy ライブラリーを使う必要があります。リスト 10 のコードを、先ほど作成した .js に追加します。

Iframe に関するすべての作業を行う dojo.io.XhrIframeProxy をインクルードし、Dojo の bind 関数を次のようにします。

dojo.require("dojo.io.XhrIframeProxy");

リスト 10. Dojo の bind の呼び出し

                        
dojo.io.bind({
  IframeProxyUrl: http://externalDomain/myhtml.html,
  url:http://externalDomain/path/myservlet.do,
  content: 
  {
	To:toVal, From: fromVal, CC: ccVal, BCC:bccVal, Subject: subVal, Message: 
	   messageText
  },
  load: showSucessMessage,					
  error: showErrorMessage,
  method: 'POST',
  mimetype: "text/html"
});

IframeProxyUrl は、HTML ファイルが置かれた外部ドメイン上の場所で、この場所には許可を行うための関数 (isAllowedRequest) を実装した .js も置かれています。

externalDomain ドメインの myhtml.html という HTML ファイルは、ある 1 つの .js ファイルを含めることで、あるいは script タグの中で直接、この関数 (リスト 11) を実装する必要があります。

リスト 11. リモートの html に含める必要のある関数

                        
function isAllowedRequest(request){
	/*
		Return true if you want to allow cross domain interaction, 
		else return false
	*/
}

まとめ

この記事では、オリジナルのコード・ベースを変更せずにフローティング・ペイン (Dojo ウィジェット) を追加し、それを逆にメインのアプリケーションに統合するための方法を学びました。この方法による開発の利点は次のとおりです。

さまざまなチームがプロジェクトの別々の部分に対して作業を行うことができるため、異なるモジュールを並列に開発することができます。こうした仕組みにより、他の部分に依存しない再配布可能なコードの開発と統合が可能になります。
テストと受け入れのための作業を大幅に減少させることができます。テスターはアプリケーション全体を再テストするのではなく、統合される新機能のみに集中することができます。
ビジネスの要件に応じて柔軟なカスタマイズを行うことができます。アドオン機能はいつでも追加、あるいは削除することができます。

参考文献

学ぶために

Dojo のすべてを学ぶために Dojo のデモを見てください。
Dojo の FAQ を見てください。
「Develop HTML widgets with Dojo」(Igor Kusakov 著、developerWorks、2007年2月) は Dojo を使って HTML ウィジェットを作成するための基本を、画像の参照方法や HTMLのページにイベント・ハンドラーを追加する方法、複合ウィジェットの扱い方などを含めて説明しています。
ケース・スタディー「Develop a Web application using Ajax with Dojo and DB2」(Leons Petrazickis 著、developerWorks、2007年2月) を活用してください。Linux、UNIX、そして Windows 用の IBM DB2 9 と、XQuery、PHP、そして Dojo JavaScript Framework を利用して、スマートで応答性の高い Web アプリケーションを素早く作成するための方法を学ぶことができます。
「Build apps using Asynchronous JavaScript with XML (Ajax)」(Naveen Balani と Rajeev Hathi の共著、developerWorks、2005年11月) は、本を注文するためのサンプル・アプリケーションの作成手順を追いながら、リアルタイムで、しかもページを更新せずに検証を行う機能を備えた Ajax ベースの Web アプリケーションを作成するための方法を解説しています。
テクノロジー・ブックストアーには、この記事や他の技術的な話題に関する本が豊富に取り揃えられています。