目次 1. Domino NSF aggregator with XPages (DNaX) とは 2. 開発時におけるトピックス ( テクニック 問題 考慮点 など )

テクてく Lotus 技術者夜会ザ デベロッパー編 XPages によるアプリケーション開発の実例例 DNaX 2.1 2014 年年 11 月 7 日 祖 父江達也 TSDL ISSC #2 日本アイ ビー エム株式会社 1

目次 1. Domino NSF aggregator with XPages (DNaX) とは 2. 開発時におけるトピックス ( テクニック 問題 考慮点 など )

1-1. Domino NSF aggregator with XPages (DNaX) とは n DNaX は Domino サーバーを利利 用してポータルサイトを構築するフレームワークです サイトのデザインからコンテンツの管理理まで 全ての操作をブラウザー経由で実施します Domino サーバーをご利利 用の 小中規模のお客様で 主なアプリケーションが Domino 上で動作している場合に最適なソリューションです 様々なコンテンツ表 示部品が予め 用意されており それらを組み合わせることで容易易に NSF 上のデータをサイト上に統合可能です DNaX のサンプルとして提供されるポータル画面

1-2. DNaX が提供する機能 n ポータルサイト表 示機能 管理理者の設定に基づき ポータルサイトを表 示する機能 ポータルページ内にさまざまなコンテンツを表 示するための 20 以上のウィジェットを標準で 用意 n ポータルサイト管理理機能! サイト管理理機能 ポータルサイトのページ構成および外観を設定 管理理する機能! コンテンツ管理理機能 ウィジェット内に表 示するコンテンツを作成 管理理する機能

1-3. DNaX が提供するウィジェット 1. Notes データベース連携 集約機能! 単 一ビュー表 示! 複数ビュー集約表 示! グラフ表 示 2. 文書表 示機能! ニュース 一覧! 画像リスト! スライドショー! 文書表 示! ホワイトボード 3. IBM inotes 連携機能! メール使 用量量! メール 一覧! 今 日の予定! ToDo 4. 検索索機能! ユーザー検索索 5. ブックマーク機能! リンク集 ( 共通 / 個 人 )! データベース 一覧! ナビゲーター 6. 配信 通知機能! バナー! 期限確認! 緊急情報

1-3-1. Notes データベース連携 集約機能 1. 単 一ビュー表 示 2. 複数ビュー集約表 示 3. グラフ表 示

1-3-1-1. 単 一ビュー表 示 n Domino サーバー上のデータベースの 文書 一覧を表 示します! 指定したビューから特定の列列のみを選んで表 示することができます

1-3-1-2. 複数ビュー集約表 示 n 複数のデータベースから最新の 文書を抽出して 一覧表 示します! 掲 示板やニュース DB の新着 文書や 承認待ち 文書の 一覧など設定により様々な 用途で表 示することができます 通達と掲示板から新着文書を取得し 新着順にソートして表示 未読文書は青字で表示既読文書 ( 黒 ) を非表示にすることも可 自身が承認者 処理担当者になっている文書を複数 DB から抽出表示可能

1-3-1-3. グラフ表 示 n ポータルのコンテンツ設定で対象のビューやグラフの種類を含む URL を指定することで ポータルに特定のデータベースの集計データを図で表 示可能です

1-3-2. 文書表 示機能 1. ニュース 一覧 2. 画像リスト 3. スライドショー 4. 文書表 示 5. ホワイトボード

1-3-2-1. ニュース 一覧 n カテゴリ 件名 本 文を登録した 文書の 一覧を表 示します! ニュース 文書から別のコンテンツに URL でリンクすることも可能です リンクをクリックすると文書を開く

1-3-2-2. 画像リスト n 画像付きのニュース 一覧です! リンクをクリックすると 登録したニュースを開いたり 他のコンテンツを直接開くことが可能です

1-3-2-3. スライドショー n 複数のニュースを数秒間隔で切切り替えて表 示します 数秒間隔でフェードアウトし 次の文書の表示に切り替わる

1-3-2-4. 文書表 示 n リッチテキスト形式で登録した Notes 文書の内容をポータル上に表 示します! Web ブラウザからリッチテキストで 文書を登録することが可能です Web ブラウザからリッチテキストで編集可能

1-3-2-5. ホワイトボード n 複数のユーザーで 文書を共有し 編集することができます! ポータルから直接編集画 面に移動し 内容を更更新することができます 内容を更新すると 他のユーザーにも更新後の内容が表示される

1-3-3. IBM inotes 連携機能 1. メール使 用量量 2. メール 一覧 3. 今 日の予定 4. ToDo

1-3-3-1. メール使 用量量 n メール DB の容量量制限に対する使 用状況と 受信ボックスにある未読メールの件数を表 示します 未読メール 通 のリンクを開くと IBM inotes のメール画面を開く

1-3-3-2. メール 一覧 n 現在ログインしているユーザーのメール DB から 受信ボックスに表 示されているメール 文書の 一覧を取得して表 示します

1-3-3-3. 今 日の予定 n 現在ログインしているユーザーのメール DB から 今 日が開始 日になっているスケジュールの 一覧を取得して表 示します 一週間表示 のリンクを開くと IBM inotes のカレンダーを開く

1-3-3-4. ToDo n 現在ログインしているユーザーのメール DB から 未完了了のタスクの 一覧を取得して表 示します

1-3-4. 検索索機能 1. ユーザー検索索

1-3-4-1. ユーザー検索索 n アドレス帳 (Domino ディレクトリ ) からユーザーを検索索し 一覧表 示します! 検索索結果のリンクを開くと ユーザー 文書の内容を表 示します ユーザー文書 上司 欄に設定されているユーザーを階層表示

1-3-5. ブックマーク機能 1. リンク集 ( 共通 / 個 人 ) 2. データベース 一覧 3. ナビゲーター

1-3-5-1. リンク集 ( 共通 / 個 人 ) n よく利利 用するアプリケーションへのリンクをポータル上に表 示することができます! システム管理理者が登録したリンクのみを表 示する共通リンク集と 各ユーザーが任意のリンクを登録できる個 人リンク集の 2 種類が実装されています リンク集の表示画面 リンク集の編集画面

1-3-5-2. データベース 一覧 n システム管理理者が登録したリンクを 一覧表 示します! エントリ カテゴリ単位でアクセス権を設定し 特定のユーザー グループのみを対象に表 示するリンクを登録することができます! リンクを 自 身の個 人リンク集にコピーすることができます

1-3-5-3. ナビゲーター n 現在表 示しているページからの階層構造を表 示する簡易易サイトマップ機能です トップページ を表示している場合 トップページ以下のページのみ階層表示 ナビゲータの表示 ページの階層構造

1-3-6. 配信 通知機能 1. バナー 2. 期限確認 3. 緊急情報

1-3-6-1. バナー n 事前に登録したメッセージを指定した期間 ポータル上に表 示します! システム管理理者により表 示 方法 ( フェードイン / アウト スクロール ) や 文字 色のカスタマイズが可能です ポータルヘッダー上に表示した場合

1-3-6-2. 期限確認 n 指定したビューに対応期限が近づいた 文書がある場合に警告メッセージをポータルに表 示します! 対象のデータベース ビューごとに表 示するメッセージや期限をチェックする間隔等を設定可能です

1-3-6-3. 緊急情報 n ポータル上の 目につきやすい位置に 文書を表 示します! 普段は表 示せず 非常時やキャンペーンの告知等の場合にのみ表 示させることを想定しています! グループを指定し 一部のユーザーに対してのみ表 示させることが可能です 緊急情報未設定時には表示されない

2. 開発時におけるトピックス n セッション / ログインタイムアウトの発 生 n sessionscope の継続性 n 同 一 Xpage 内の複数のデータソース n 複数ユーザーによる同 一 文書のアクセス n タイマーによる定期 自動更更新 n サーバーサイドイベント処理理後のクライアント側処理理 n Iframe の 自動リサイズ n 部分更更新処理理完了了時のフック n 動的 CSS 生成 n Notes オブジェクトのリサイクル n Dojo toolkit のバージョン

2-1. セッション / ログインタイムアウトの発 生 n 2 つのタイムアウトを部分更更新時に検出してユーザーに通知します! ログインのタイムアウト (Domino HTTP セッションのタイムアウト ) <= Domino サーバーの設定! XPages のセッションタイムアウト (sessionscope のタイムアウト ) <= XPages アプリケーションの設定 (*) DNaX では Anonymous ユーザーによるアクセスもサーポートします

2-1-1. セッション / ログインタイムアウトの発 生 n セッションのタイムアウトの検出! beforepageload イベント処理理 if (sessionscope.isinitialized) { initsession(); sessionscope.isinitialized = true; }! afterrestoreview イベント処理理 if (!sessionscope.isinitialzied) { sessionscope.timeouttype = session"; context.reloadpage(); }! ページ内に配置した 計算結果フィールド (sessionscope.timeouttype == "session")? " セッションがタイムアウトしました " : " ログインセッションがタイムアウトしました "

2-1-2. セッション / ログインタイムアウトの発 生 n ログインのタイムアウトの検出! beforepageload イベント処理理 sessionscope.islogin =!context.getuser().isanonymous();! ページ内に 非表 示の 入 力力! afterrestoreview イベント処理理 if (sessionscope.islogin == context.getuser().isanonymous()) { sessionscope.timeouttype = "login"; context.reloadpage(); }

2-2. sessionscope の継続性 n ユーザーの切切り替え時 sessionscope 変数はどうなるでしょうか?! Anonymous ユーザー => ユーザー A でログイン! ユーザー A => ユーザー B でログインし直す! ユーザー A => ログアウト = Anonymous ユーザー

2-2-1. sessionscope の継続性 n ユーザーの切切り替え時 sessionscope 変数はどうなるでしょうか?! Anonymous ユーザー => ユーザー Aでログイン : 維持される! ユーザー A => ユーザー Bでログインし直す : 維持される! ユーザー A => ログアウト = Anonymous ユーザー : リセットされる! 上 2 つのケースの発 生が想定される場合 意図的に sessionscope 変数のリセットが必要です => セキュリティー問題の可能性をなくす if (sessionscope.username!= @UserName()) { initsession(); sessionscope.username = @UserName(); }

2-3. 同 一 Xpage 内の複数のデータソース n 複数データソースを利利 用 ( 編集 & 保存 ) する場合 意識識的なコントロールが必要です 単一 XPage ニュースリスト 文書編集 データ mode=list ソース 各パートの rendered プロパティーを URL パラメータにより制御して いずれか 1 つが表示されるようする ニュース 文書編集 データ mode=news ソース http:server/admin.xsp?mode=xxx ニュース 一覧ビュー mode=view ニュースリスト管理ページの実装

2-3-1. 同 一 Xpage 内の複数のデータソース n 文書の保存 アクションの動作! Panel 1 の Save ボタン ( 文書の保存 アクション ) を押すと Panel 1 のデータソースが保存されます! Panel 2 の Save ボタンを押すと Panel 2 のデータソースが保存されます! 最下部の Submit ボタン ( 文書の保存 アクション ) を押すと 全 Panel のデータソースが保存されます n 注意点 複数データソースを扱う XPage サンプル! Submit ボタンで特定の 文書のみ保存したい場合には 明 示的なデータソースの指定が必要! ページ URL に action=editdocument&documentid=xxxxx パラメーターが指定される場合には ignorerequestparam による制御が必要

2-4. 複数ユーザーによる同 一 文書のアクセス n 同 一 文書を複数ユーザーでアクセスする場合 ( 特に誰かが編集する場合 ) 部分更更新を利利 用するには特別な注意が必要です ユーザー A 表 示 データソース 編集 データソース ユーザー B ホワイトボード (Notes 文書 )

2-4-1. 複数ユーザーによる同 一 文書のアクセス n 部分更更新では データソースのキャッシュは再ロードされません! ユーザー A が表 示 => ユーザー B が編集 & 保存 => ユーザー A が最新内容更更新のため部分更更新 通常の 方法では ユーザー A には更更新内容は表 示されません 文書表 示開始時にデータソースとしてキャッシュされてしまうため データソースの scope プロパティを request に変更更してキャッシュを無効化! ユーザー B が編集開始 => 編集をキャンセル & 部分更更新で再描画 キャンセル後 編集開始前の元の 文書は表 示されません ブラウザから編集後の 文書が submit されているため データの検証または更更新を 行行わない を有効にする必要

2-5. タイマーによる定期 自動更更新 n 表 示内容の 自動更更新のためには クライアント側 JavaScript により 更更新イベントを発 生させます XSP.addOnLoad(function() { setinterval(function() { reloadpage(); }, 60 * 1000); }); n reloadpage() 関数の実装 方法! 全ページ更更新の場合 location.reload();

2-5-1. タイマーによる定期 自動更更新! 部分更更新の場合 (*) 部分更更新したい対象のID function reloadpage() { XSP.partialRefreshGet("#{id:refreshTarget}", { onstart: function () { }, oncomplete: function () { }, onerror: function () { } }); }! 応 用 oncomplete に任意の関数を定義できるので 更更に別の XSP.partialRefreshGet を呼び出せば 複数部分の部分更更新を連鎖して実 行行可能

2-6. サーバーサイドイベント処理理後のクライアント側処理理 n イベント処理理時, サーバーサイドの処理理完了了後 クライアントサイドで処理理を継続したい場合があります! 例例 : XXX 件の処理理を完了了しました の処理理結果をポップアップしたい

2-6-1. サーバーサイドイベント処理理後のクライアント側処理理 n 処理理 方法! oncomplete プロパティ利利 用! postscript() メソッド利利 用イベント処理理最後の JavaScript で実 行行 view.postscript("alert('" + cntproc + " 件の処理を完了しました ')");

2-7. Iframe の 自動リサイズ n DNaX のポータルページは 全体を表 示する XPage と Iframe で埋め込まれた個々のウィジェットを実装する XPage 群から構成されます 全体 ウィジェット Iframe は 自動で内部のコンテンツサイズに応じて 高さ調整はしてくれません

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'; }! 必要なタイミングで関数を実 行行する 初期描画時 部分更更新時 その他 ロジック実 行行の結果表 示内容が変化する時

2-8. 部分更更新処理理完了了時のフック n ウィジェットで部分更更新が実 行行された際 Iframe の 自動サイズ調整を 行行う必要があります! 部分更更新が完了了したタイミングを知る必要 oncomplete を利利 用 => 全ての部分更更新イベントに仕込むのは 大変 XSP の部分更更新関数をフック XSP.addOnLoad(function() { XSP._orgLoaded = XSP._loaded; XSP._loaded = function() { XSP._orgLoaded(); resizeiframe(); }; }); 部分更更新タイムアウト時間の設定等でも 行行われていた 手法 XSP.submitLatency = 60000; 今は...

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>

2-10. Notes オブジェクトのリサイクル n NotesXXX オブジェクトは 利利 用終了了後 recycle() メソッドの呼び出しが必要です! サーバーサイド JavaScript の裏裏では Java が動作しています! Xpages アプリケーションでは 全ユーザーの処理理が同 一 VM 上で処理理されます => ロングラン時に out of memory エラーを起こしやすい var maildb = session.getdatabase("", "mail.nsf"); var viewobj = maildb.getview("($inbox)"); var nav = viewobj.createviewnav(); for (var entry = nav.getfirstdocument(), entry; ) {... var temp = nav.getnextdocument(); entry.recycle(); entry = temp; } nav.recycle(); viewobj.recycle(); maildb.recycle();

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 を古いバージョンに固定する