XPagesでLotus Notes/Dominoアプリ開発入門（2）

Javaサンプルの定番ショップカートをXPagesで作る

日本アイ・ビー・エム株式会社 ソフトウェア開発研究所
Lotusテクノロジー開発 ソフトウェアエンジニア 小峯 宏秋
2012/6/19

Webアプリの定番「ショッピングカート」を作る

今回の主な内容 Webアプリの定番「ショッピングカート」を作る XPagesアプリケーションの開発イメージ ショッピングカートアプリケーションとは？ Lotus Notesアプリケーションのデータ構造 XPagesでのデータソースとUI 商品カタログの開発 商品の詳細情報画面の開発 次回は、Lotus Notes／Dominoデータへアクセス

　XPagesはLotus Notes／Domino 8.5から新たに提供されたアプリケーション開発技術です。HTML、JavaScript、スタイルシート（CSS）といった標準的なWeb技術を使用して、見た目も操作性も優れたUIを持つアプリケーションを効率よく開発できます。

　前回の記事「サーバサイドJavaScriptやJavaでWebアプリが作れるXPagesとは」では、XPagesの概要について解説しました。今回は具体的なアプリケーションを例にして、その中で使われている開発技術を紹介します。それによって、XPagesアプリケーション開発をさらに深く理解していただきます。

　サンプルとしてショッピングカートアプリケーションを使用します。ショッピングカートアプリケーションは、商品カタログから商品を選び、ショッピングカートに入れて決済ができるWebアプリケーションです。Webアプリケーションで必要とされる基本的な仕組みを網羅しており、Java EEなどのWebアプリケーション開発技術を学習するときに、よく使われるサンプルです。

　ここで紹介するサンプルアプリケーションは、XPages.info の日本語アプリケー ションのデモページで、「IBM製日本語XPagesアプリケーションライブデモ」セクションにある「ショッピングカートアプリケーション」として公開しています。また、こちらからもダウンロードできますので、ぜひお試しください。

XPagesアプリケーションの開発イメージ

　XPagesアプリケーションの開発では、作成したそれぞれのXPage上にさまざまなコントロールを配置してUIを作成します。そして、配置したコントロールやXPage自身のイベントに、シンプルアクションやJavaScriptのコードを記述し、アプリケーションの動作をコントロールできます。アプリケーションが実行するビジネスロジックも、イベント処理から呼び出されるコードに記述できます。

　XPagesの中でビジネスロジックを記載できるコードにはいくつかの種類があります。JavaScriptはXPagesの中で最も頻繁に使用する言語です。前回解説したように、XPagesのサーバサイドJavaScriptはECMA 262
（ECMAScript）に準拠しながら、XPagesアプリケーションで使用するための拡張がされており、Lotus Notes／Dominoアプリケーションへのデータアクセスや、ブラウザコンテキスト情報へのアクセス、セッション情報の保持など、Webアプリケーションを実装するために必要な機能が用意されています。

　さらに、サーバサイドJavaScriptだけでは実現が難しい機能の実装をJavaコードとしてアプリケーションに組み込んでサーバサイドJavaScriptから呼び出すことも可能です。

　既存のLotus Notes／Dominoアプリケーションを拡張して、XPagesアプリケーションを実装する場合もあるかもしれません。そのとき既存のアプリケーションに含まれている、「LotusScript」などで実装されたエージェントを呼び出すことも可能になっています。

　図1はXPagesアプリケーションの構成イメージを示しています。XPage内にコントロールを配置することで画面を構成し、コントロールに関連したイベントで画面遷移やビジネスロジックの呼び出しを行います。

図1　XPagesアプリケーションの構成イメージ

　また、Lotus Notes／Dominoアプリケーションの「ビュー」「フォーム」を基にXPageにデータソースを定義でき、アプリケーションに保存されているデータを取得して表示したり、入力されたデータを保存できます。

　さらに、「共有コード」と呼ばれる設計要素ではサーバサイドJavaScriptやJavaコード、あるいは「LotusScript」で記述したエージェントなどでビジネスロジックを記載でき、それらのコードからも「Lotus Notes／Domino」アプリケーションへデータアクセス可能です。

ショッピングカートアプリケーションとは？

　この記事で紹介するショッピングカートアプリケーションは図2のように3つの機能から構成されています。

1. 商品の一覧を示すカタログと商品の詳細を表示する機能
2. 購入予定の商品を一時的に保持し、ショッピングカートで表示する機能
3. 購入者の情報を入力し、ショッピングを完了する機能

図2　ショッピングカートアプリケーションの処理の概要

■ 1.商品の一覧を示すカタログと商品の詳細を表示する機能

　オンラインショッピングで購入可能な商品の一覧を示す画面と、それぞれの商品の詳細な情報を示す画面から構成されます。商品のデータはあらかじめLotus Notes／Dominoアプリケーションに保存されています。このサイトを訪れた顧客は商品一覧から商品の詳細画面を表示し、商品をショッピングカートに入れることができます。

■ 2.購入予定の商品を一時的に保持し、ショッピングカートで表示する機能

　商品のカタログからショッピングカートに入れた商品の情報を保持し、一覧として表示するショッピングカートの機能です。このときショッピングカートの中の商品はまだ購入を確定していません。そのため、顧客がこのWebサイトにアクセスしている間だけ一時的に保持されていれば十分なデータです。

　ショッピングカート画面では、ブラウザのセッションに関連付けたデータを保持し、そのデータをショッピングカートの商品一覧として表示します。

■ 3.購入者の情報を入力し、ショッピングを完了する機能

　ショッピングカートからレジに進むことで、ショッピングカート内の商品を購入します。レジの「お客さまの情報入力」画面で顧客の氏名や住所などの情報を入力します。そして購入が完了すると、「購入完了」画面が表示され商品の購入を完了します。

　ここで購入した商品の情報や顧客の情報は永続的なデータとしてLotus Notes／Dominoアプリケーションに格納されます。

　この3つの機能がXPagesアプリケーションでどのように実装されるかを見てみましょう。まず今回は「1. 商品の一覧を示すカタログと商品の詳細を表示する機能」の実装です。残り2つの機能2.3.の実装については、次回の連載で紹介します。

Lotus Notesアプリケーションのデータ構造

　あらためてLotus Notes／Dominoアプリケーションのデータ構造と「フォーム」と「ビュー」の関係を紹介します。

　Lotus Notes／Dominoのデータは、Lotus Notes／Dominoアプリケーションの中に「文書」として格納されます。「文書」には、さまざまデータを保持できます。ショッピングカートアプリケーションの例では購入できる商品の情報や、購入が完了したときの購入者と購入商品の情報を「文書」として保持します。

　この「文書」のデータの構造やアクセス方法を定義するものが「フォーム」と「ビュー」です。「フォーム」はLotus Notes／Dominoアプリケーションに格納する文書が持つ個々のデータ型を決めるとともにLotus Notesでのデータの表示や編集をするためのUIも提供します（図3）。「ビュー」は格納されている文書を一覧として表示するために使用します。

図3　「文書」と「フォーム」の関係

　ショッピングカートアプリケーションをLotus Notesから開くと、商品の一覧を示すビューは図4、詳細を示すフォームは図5のように表示されます。

図4　商品一覧を表示するビュー

図5　商品の詳細情報をフォームで表示する

1-2

Index

第2回　Javaサンプルの定番ショップカートをXPagesで作る Page1 Webアプリの定番「ショッピングカート」を作る XPagesアプリケーションの開発イメージ ショッピングカートアプリケーションとは？ Lotus Notesアプリケーションのデータ構造 Page2 XPagesでのデータソースとUI 商品カタログの開発 商品の詳細情報画面の開発 次回は、Lotus Notes／Dominoデータへアクセス

Java Solution全記事一覧

＠ITメールマガジン　新着情報やスタッフのコラムがメールで届きます（無料）