目次


XPages による Web アプリケーション開発

前編

IBM Lotus Domino 8.5 からサポートされる XPages の機能を用いてWeb アプリケーションを開発する方法を、前編・後編の2回に分けて紹介します。

Comments

コンテンツシリーズ

このコンテンツは全#シリーズのパート#です: XPages による Web アプリケーション開発

このシリーズの続きに乞うご期待。

このコンテンツはシリーズの一部分です:XPages による Web アプリケーション開発

このシリーズの続きに乞うご期待。

XPages とは

XPages とは、バージョン8.5から新たにサポートされるようになった、Domino 上で動作する Web アプリケーションを専用の GUI エディタを用いて開発するための新しい技術です。今までも Notes アプリケーションを Web アプリケーションとしてアクセスする機能がありましたが、リッチな UI を実現するためにはさまざまなテクニックを駆使する必要があり、その開発は決して容易なものではありませんでした。その表現力や操作性などは十分とはいえませんでした。Notes 8.5 からはNotes アプリケーションを XPages を使用したページで表示することで、簡単に Web 2.0スタイルの Web アプリケーションとすることができます。Notes/Domino 8.5 の新機能と XPages の概要については、参考文献を参照してください。

作成するサンプルアプリケーション

本稿でサンプルとして作成する Web アプリケーションは、Notes アプリケーション上で XPages を用いて実装された簡単な経費記入帳です (図1)。

図1. サンプルアプリケーション - 経費記入帳
図1. サンプルアプリケーション - 経費記入帳
図1. サンプルアプリケーション - 経費記入帳

各経費項目はそれぞれ独立した Notes 文書として保存します。利用可能な科目(交通費、消耗品費など)もそれぞれ独立した Notes 文書として準備します。経費項目をNotes ビューを使って一覧表示する、新しい記録を入力する、既存の記録を編集・削除する、科目ごとの合計金額を計算する、などの基本機能を実装します。

事前準備

最初に行うのは、XPages アプリケーションを組み込む Notes アプリケーションの準備です。既に運用されている既存のNotesアプリケーションを用いて、その中に新たな追加アプリケーションとして XPages を組み込むことも可能ですし、新規のNotesアプリケーションを作成してゼロから始めることも可能です。ここでは、新規のNotesアプリケーションとして作成します。Notes クライアントのメニューから「ファイル」 > 「アプリケーション」 > 「作成」 を選択して、新規Notesアプリケーションを作成します。任意のテンプレートが利用可能ですが、ここでは空のテンプレートである「-未入力-」を選択します (図2)。

図2. 新規アプリケーションの作成
図2. 新規アプリケーションの作成
図2. 新規アプリケーションの作成

次に、作成したNotesアプリケーションを Domino Designer で開きます。XPages の開発にも Domino Designer を用います。アプリケーションビューを確認すると、作成したNotesアプリケーションの設計要素がツリー上に表示され、その中に「XPage」や「カスタムコントロール」といった XPages 関連の設計要素が含まれていることが確認できます (図3)。

注:複数形の XPages とは、バージョン8.5から新たにサポートされるようになった、Web アプリケーションを開発するための新しい技術全体を表します。それに対して単数形の XPage とは、実際に開発される Web アプリケーションの個々のページを表します。

図3. アプリケーションビュー
図3. アプリケーションビュー

XPage を作成する前準備として、Notes のフォームとビューを定義します。作成するフォームは「item」フォームと「account」フォームの2つです。

「item」フォーム

記入項目を記録するためのフォームです。以下のフィールドを含みます (図4)。

フィールド名種類説明
date日付/時刻経費発生日
accountテキスト勘定科目
memoテキスト摘要
amount数値金額
図4. 「item」フォーム
図4. 「item」フォーム

「account」フォーム

勘定科目を登録するためのフォームです。以下のフィールドを含みます (図5)。

フィールド名種類説明
titleテキスト勘定科目名
図5. 「account」フォーム
図5. 「account」フォーム

次に、それらを一覧表示するためのビューを定義します。対応するフォームを選択表示し、すべてのフィールドを列に持つビューを、それぞれのフォーム用に「itemlist」ビューと「accountlist」ビューとして作成します (図6、図7)。「itemlist」ビューの「日付」列は、日付順にソートするために「ソート」オプションを「昇順」に設定します。それぞれのビューには対応するフォームの文書のみが表示されるように、「ビューの選択」として「SELECT (Form="item")」などの条件式を設定します。

図6. 「itemlist」ビュー
図6. 「itemlist」ビュー
図6. 「itemlist」ビュー
図7. 「accountlist」ビュー
図7. 「accountlist」ビュー
図7. 「accountlist」ビュー

ここまでの操作は、従来のNotesアプリケーション開発者にとって馴染みのある操作です。最後に、今回作成する XPages アプリケーションでは勘定科目を編集するための機能は用意しませんので、Notes クライアントを利用して 「account」文書を作成しておきます。交通費や通信費、消耗品費、雑費、水道光熱費など、1つの項目をそれぞれ1つの文書として「title」フィールドに入力し、必要と思われるだけ作成・登録しておきます。

Notes のビューとフォームを XPages で表示する

ここから XPage の作成を開始します。新規の XPage はフォームやビューと同じ操作で作成できます。アプリケーションビューの「XPage」の上で右ボタンをクリックし、表示されるコンテキストメニューから「新規 XPage」を選択します。表示されたパネルで XPage の名前を「table」と入力して作成します (図8)。

図8. 新規 XPage の作成
図8. 新規 XPage の作成
図8. 新規 XPage の作成

新規の XPage が作成されると、Domino Designer のエディタペインには XPage の GUI エディタが表示され、その右側には利用可能なコントロール一覧を含むコントロールビューが表示されます。

図9. XPage の GUI エディタ
図9. XPage の GUI エディタ
図9. XPage の GUI エディタ

コントロールとは、XPage を構成する際に利用する部品のことです。ボタンやラベル、リンクやチェックボックスなど、基本的な機能を提供するコアコントロールと、表やパネルといった、主に他のコントロールを含んだりデータを表示したりするために使われるコンテナコントロールの2種類がシステム標準で提供され、それらに加えて、ユーザーが独自に作成・登録して利用するカスタムコントロールもサポートされます。早速コントロールを配置してみましょう。ドラッグ&ドロップ操作で、コントロールビューからビューコントロールをエディタ上に配置します。ビューコントロールとは、指定した Notes ビューの内容をそのまま XPage 上に表示するためのコントロールです。表示するビューを選択するためのパネルが表示されますので、先ほど用意した「itemlist」を「ビュー」として選択します。それ以外の項目はデフォルトのままでかまいません (図10)。

図10. ビューコントロールの配置
図10. ビューコントロールの配置
図10. ビューコントロールの配置

エディタペインには配置されたビューが表示されます (図11)。

図11. 配置されたビューコントロール
図11. 配置されたビューコントロール
図11. 配置されたビューコントロール

これだけの操作で、Notes のビューを表示する基本的な Web アプリケーションを作成することができます。では実際にブラウザからアクセスし、動作を確認してみましょう。作成中の XPages をアクセスするにあたり最新の編集結果が反映されるよう Ctrl+S で編集内容を保存します。次に、Domino Designer のツールバーより「Web ブラウザでのプリビュー」を選択すると(図12)、ブラウザが起動して作成したページが表示されます。

図12. 「Web ブラウザでプリビュー」ボタン
図12. 「Web ブラウザでプリビュー」ボタン
図12. 「Web ブラウザでプリビュー」ボタン

(注)XPages アプリケーションを実行するには、Domino サーバーに設定が必要です。詳しくは「Lotus Domino Administrator 8.5 ヘルプ」の「セキュリティ」の章内、「サーバー上で実行されるエージェントと XPage を制御する」の項目を参照してください(英語版オンライン情報はこちら)。また、XPage を含む Notes アプリケーションをローカルに作成した場合でも、Notes クライアントを利用してプリビューを行うことが可能です。その際の操作もDomino サーバー上に作成した場合と同様ですが、Notes アプリケーションのアクセス制御リストに「anonymous」を追加し、編集者以上の権限を設定しておく必要があります。

以上のように非常に簡単な操作で、Notes ビューがブラウザ上に表示されるようになりました (図13)。 まだ文書をひとつも作成していませんので空のリストが表示されますが、「item」文書が作成されると、この中にリスト表示されるようになります。

図13. XPage で表示された Notes ビュー
図13. XPage で表示された Notes ビュー

続いて、XPage 上に先ほど作成したフォームを表示できるようにします。ビューとは異なり、フォームを指定しただけでそのまま表示するためのコントロールはありません。そのため、フォーム内の各フィールドに対応するコントロールをひとつひとつ配置する必要がありますが、この操作をサポートしてくれる機能があります。XPages の GUI エディタでコントロールビューのメニューから「データ」を選択し、ビューを切り替えます (図14)。

図14. データビューへの切り替え
図14. データビューへの切り替え

表示されたデータビューで、新しくデータソースを定義します。プルダウンリストより「データソースの定義」を選択します。表示されたパネルで「データソース」として「Domino 文書」を選択し、「名前」には「itemDocument」と入力します。最後に「フォーム」として先ほど用意した「item」フォームを選択して定義を行います。Notes 上のデータ (ビューやフォーム)は、データソースとして名前を付けて定義することにより、XPage 内で「item」フォームにアクセス可能になります (図15)。

図15. データソースの定義
図15. データソースの定義
図15. データソースの定義

このように「item」フォームをデータソースとして定義すると、データビュー内には定義したデータソースに含まれるフィールド一覧が表示されます (図16)。「コントロールの選択ダイアログボックス」を有効にし(図16中、赤色の四角で囲ったボタンを切り替える)、すべてのフィールドを選択した後、エディタ上の先ほど配置したビューコントロールの下にドラッグ&ドロップします。

図16. データソース内のフィールド一覧
図16. データソース内のフィールド一覧

ウィザード画面が表示されるので、「account」フィールドのコントロールを「コンボボックス」に変更します。最後に「OK」ボタンを押してコントロールを作成します (図17)。

図17. コントロールの選択
図17. コントロールの選択
図17. コントロールの選択

この操作の結果、「item」フォームに含まれるすべてのフィールドをそれぞれ行とし、左側の列にラベル、右側の列に入力コントロールを持つ表コントロールが自動的に作成されます (図18)。 各入力コントロールは、自動的にフィールドの持つ属性(文字列、日付、数値)を継承しています。以上で、フォームのデータを扱うための表(以後、フォームテーブルと呼びます)を作成することができました。

図18. 作成された表コントロール
図18. 作成された表コントロール

従来の Notes アプリケーションが持つビューやフォームを表示するための XPage を簡単に作成できることがお分かりいただけたと思います。

ページの見栄えを整える

ここまでの操作でページの基本となるものを作成しました。ここからは、使い勝手や見栄えの良いアプリケーションとするために、細かな設定や画面レイアウトの変更などを行っていきます。

フォームテーブルに対しては以下のような変更を行っていきます。プロパティの編集は、対象となるコントロールを選択すると画面下部に表示されるプロパティビューから行うことができます (図19)。

  • フォームテーブル内のラベルを編集する
    フォームテーブルに用いられているすべてのラベルには、デフォルトでフィールド名が利用されています。「ラベル」タブより、これらをより分かりやすいラベル名に変更します。
  • date用編集ボックスのプロパティを編集する
    「データ」タブより「表示形式」として「日付のみ」を選択し、「日付/時刻ピッカーポップアップを使用」を有効にして、日付を直接キー入力しなくても、カレンダーから選択可能にします。
  • account用コンボボックスの選択値として、「account」フォームで入力したデータを利用可能にする
    「値」タブより「式項目」に JavaScript「@DbColumn(@DbName(), "accountlist", 1)」を追加します。これにより、先に用意した「accountlist」ビューに含まれるすべての行の1列目の値を、コンボボックスの選択可能値として表示するようになります。このように、さまざまなプロパティには静的な値のみだけでなく、プログラムによる動的な値を設定することも可能です。
  • 行をより適切な順番に並べ替える
    日付、科目、摘要、金額の順に並ぶように行を並べ替えます。行の並べ替えには、画面左下のアウトラインビューが利用できます。入れ替えたい行をドラッグ&ドロップして移動していきます。

同様にビューコントロールの属性も変更します。

  • 「金額」列の表示書式を編集する
    数値表示をカンマ付きの整数とするため、「データ」タブより「表示タイプ」を「数値」に、「表示形式」を「小数点」に、「整数のみ」を有効にします。
  • 「日付」列の表示形式を編集する
    コンパクトな日付表示とするため、「データ」タブより「表示タイプ」を「日付/時刻」に、「表示形式」を「日付のみ」に、「日付スタイル」を「短く」とします。
  • ビューに一度に表示される項目数を変更する
    「表示」タブより「ページごとの最大行数」を「10」に設定します。
図19. プロパティの編集例
図19. プロパティの編集例
図19. プロパティの編集例

次に、ページ全体の見栄えを整えます。ページにタイトルを配置し、ビューコントロールとフォームテーブルが左右に並ぶように変更します。このようなコントロールの配置の制御には、表コントロールを利用すると便利です。初期配置として、2行2列の表を新たに配置します。1行目はセルを結合し、ラベルコントロールを配置してタイトルとし「経費記入帳」と入力します。2行目の左側のセルにはビューコントロールを、右側のセルにはフォームテーブルをドラッグ&ドロップで移動します。フォームテーブルには小タイトル用ラベルコントロールを1行加え「項目編集」と入力します。

以上の操作の結果、大まかなレイアウトが定まってきました (図20)。

図20. ここまでのレイアウト変更の結果
図20. ここまでのレイアウト変更の結果
図20. ここまでのレイアウト変更の結果

更に微調整を加えていきます。文字の大きさや属性の設定、上下左右の位置調整、各項目の横幅設定などを行います。これらの調整も、プロパティビュー経由あるいはツールバーを用いて行うことができます。その結果、最終的なレイアウトが完成します (図21)。

図21. 最終的なレイアウト
図21. 最終的なレイアウト
図21. 最終的なレイアウト

最後に、スタイルシートを適用して最終的な見栄えを整えます。XPages も Web アプリケーションの一種であり、通常の HTML ドキュメント同様、CSS ファイルで定義したスタイルシートが利用可能です。アプリケーションビューの「リソース」の下、「スタイルシート」設計要素には CSS ファイルを、「イメージ」設計要素には画像ファイルを配置することが可能です。今回は、あらかじめ用意してある CSS ファイルと GIF ファイルをインポートして利用します (図22)。この CSS ファイルは画面要素の背景やボーダー、フォントの属性などを指定するために利用されます。また画像としては背景や押しピンマーク、ロゴを取り込みますが、ロゴの画像は本稿の後編で使用します。
インポートはそれぞれの設計要素をダブルクリックすると開く一覧表示画面から行うことができます。

図22. インポートされた CSS と GIF ファイル
図22. インポートされた CSS と GIF ファイル

インポートされた CSS ファイルを利用するためには、XPage のプロパティビューの「スタイル」タブで、「スタイルシートをページへ追加」ボタンを押して CSS ファイルを追加します。これにより、CSS ファイルで定義されているクラスを、XPage 内の各コントロールで参照できるようになります。CSS のクラスを適用したいコントロールを選択し、「スタイル」タブで適用したい CSS クラスを指定します (図23)。

図23. CSS クラスの適用
図23. CSS クラスの適用
図23. CSS クラスの適用

CSS クラスを適用した結果をブラウザからアクセスして確認すると、図24のように表示されます。

先ほど整形したビューとフォームがきれいに表示されました。またインポートした画像も背景と押しピンとして表示されています。

図24. 最終的な画面デザイン
図24. 最終的な画面デザイン
図24. 最終的な画面デザイン

注:今回用いている CSS ファイルは、Firefox に最適化されています。そのため、作成している XPage を Firefox 以外のブラウザで表示した場合、表示結果が異なる場合があります。

まとめ

XPages は専用の GUI エディタを用いた編集により、Domino 上で簡単に Web 2.0 スタイルの Web アプリケーションを実現するためのテクノロジーです。本前編では、Web アプリケーション開発の事前準備として、従来から利用されている Notes のフォームやビューの定義を行い、その後、それらをベースに XPage 上にコントロールを配置し、レイアウトを調節して画面のデザインを行っていく様子を紹介しました。思いのほか少ないステップを実行するだけで、簡単にページデザインができることに驚かれた方もいるのではないかと思います。続く後編では、費用項目を編集するための機能の追加や、Web 2.0 スタイルのインターフェースの活用、JavaScript を利用したより高度なロジックを実装していく様子などを紹介します。


ダウンロード可能なリソース


関連トピック


コメント

コメントを登録するにはサインインあるいは登録してください。

static.content.url=http://www.ibm.com/developerworks/js/artrating/
SITE_ID=60
Zone=Lotus
ArticleID=381872
ArticleTitle=XPages による Web アプリケーション開発: 前編
publish-date=05012009