XPages によるアプリケーション開発の実例例 DNaX 2.1

テクてく Lotus 技術者夜会 ザ・デベロッパー編
XPages によるアプリケーション開発の実例例 DNaX 2.1
2014年年11⽉月7⽇日
祖⽗父江 達也
TSDL ISSC #2
⽇日本アイ・ビー・エム株式会社
1
⽬目次
1.  Domino NSF aggregator with XPages (DNaX)とは
2.  開発時におけるトピックス(テクニック、問題、考慮点、など)
© 2014 IBM Corporation
© 2014 IBM Corporation
1-1. Domino NSF aggregator with XPages (DNaX)とは
n  DNaXは、Dominoサーバーを利利⽤用してポータルサイトを構築するフレームワー
クです。サイトのデザインからコンテンツの管理理まで、全ての操作をブラウ
ザー経由で実施します。Dominoサーバーをご利利⽤用の⼩小中規模のお客様で、主な
アプリケーションがDomino上で動作している場合に最適なソリューションです。
様々なコンテンツ表⽰示部品が予め⽤用意されており、それらを組み合わせること
で容易易にNSF上のデータをサイト上に統合可能です
© 2014 IBM Corporation
DNaXのサンプルとして提供されるポータル画面
© 2014 IBM Corporation
1-2. DNaXが提供する機能
n  ポータルサイト表⽰示機能
•  管理理者の設定に基づき、ポータルサイトを表⽰示する機能
•  ポータルページ内にさまざまなコンテンツを表⽰示するための
20以上のウィジェットを標準で⽤用意
n  ポータルサイト管理理機能
! サイト管理理機能
•  ポータルサイトのページ構成および外観を設定・管理理する機能
! コンテンツ管理理機能
•  ウィジェット内に表⽰示するコンテンツを作成・管理理する機能
© 2014 IBM Corporation
© 2014 IBM Corporation
1-3. DNaXが提供するウィジェット
1.  Notesデータベース連携・集約機能
! 単⼀一ビュー表⽰示
! 複数ビュー集約表⽰示
! グラフ表⽰示
2.  ⽂文書表⽰示機能
! ニュース⼀一覧
! 画像リスト
! スライドショー
! ⽂文書表⽰示
! ホワイトボード
4.  検索索機能
! ユーザー検索索
5.  ブックマーク機能
! リンク集(共通/個⼈人)
! データベース⼀一覧
! ナビゲーター
6.  配信・通知機能
! バナー
! 期限確認
! 緊急情報
3.  IBM iNotes連携機能
! メール使⽤用量量
! メール⼀一覧
! 今⽇日の予定
! ToDo
© 2014 IBM Corporation
© 2014 IBM Corporation
1-3-1. Notesデータベース連携・集約機能
1.  単⼀一ビュー表⽰示
2.  複数ビュー集約表⽰示
3.  グラフ表⽰示
© 2014 IBM Corporation
© 2014 IBM Corporation
1-3-1-1. 単⼀一ビュー表⽰示
n  Dominoサーバー上のデータベースの⽂文書⼀一覧を表⽰示します
! 指定したビューから特定の列列のみを選んで表⽰示することができます
© 2014 IBM Corporation
© 2014 IBM Corporation
1-3-1-2. 複数ビュー集約表⽰示
n  複数のデータベースから最新の⽂文書を抽出して⼀一覧表⽰示します
! 掲⽰示板やニュースDBの新着⽂文書や、承認待ち⽂文書の⼀一覧など設定により
様々な⽤用途で表⽰示することができます
通達と掲示板から新着文書を取得し、
新着順にソートして表示
未読文書は青字で表示
既読文書(黒)を非表示にすることも可
自身が承認者・処理担当者になっている
文書を複数DBから抽出表示可能
© 2014 IBM Corporation
© 2014 IBM Corporation
1-3-1-3. グラフ表⽰示
n  ポータルのコンテンツ設定で対象のビューやグラフの種類を含むURLを指定
することで、ポータルに特定のデータベースの集計データを図で表⽰示可能です
© 2014 IBM Corporation
© 2014 IBM Corporation
1-3-2. ⽂文書表⽰示機能
1.  ニュース⼀一覧
2.  画像リスト
3.  スライドショー
4.  ⽂文書表⽰示
5.  ホワイトボード
© 2014 IBM Corporation
© 2014 IBM Corporation
1-3-2-1. ニュース⼀一覧
n  カテゴリ、件名、本⽂文を登録した⽂文書の⼀一覧を表⽰示します
! ニュース⽂文書から別のコンテンツにURLでリンクすることも可能です
リンクをクリックすると文書を開く
© 2014 IBM Corporation
© 2014 IBM Corporation
1-3-2-2. 画像リスト
n  画像付きのニュース⼀一覧です
! リンクをクリックすると、登録したニュースを開いたり、
他のコンテンツを直接開くことが可能です
© 2014 IBM Corporation
© 2014 IBM Corporation
1-3-2-3. スライドショー
n  複数のニュースを数秒間隔で切切り替えて表⽰示します
数秒間隔でフェードアウトし、次の
文書の表示に切り替わる
© 2014 IBM Corporation
© 2014 IBM Corporation
1-3-2-4. ⽂文書表⽰示
n  リッチテキスト形式で登録したNotes⽂文書の内容をポータル上に表⽰示します
! Webブラウザからリッチテキストで⽂文書を登録することが可能です
Webブラウザからリッチテキストで編集可能
© 2014 IBM Corporation
© 2014 IBM Corporation
1-3-2-5. ホワイトボード
n  複数のユーザーで⽂文書を共有し、編集することができます
! ポータルから直接編集画⾯面に移動し、内容を更更新することができます
内容を更新すると、他のユーザーにも
更新後の内容が表示される
© 2014 IBM Corporation
© 2014 IBM Corporation
1-3-3. IBM iNotes連携機能
1.  メール使⽤用量量
2.  メール⼀一覧
3.  今⽇日の予定
4.  ToDo
© 2014 IBM Corporation
© 2014 IBM Corporation
1-3-3-1. メール使⽤用量量
n  メールDBの容量量制限に対する使⽤用状況と、受信ボックスにある未読メールの
件数を表⽰示します
「未読メール○通」のリンクを開くと
IBM iNotesのメール画面を開く
© 2014 IBM Corporation
© 2014 IBM Corporation
1-3-3-2. メール⼀一覧
n  現在ログインしているユーザーのメールDBから、受信ボックスに表⽰示されてい
るメール⽂文書の⼀一覧を取得して表⽰示します
© 2014 IBM Corporation
© 2014 IBM Corporation
1-3-3-3. 今⽇日の予定
n  現在ログインしているユーザーのメールDBから、今⽇日が開始⽇日になっているス
ケジュールの⼀一覧を取得して表⽰示します
「一週間表示」のリンクを開くと
IBM iNotesのカレンダーを開く
© 2014 IBM Corporation
© 2014 IBM Corporation
1-3-3-4. ToDo
n  現在ログインしているユーザーのメールDBから、未完了了のタスクの⼀一覧を
取得して表⽰示します
© 2014 IBM Corporation
© 2014 IBM Corporation
1-3-4. 検索索機能
1.  ユーザー検索索
© 2014 IBM Corporation
© 2014 IBM Corporation
1-3-4-1. ユーザー検索索
n  アドレス帳(Dominoディレクトリ)からユーザーを検索索し、⼀一覧表⽰示します
! 検索索結果のリンクを開くと、ユーザー⽂文書の内容を表⽰示します
ユーザー文書「上司」欄に設定されて
いるユーザーを階層表示
© 2014 IBM Corporation
© 2014 IBM Corporation
1-3-5. ブックマーク機能
1.  リンク集(共通/個⼈人)
2.  データベース⼀一覧
3.  ナビゲーター
© 2014 IBM Corporation
© 2014 IBM Corporation
1-3-5-1. リンク集(共通/個⼈人)
n  よく利利⽤用するアプリケーションへのリンクをポータル上に表⽰示することが
できます
! システム管理理者が登録したリンクのみを表⽰示する共通リンク集と、各ユー
ザーが任意のリンクを登録できる個⼈人リンク集の2種類が実装されています
リンク集の表示画面
© 2014 IBM Corporation
リンク集の編集画面
© 2014 IBM Corporation
1-3-5-2. データベース⼀一覧
n  システム管理理者が登録したリンクを⼀一覧表⽰示します
! エントリ、カテゴリ単位でアクセス権を設定し、特定のユーザー、
グループのみを対象に表⽰示するリンクを登録することができます
! リンクを⾃自⾝身の個⼈人リンク集にコピーすることができます
© 2014 IBM Corporation
© 2014 IBM Corporation
1-3-5-3. ナビゲーター
n  現在表⽰示しているページからの階層構造を表⽰示する簡易易サイトマップ機能です
「トップページ」を表示している場合、
トップページ以下のページのみ階層表示
ナビゲータの表示
ページの階層構造
© 2014 IBM Corporation
© 2014 IBM Corporation
1-3-6. 配信・通知機能
1.  バナー
2.  期限確認
3.  緊急情報
© 2014 IBM Corporation
© 2014 IBM Corporation
1-3-6-1. バナー
n  事前に登録したメッセージを指定した期間、ポータル上に表⽰示します
! システム管理理者により表⽰示⽅方法(フェードイン/アウト、スクロール)や
⽂文字⾊色のカスタマイズが可能です
ポータルヘッダー上に表示した場合
© 2014 IBM Corporation
© 2014 IBM Corporation
1-3-6-2. 期限確認
n  指定したビューに対応期限が近づいた⽂文書がある場合に警告メッセージを
ポータルに表⽰示します
! 対象のデータベース、ビューごとに表⽰示するメッセージや期限をチェック
する間隔等を設定可能です
© 2014 IBM Corporation
© 2014 IBM Corporation
1-3-6-3. 緊急情報
n  ポータル上の⽬目につきやすい位置に⽂文書を表⽰示します
! 普段は表⽰示せず、⾮非常時やキャンペーンの告知等の場合にのみ表⽰示させる
ことを想定しています
! グループを指定し⼀一部のユーザーに対してのみ表⽰示させることが可能です
緊急情報未設定時には表示されない
© 2014 IBM Corporation
© 2014 IBM Corporation
2. 開発時におけるトピックス
n  セッション/ログインタイムアウトの発⽣生
n  sessionScope の継続性
n  同⼀一 Xpage 内の複数のデータソース
n  複数ユーザーによる同⼀一⽂文書のアクセス
n  タイマーによる定期⾃自動更更新
n  サーバーサイドイベント処理理後のクライアント側処理理
n  Iframe の⾃自動リサイズ
n  部分更更新処理理完了了時のフック
n  動的 CSS ⽣生成
n  Notes オブジェクトのリサイクル
n  Dojo toolkit のバージョン
© 2014 IBM Corporation
© 2014 IBM Corporation
2-1.セッション/ログインタイムアウトの発⽣生
n  2つのタイムアウトを部分更更新時に検出してユーザーに通知します
! ログインのタイムアウト (Domino HTTP セッションのタイムアウト)
<= Domino サーバーの設定
! XPages のセッションタイムアウト (sessionScope のタイムアウト)
<= XPages アプリケーションの設定
(*) DNaX では、Anonymous ユーザーによるアクセスもサーポートします
© 2014 IBM Corporation
© 2014 IBM Corporation
2-1-1.セッション/ログインタイムアウトの発⽣生
n  セッションのタイムアウトの検出
! beforePageLoad イベント処理理
•  if (sessionScope.isInitialized) {
initSession();
sessionScope.isInitialized = true;
}
! afterRestoreView イベント処理理
•  if (!sessionScope.isInitialzied) {
sessionScope.timeoutType = “session";
context.reloadPage();
}
! ページ内に配置した「計算結果フィールド」
•  (sessionScope.timeoutType == "session") ?
"セッションがタイムアウトしました。" :
"ログインセッションがタイムアウトしました。"
© 2014 IBM Corporation
© 2014 IBM Corporation
2-1-2.セッション/ログインタイムアウトの発⽣生
n  ログインのタイムアウトの検出
! beforePageLoad イベント処理理
•  sessionScope.isLogin = !context.getUser().isAnonymous();
! ページ内に「⾮非表⽰示の⼊入⼒力力」
! afterRestoreView イベント処理理
•  if (sessionScope.isLogin == context.getUser().isAnonymous())
{
sessionScope.timeoutType = "login";
context.reloadPage();
}
© 2014 IBM Corporation
© 2014 IBM Corporation
2-2. sessionScope の継続性
n  ユーザーの切切り替え時、sessionScope 変数はどうなるでしょうか？
! Anonymous ユーザー => ユーザーAでログイン
! ユーザーA => ユーザーBでログインし直す
! ユーザーA => ログアウト = Anonymous ユーザー
© 2014 IBM Corporation
© 2014 IBM Corporation
2-2-1. sessionScope の継続性
n  ユーザーの切切り替え時、sessionScope 変数はどうなるでしょうか？
! Anonymous ユーザー => ユーザーAでログイン
: 維持される
! ユーザーA => ユーザーBでログインし直す
: 維持される
! ユーザーA => ログアウト = Anonymous ユーザー
: リセットされる
! 上２つのケースの発⽣生が想定される場合、意図的にsessionScope 変数の
リセットが必要です => セキュリティー問題の可能性をなくす
if (sessionScope.userName != @UserName()) {
initSession();
sessionScope.userName = @UserName();
}
© 2014 IBM Corporation
© 2014 IBM Corporation
2-3.同⼀一 Xpage 内の複数のデータソース
n  複数データソースを利利⽤用（編集＆保存）する場合、意識識的なコントロールが
必要です。
単一XPage
ニュースリスト⽂文書
編集
データ
ソース
mode=list
ニュース⽂文書
編集
データ
mode=news
各パートの rendered プロパティーを
URL パラメータにより制御して、
いずれか1つが表示されるようする
http:server/admin.xsp?mode=XXX
ソース
ニュース⼀一覧
ビュー
mode=view
ニュースリスト管理ページの実装
© 2014 IBM Corporation
© 2014 IBM Corporation
2-3-1.同⼀一 Xpage 内の複数のデータソース
n  「⽂文書の保存」アクションの動作
! Panel 1 の Save ボタン (「⽂文書の保存」アクション)を押すと、
Panel 1 のデータソースが保存されます
! Panel 2 の Save ボタンを押すと、
Panel 2 のデータソースが保存されます
! 最下部の Submit ボタン (「⽂文書の保存」アクション)を押すと、
全 Panel のデータソースが保存されます
n  注意点
! Submit ボタンで特定の⽂文書のみ保存したい
場合には、明⽰示的なデータソースの指定が必
要
複数データソースを扱う XPage サンプル
© 2014 IBM Corporation
! ページ URL に action=editDocument&documentId=xxxxx
パラメーターが指定される場合には、
© 2014 IBM Corporation
ignoreRequestParam による制御が必要
2-4.複数ユーザーによる同⼀一⽂文書のアクセス
n  同⼀一⽂文書を複数ユーザーでアクセスする場合（特に誰かが編集する場合）、
部分更更新を利利⽤用するには特別な注意が必要です。
ユーザーＡ
表⽰示
データ
ソース
編集
データ
ソース
ユーザーＢ
ホワイトボード
(Notes ⽂文書)
© 2014 IBM Corporation
© 2014 IBM Corporation
2-4-1.複数ユーザーによる同⼀一⽂文書のアクセス
n  部分更更新では、データソースのキャッシュは再ロードされません。
! ユーザーAが表⽰示 => ユーザーBが編集&保存 => ユーザーAが最新内容更更新のため部分更更新
•  通常の⽅方法では、ユーザーAには更更新内容は表⽰示されません
–  ⽂文書表⽰示開始時にデータソースとしてキャッシュされてしまうため
–  データソースの scope プロパティを request に変更更して
キャッシュを無効化
! ユーザーBが編集開始 => 編集をキャンセル & 部分更更新で再描画
•  キャンセル後、編集開始前の元の⽂文書は表⽰示されません
–  ブラウザから編集後の⽂文書がsubmitされているため
–  「データの検証または更更新を⾏行行わない」を有効にする必要
© 2014 IBM Corporation
© 2014 IBM Corporation
2-5.タイマーによる定期⾃自動更更新
n  表⽰示内容の⾃自動更更新のためには、クライアント側 JavaScript により、
更更新イベントを発⽣生させます。
XSP.addOnLoad(function() {
setInterval(function() {
reloadPage();
}, 60 * 1000);
});
n  reloadPage() 関数の実装⽅方法
! 全ページ更更新の場合
location.reload();
© 2014 IBM Corporation
© 2014 IBM Corporation
2-5-1.タイマーによる定期⾃自動更更新
! 部分更更新の場合
(*) 部分更更新したい対象のID
function reloadPage() {
XSP.partialRefreshGet("#{id:refreshTarget}", {
onStart: function () {
},
onComplete: function () {
},
onError: function () {
}
});
}
! 応⽤用
•  onComplete に任意の関数を定義できるので、更更に別の
XSP.partialRefreshGet を呼び出せば、複数部分の部分更更新を
連鎖して実⾏行行可能
© 2014 IBM Corporation
© 2014 IBM Corporation
2-6.サーバーサイドイベント処理理後のクライアント側処理理
n  イベント処理理時，サーバーサイド の処理理完了了後、
クライアントサイドで処理理を継続したい場合があります
! 例例：「XXX件の処理理を完了了しました」の処理理結果をポップアップしたい
© 2014 IBM Corporation
© 2014 IBM Corporation
2-6-1.サーバーサイドイベント処理理後のクライアント側処理理
n  処理理⽅方法
! onComplete プロパティ利利⽤用
! postScript() メソッド利利⽤用
イベント処理理最後の JavaScript で実⾏行行
view.postScript("alert('" + cntProc + "件の処理を完了しました')");
© 2014 IBM Corporation
© 2014 IBM Corporation
2-7. Iframe の⾃自動リサイズ
n  DNaX のポータルページは、全体を表⽰示する XPage と、Iframe で埋め込まれ
た個々のウィジェットを実装する XPage 群から構成されます
全体
ウィジェット
Iframe は、⾃自動で内部のコンテンツサイズに応じて⾼高さ調整はしてくれません
© 2014 IBM Corporation
© 2014 IBM Corporation
2-7-1. Iframe の⾃自動リサイズ
n  Iframeの内外のURLはドメインが同⼀一のため、JavaScriptによるアクセスが可能
! ウイジェットを埋め込む各Iframeには、unidを⽣生成してidを設定しておく
! Iframe内のJavaScriptで⾃自分の⾼高さを計算し、外のIframeのheightを設定す
る
function resizeIframe(height) {
var parentFrame = window.parent.document.getElementById
("#{javascript:viewScope.unid}");
var element = document.getElementById("#{id:widgetFrame}");
var height = element.scrollHeight;
parentFrame.style.height = height + 'px';
}
! 必要なタイミングで関数を実⾏行行する
•  初期描画時
•  部分更更新時
•  その他、ロジック実⾏行行の結果表⽰示内容が変化する時
© 2014
IBM Corporation
© 2014 IBM Corporation
2-8.部分更更新処理理完了了時のフック
n  ウィジェットで部分更更新が実⾏行行された際、Iframeの⾃自動サイズ調整を
⾏行行う必要があります
! 部分更更新が完了了したタイミングを知る必要
•  onComplete を利利⽤用 => 全ての部分更更新イベントに仕込むのは⼤大変
•  XSP の部分更更新関数をフック
XSP.addOnLoad(function() {
XSP._orgLoaded = XSP._loaded;
XSP._loaded = function() {
XSP._orgLoaded();
resizeIframe();
};
});
–  部分更更新タイムアウト時間の設定等でも⾏行行われていた⼿手法
XSP.submitLatency = 60000;
© 2014 IBM Corporation
今は...
© 2014 IBM Corporation
2-9.動的 CSS ⽣生成
n  サイト設定に基づき、ポータルサイトの外観を変更更できます
! CSSの切切り替えが必要
n  CSS の切切り替え⽅方法
! CSS をリソースとして XPage に組み込む
! テーマを切切り替えて、組み込む CSS を変更更する
! 動的に CSS を⽣生成する
•  通常の CSS スタイルシートの組み込み
<xp:styleSheet href="/user.css"></xp:styleSheet>
•  動的 CSS スタイルシートの組み込み
<xp:styleSheet loaded="true" rendered="true">
<![CDATA[
${javascript:
".pageTitle { color: " + sessionScope.color + ";}“
}]]>
</xp:styleSheet>
© 2014 IBM Corporation
© 2014 IBM Corporation
2-10. Notes オブジェクトのリサイクル
n  NotesXXX オブジェクトは、利利⽤用終了了後 recycle() メソッドの呼び出しが
必要です
! サーバーサイド JavaScript の裏裏では、Java が動作しています
! Xpages アプリケーションでは、全ユーザーの処理理が同⼀一VM上で
処理理されます => ロングラン時に out of memory エラーを起こしやすい
var
var
var
for
mailDb = session.getDatabase("", "mail.nsf");
viewObj = mailDb.getView("($Inbox)");
nav = viewObj.createViewNav();
(var entry = nav.getFirstDocument(), entry; ) {
...
var temp = nav.getNextDocument();
entry.recycle();
entry = temp;
}
nav.recycle();
viewObj.recycle();
mailDb.recycle();
© 2014 IBM Corporation
© 2014 IBM Corporation
2-11. Dojo toolkit のバージョン
n  Dominoサーバーのバージョンにより、Dojo toolkit のバージョンは異異なります
! Domino サーバー⾃自⾝身のバージョン: Domino 8.5.x, Domono 9.0.x
! フィックスパックのバージョン Domino 9.0.1 FP1, FP2
•  FP1: Dojo toolkit 1.8.3
•  FP2: Dojo toolkit 1.9.2
! Dojo toolkit のバージョンにより、仕様、挙動、バグが変わることが
あります。
•  IE8 上での drag & drop
–  Dojo toolkit 1.8.3: OK
–  Dojo toolkit 1.9.2: NG
! 対処
•  動作確認テストする
•  Dojo toolkit を古いバージョンに固定する
© 2014 IBM Corporation
© 2014 IBM Corporation