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

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

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

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

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

My developerWorks：

通知：

サイン・アウト

言語を選択する：

IBM Lotus Domino 用の Web 2.0 クライアントの開発

Raj Balasubramanian, Consulting IT Architect, IBM

Raj Balasubramanian は IBM Software Group の Consulting IT 設計者です。顧客との契約に基づき、アプリケーションおよびプロジェクトに関連したインフラストラクチャーの提供に携わっています。彼の興味はあらゆる技術から歴史や物理学まで多岐にわたります。余暇の多くの時間を妻子と過ごし、息子たちとはロボットの話をしています。彼の技術的また個人的活動については、彼自身のブログ Gurukulam (http://balasubramanians.com/blog) から知ることができます。

概要： HTML と JavaScript を使用して、Lotus Domino 用に Web 2.0 スタイルのシン Web クライアントを作成します。この記事では、IBM Lotus Domino XML (DXL) フレームワークに関する以前の記事をベースに、Ajax によって Notes/Domino アプリケーションを拡張する方法について説明します。

タグを付ける!

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

「Notes/Domino データにアクセスするためのカスタム DXL フレームワーク」という記事では、Lotus Domino XML (DXL) フレームワークを紹介しました。また、DXL フレームワークを使用して、他のアプリケーションから Notes 文書を作成、表示、更新できるようにする方法について説明しました。さらに、3 つの LotusScript エージェントによって、DXL 文書を表示したり、DXL から文書を作成したり、DXL から文書を更新する方法について説明しました。

「Domino 用の JSR 168 ポータル・アプリケーションの構築」という別の記事では、JSR (Java Specification Requests) 168 ポートレットを使用して Notes/Domino のフロントエンドを作成する方法について説明しました。

この記事でも引続き Lotus Domino DXL フレームワークについて説明しており、Lotus Notes/Domino 連絡先 (Contacts) データベース用の Web 2.0 スタイルのシン Web クライアントの構築について見ていきます。Ajax を使用して Domino データベースにアクセスするために、Domino サーバーにホストされたフラットな HTML ファイル (CSS/JavaScript で構成) を使用します。ただし、前の記事で説明した要素もいくつか使用して、この Web 2.0 クライアントを作成します。

この記事は、JavaScript の知識をもつ、Notes/Domino アプリケーション開発経験者を対象としています。

Web 2.0 とは

Web 2.0 という用語は、2005 年のあるカンファレンスで Tim O'Reilly によって導入されました。この用語は、安定した Web 設計原則と HTTP の単純さを活用して構築される次世代 Web アプリケーションを表します。一般的な Web 2.0 アプリケーションとして、Google AdSense、Flickr、ブログなどがあります。それ以来、Web 2.0 という用語は一般化されて Web アプリケーションのスタイルを特徴付ける概念や傾向を総称するようになりました。大前提となるのは、これらの Web アプリケーションがプラットフォームとしてインターネットを使用し、サービスとして機能を提供することです。このサービスは、有意義で機能豊富なアプリケーションをユーザーに提供するために、ユーザーや他のアプリケーション (サービスを利用するアプリケーション) によってオンデマンドで接続されます。Web 2.0 スタイルのアプリケーションを支えるテクノロジーや概念には次のものがあります。

最新世代の Web ブラウザー (Mozilla Firefox、Microsoft Internet Explorer 7 など)
AJAX
JavaScript
DHTML
REST (REpresentational State Transfer、Web そのものの基礎となっているアーキテクチャー・スタイル)

JavaScript: 最適な言語

Web 2.0 スタイルのアプリケーションが広がるにつれて、JavaScript が脚光を浴びました。JavaScript は柔軟なスクリプト言語であり、ほとんどすべての Web ブラウザーによって認識されるため、オブジェクト指向の構造を組み込むように拡張し、複雑な Web アプリケーション構築に使用することが可能です。ここでは JavaScript の関数を、オブジェクト、メソッド、および従来の手続き型の関数として使用します。そしてフラット HTML ファイルによって JavaScript に MVC (Model View Controller) パターンを実装する方法について説明します。

上に戻る

アプリケーションについて

Lotus Domino 用の Web 2.0 クライアントは、1 つの HTML ファイルと、それを支えるスクリプト、画像、およびスタイル・シートから構成されます。アプリケーションの表示には Mozilla Firefox が最適です。この記事の目的に合わせて、ブラウザー・プラットフォームとして Firefox を使用します。

図 1 はアプリケーションのメイン・ページです。これは、Web 2.0 クライアントをブラウザーで開くと最初に表示される画面です。

図 1. Lotus Domino 用の Web 2.0 クライアント

この画像では、「Read Documents」リンクまたは「Create Document」リンクをクリックできます。「Read Documents」をクリックすると、図 2 のような画面が表示されます。この例では、連絡先 (Contacts) データベース (Lotus Notes の個人用アドレス帳 (Personal Address Book) テンプレートに基づくデータベース) から名前と電子メールアドレスが表示されます。

図 2. 「Read Documents」ビュー

この時点で、「Create Document」をクリックするか、ビューのいずれかのエントリーをクリックして詳細を確認することができます。ビューの最初のエントリーをクリックしてみましょう。図 3 は、連絡先 (Contacts) データベースの主な文書フィールドが表示されているところです。

図 3. 連絡先情報

左側に表示されるミニナビゲーション・ビューには、名前のリストがあります。ミニナビゲーション・ビューのいずれかのエントリーをクリックすると、その文書の詳細を確認できます。または、「Edit」アイコンをクリックすると、表示されている文書を編集できます。文書を編集したら、「Save」アイコンをクリックして変更を保存できます。「Close」をクリックするか、他のリンクをクリックすると、いつでも変更をキャンセルできます。

文書を作成する場合は、メニューから「Create Document」アイコンをクリックします。新しい文書を作成するための空白のフォームが表示されます (図 4 参照)。必要な情報を入力したら、「Save」をクリックして新しい文書を作成できます。

図 4. 連絡先文書の作成

アプリケーション内のファイル

Lotus Domino 用の Web 2.0 クライアントは、1 つの HTML ページ、およびユーザーのさまざまな操作を実行するための JavaScript ファイルから構成されます。表示は、カスケーディング・スタイル・シート (CSS) と画像によって制御されます。図 5 はさまざまなファイル間の関係を示しています。dxl.html はフラットな HTML ファイルで、style.css を使用してコンテンツの表示フォーマットを設定し、dojo.js、controller.js、および model.js を使用してタスクを実行します。

図 5. ファイルの関係

これらのファイルはすべて、data/domino/html ディレクトリーの下の web2.0 というディレクトリーにあります。ホストの Domino サーバーは Microsoft Windows XP 上で V7.0.1 を実行します。サーバーは、アプリケーションのために基本 Web 認証をサポートします。セッション・ベースの認証を有効にする場合は、この記事の後のセクションを参照して、このアプリケーションを機能させるために必要な手順を確認してください。

さらに、「Notes/Domino データにアクセスするためのカスタム DXL フレームワーク」という記事で説明した DXL エージェントを使用し、連絡先 (Contacts) データベースにインポートします。

設計原則

JavaScript は手続き型のプログラミングに向いているため、アプリケーション構築に必要なさまざまな機能を作成するために従来の方法を利用できます (ただし、保守容易性は低くなります)。このため、好みの Web アプリケーション・サーバー (J2EE、Microsoft .NET、PHP など) を使用して 3 層 Web アプリケーションを構築する場合と同様にアプリケーションを構築できます。つまり、コンサーンの分離を保ったまま、デプロイメント単位内で類似した呼び出しをグループ化する必要があります。基本的に、この目標を達成するには、シン Web アプリケーションに MVC (Model View Controller) 設計原則を適用します。

また、できる限り DRY (Don't repeat yourself) 原則にも従います。これを実現するには JavaScript のクロージャー機能を使用します。クロージャーにより、クラスやオブジェクトを作成するデータとして関数を扱うことができます。そして、クラスやオブジェクトを定義して、JSR-168 ポートレットの例 (「Domino 用の JSR 168 ポータル・アプリケーションの構築」を参照) とほとんど同じ方法で使用することができます。

上に戻る

設計の紹介

ここで、MVC を使用して簡単な Web アプリケーションを構築する方法を見ていきましょう。図 6 は、関連するオブジェクト、オブジェクトで公開するメソッド、およびオブジェクトが含まれるデプロイメント単位です。

ビューはメインの Web ページ (dxl.html) によって処理されます。ビューには、ヘルパー関数と情報を保持するためのグローバル変数もあります。主なビューのコンポーネントは次のとおりです。

menu クラス。「Read Documents」と「Create Document」というメニュー項目を表示します。
mainView クラス。Domino ビュー情報のテーブル形式での表示に関する処理を行います。
miniView クラス。文書表示モード時に、文書にすばやくアクセスするためのナビゲーション・ビューの表示に関する処理を行います。
doc クラス。Domino 文書情報の表示に関する処理を行い、編集、作成、および保存用のオプションを提供します。

モデルは model JavaScript ファイル (model.js) のコードによって処理されます。モデルで定義する主なクラスは people (Domino ビューの情報を保持) と person (Domino 連絡先文書に関する情報を保持) です。

コントローラーは controller JavaScript ファイル (controller.js) によって処理され、作業用のメソッドと属性をいくつか含んでいます。このクラスの主なメソッドは action で、ユーザーが実行する操作に基づいて、適切な情報をビューへ表示する処理を行います。また、コントローラーは Ajax 呼び出しを使って適切な Domino リソースにアクセスし、適切なモデル・オブジェクトのデータを設定して、表示のためにビューに渡します。すると、ビューがコントローラーのインスタンスを初期化し、すべての操作と判断を委譲します。

注: データ・アクセス・ロジックを独自のデプロイメント単位として切り離し、コントローラーを純粋なコントローラ機能としておくことが理想です。ただし、アクセス機能と組み合わせると簡単なので、ここでは組み合わせます。コードを見直して、データ・アクセス機能を別のファイルに分離するのは宿題にしましょう。

図 6. 設計

図 7 はいくつかの共通アクティビティのフローです。

図 7. シーケンス・ダイアグラム

上に戻る

コードの紹介

今度は、アプリケーション全体ではなく、アプリケーションの注目すべき点や、MVC パターンの実装方法を見ていきましょう。

順番に参照する外部 JS ファイル

まず、dxl.html ファイルは JavaScript ファイルを優先順にロードします。

<script type="text/javascript" src="controller.js"></script> <script type="text/javascript" src="model.js"></script> <script type="text/javascript" src="dojo.js"></script>

重要なグローバルを設定する

次に、アプリケーションはコントローラー・オブジェクトをグローバルとしてインスタンス化します。ユーザーが実行するすべてのビュー操作は、このコントローラーに送られて処理されるので、このコントローラー・オブジェクトのインスタンス化は、設計の重要な部分です。またアプリケーションは、その他のハウスキーピング用のグローバル (フィールド内で変更された値の監視など) もセットアップします。コードでは、このローカル Web ページでコントロールを参照する際のストリング値を渡すことで、コントローラー・オブジェクトがビュー・オブジェクトをレンダリングするときにこのストリング値を参照できるようにします。

<script language="JAVASCRIPT"> var html_control = new control("html_control");

プレゼンテーション・コンポーネントを JavaScript オブジェクトとしてカプセル化する

プレゼンテーション・コンポーネント（JavaScript オブジェクトとして実装）は、コントローラー・オブジェクトによって初期化されます。ビュー・オブジェクトとプレゼンテーション・オブジェクトは、前の手順で作成したコントローラー・オブジェクト名 (html_control) への参照を取り込みます。

function mainView(ob,controller){
 ....
 this.show=function(...){

 };
 this.hide=function(...){
 ...
 };
}
function miniView(ob,controller){
...
..
}
function doc(ob,controller){
...
..
}

プレゼンテーション・コンポーネントは、controller.js にあるコントロール・オブジェクトによってインスタンス化されます。

function control(str){
...
 this.mainview = new mainView(this.ob,this);
 this.doc = new doc(this.ob,this);
 this.miniview = new miniView(this.ob,this);
...
}

ブラウザーの DOM を使用して要素のコンテキストを保持する

操作可能なすべての項目に対して <div> タグを使用します。使用することができる DOM 属性を利用してコンテキストを設定し、ユーザーが実行する操作の一部として渡します。この例では、要素のコンテキストを設定する name 属性の値として文書 UNID を定義しました。

<tr><td><a href="#" id="display_doc" name="' +u.unids[x]+'" onclick="'+controller.varname+' .action(this)">'+u.names[x]+'</a></td></tr>';

すべての操作をビューからコントローラーに送る

Web アプリケーションのすべてのリンクまたは操作可能な機能が、自分自身への参照を渡すことでコントローラーに送られます。

<!--the view previous icon on the view page-->
<input type="image" src="prev.gif" id="view_prev" 
onclick="'+controller.varname+'.action(this)"/>';
<!-- the link in the view to show the doc details-->

<a href="#" id="display_doc" name="'+u.unids[x]+'" 
onclick="'+controller.varname+'.action(this)">'
+u.names[x]+'</a>

操作とコンテキストに基づいてすべての判断を行い、ロジックをコントローラーに集める

操作が行われた時に処理すべきコア・ロジックは、コントロール・オブジェクトの一部として、操作に関する JavaScript 関数の中にカプセル化されます。このロジックは、switch/case ステートメントを使用して適切な関数に委譲されます。

function control(str){
....
..
 this.action = function(u){
  if(u.id==''){u.id='menu_read';};
  switch(u.id){
   case("menu_read"):
    {
     this.menu.move();
     this.startdoc='1';
     this.serialize(this.viewurl
(this.startdoc,this.displaycount),
this.showMainView, this.mainview);
     this.miniview.hide();
    }
   break;
   case("display_doc"):
    {
	// get doc details and redirect 
	// to appropriate display
    ...
    }
   break;
   case("view_prev"):
    {
	// get next set of view entries 
	// and show it in display
    ...
    }
   break;
   ... 
  ... 
 };
}

Notes ビューおよび Notes 文書を記述するための再利用可能なオブジェクトを定義する

model.js ファイルには、JavaScript 関数として実装された 2 つのオブジェクト (文書用の person とビュー用の people) があります。プレゼンテーション (dxl.html) はこれらのドメイン・オブジェクトのみを処理します。Domino サーバーから適切な値のオブジェクトへの XML/DXL のシリアライズ、およびその逆の処理は、コントローラー (control 関数) が行います。

//People
function people(){
 this.unids=[];
 this.names=[];
 this.emails=[];
}

//Person
function person(){
 this.firstname='';
 this.lastname='';
 this.officecity='';
 this.officestate='';
 this.unid='';
 this.jobtitle='';
 this.companyname='';
 this.mailaddress='';
}

Ajax 呼び出しをライブラリ/ツールキットに委譲する

ここでは、独自の Ajax コントロールを実装するのではなく、Dojo ツールキット (http://dojotoolkit.org/) を使用します。これらの呼び出しは、コントロール・オブジェクトの一部として組み込まれた JavaScript 関数にカプセル化されます。

this.serialize =function(url, fn, fn1){
  dojo.io.bind({url: url,
    load: function(type,data,evt){fn(data, fn1);},
    error: function(type,error){alert
    ("reached in error"+error.toSource());},
    mimetype: "text/xml"
  });
};

ここでは serialize メソッドのパラメータとして他の JavaScript 関数を渡し、状態が変化した場合に呼び出されるようにセットアップします。前のコード・スニペットでは、ロードが完了すると、サーバーから返される XML がデータ・オブジェクトで参照され、最初に渡された関数のパラメーターとして送られます。これは再利用に役立ちます。文書の詳細の表示時に文書にアクセスするために使用するミニナビゲーション・ビューだけでなく、同じ serialize メソッドを使用してメイン・ビューにコンテンツを表示できます (名前と電子メールの 2 列を表示します)。

上に戻る

セキュリティー

次のセクションで説明するように、Domino サーバー上でこのアプリケーションをホスティングしているフォルダに適切なアクセス許可を割り当てる必要があります。さらに、Domino データベースに対する操作 (作成、読み取り、編集) ではユーザーの資格情報を使用します。このため、このアプリケーションにアクセスするユーザーのグループは、データベース ACL で必要な機能を実行するための適切な権限を持っている必要があります。他のすべての Web アプリケーションと同様に、ブラウザー・セッションを終了して、ユーザーのコンピュータがセキュリティーの危険にさらされた場合の突破口になるのを防ぐことをお勧めします。

上に戻る

サーバーへのデプロイとテスト

次のヒントを使って Web 2.0 クライアントを Lotus Domino 7 サーバーにデプロイします。

使用する連絡先 (Contacts) データベースを Notes の個人用アドレス帳 (Personal Address Book) テンプレートから作成します。
テスト・ユーザーが文書の作成や編集を行い、ビューを表示できるように ACL が設定されていることを確認します。
最初の記事の LotusScript エージェントをインストールし、認証済みの Agent Signer によって署名されることを確認します。
この記事で取り上げたファイルを data/domino/html ディレクトリーに unzip します。ファイルが html ディレクトリーの下の web2.0 というフォルダにあることを確認します。
controller.js ファイルを開き、control 関数の this.dominourl という変数を Domino サーバーの適切な URL に置き換えます。

注: Web ログイン時にセッション・ベースの認証を有効にしている場合は、適切な完全修飾ホスト名が文字列の一部になっています。また、Domino サーバーが 80 以外のポートで listen している場合は、適切なポートが割り当てられていることを確認します。
新しく作成した web2.0 ディレクトリーのファイル保護を設定します。File Protection 文書の「Basics」タブで、デフォルトのオプションをそのまま使用し、アクセス制御リストを修正して domino/html/web2.0 ディレクトリーがパスとして指定されるようにします。「Access Control」タブで、「Current access control list」に Anonymous に対して No Access、Default に対して POST and GET が含まれることを確認します (図 8 参照)。

図 8. 「Access Control」タブ

これで完成です。アプリケーションのテストを開始できます。手順は次のとおりです。

Mozilla Firefox を開きます。
http://your dominourl/web2.0/dxl.html という URL にアクセスします。
ログインすると、アプリケーションにアクセスできます。

上に戻る

各自の Domino アプリケーションへの適応

次の指示に従って、Web 2.0 クライアントを任意のカスタム Domino データベースに適応させます。

アプリケーションが示すドメインを反映するように model.js のモデル・オブジェクトを編集します。たとえば、アプリケーションが注文システムだとします。注文を表示する Domino ビューがあり、文書が呼び出された注文情報である場合、Orders というコレクション・オブジェクトと OrderDetails という文書オブジェクトを持つことができます。
controller.js のコントロール・コードを編集して適切な URL にマッピングされるようにし、showMainView 関数と showMiniView 関数で表示されるビュー列のマッピングを編集します。
最後に、dxl.html ファイルの mainView、miniView、および doc オブジェクトを編集して、最初の項目のモデル・オブジェクトのフィールドが反映されるようにします。

上に戻る

まとめ

最初の記事で紹介した DXL フレームワークを活用して、Domino データベースのフロントエンドとなる Web 2.0 スタイルのアプリケーションを構築する方法について説明しました。Dojo ツールキットの UI ユーティリティまたはその他任意の DHTML 手法を使用して、プレゼンテーションをさらに洗練させることができます。また、コンサーンを分離して有効に再利用する設計パターンを使用して Web アプリケーションを構築する方法について説明しました。コードを詳細に調べて、model.js、controller.js、および dxl.html ファイルを編集することで、このアプリケーションを説明したデータベースまたは他の Domino アプリケーションに適応させることができます。

上に戻る

ダウンロード