2013年11月8日に使った【C-3】ジャンボフェリー 予約システムの事例からみるXPagesを使った提案・開発の概要、セッションのプレゼンテーションです

1. 御社ホームページがYahoo、Google等のサーチエンジンに評価され上位表示される様にサポートを行います。
【C-3】
ジャンボフェリー 予約システムの事例からみる
XPagesを使った提案・開発の概要
ケートリック, LLC
www.ktrick.com
田付 和慶
(ktatsuki@ktrick.com)

2. 自己紹介

田付 和慶 （たつき かずのり）

ケートリック, LLC
代表 兼 何でも屋
IBM Connect (Lotusphere) オンライン システムで
XPageアプリを多数開発してきた経験をもつ

他にもC、C++、Java、Javascript、PHP などの言語を
使ったWEBアプリやiPhone, Android アプリの開発が得意


3. 目次

事例内容

XWork ServerでのXPages開発

Domino / XPagesでWebアプリを作る優位性

Dominoサーバーのチューニング

XPages開発

4. 事例内容
お客様のニーズ
WEBメール・フォームによるフェリー予約
からの改善
管理業務の効率化
-
社員総出で対応しても追いつかない状態を改善する
将来の拡張に備えたWebシステム基盤の整備
-
ホテル予約なども出来るようにしたい
https://www.travel-yoyaku.net/

5. ソリューション
XWork Serverで「XPages」技術を活用してWebアプリケーション開発
XWork
Server
ビジター
XPagesアプリケーション
従業員
管理者

6. 実際に稼働
している
システムを
見てみましょう

7. 導入効果

低予算、短納期を実現

ユーザー・インターフェースの使い勝手の改善

リピーターに対する入力の負担を軽減

従業員の業務効率化を実現

リアルタイムに残席数の見える化

8. DominoもXPagesも知らないお客様に
どのように提案していったのか？

9. こんな感じの提案ではなくて・・・・

10. こんな感じの提案！！
になるために
Domino / XPagesで作る
WEBアプリの特性を理解しましょう

11. XWork ServerでのXPages開発
XWork Server とは？

ライセンス形態がプロセッサーValue Unit（PVU）ではなく、年間使用料に
よるDominoサーバーの新しい形のライセンスオファリング

Domino Utility Serverよりもリーズナブルな価格

基本、Notes Client からのアクセスは出来ない。WEBユーザーのみ

グループウェア・メッセージング機能等の利用は
出来ない
１サーバーに設置できるデータベース数に限りがある
（IBM XWork Server V9.0では１ライセンスで８つ
までDBを持つことが可能）


12. Domino / XPagesでWebアプリを作る優位性（１）

セキュリティ:
- ビジネスの最前線で使われてきたIBM Dominoのセキュリ
ティ技術の元、開発できる
(オープンソース プロジェクトの場合、サーバー、開発言語、フレーム
ワークによるセキュリティホールの対応は全て自己責任）
- ACL、 読者(Readers) / 作成者 (Authors) フィールド
WEBユーザーの権限設定に対して柔軟に対応が可能
(ACLに相当する機能を自前で開発すると途方も無い工数に）

13. Domino / XPagesでWebアプリを作る優位性（２）

管理・メンテナンスの容易さ：
Domino Administratorを使った管理ツールが充実
・log.nsfの履歴は1～２週間程度に伸ばしての運用が実用的

コード拡張の柔軟性：
フォーム – フィールド（SQLでいうところのカラム）を追加するとき
のリスクが少ない
ビュー – ソートやカテゴリービューをそのままXPagesを用いて表示出
来る
Javaでのプログラミング

14. Domino / XPagesでWebアプリを作る優位性（３）

高度な運用のための機能が充実：
・シングルサインオン(SSO)
・クラスタリング
(自前でクラスタリング機能を実装するには高度なスキルと検証が必要）

15. Domino / XPagesでWebアプリを作る優位性（４）

XPagesによる開発工数の短縮：
部分更新 – プログラミングせずにAjaxの導入が可能
Wysiwygエディタ – 標準で高機能なwysiwygエディターを実装できる
Xpages Extension Library – より使いやすいUIを作ることが可能

16. Domino / XPagesでWebアプリを作る優位性（５）

拡張性：
・OpenNTFで公開されている様々なXPagesアプリを利用できる
モバイル版WEBアプリの作成 – Xpages Mobile Control など
・他のシステムとの連携
ソーシャル連携などの機能も充実

17. 逆に、 Domino / XPagesを利用する時の注意点

ユーザー文書に関わる変更の制御が難しい
（例）パスワードの変更やログインID（Email）の変更等
→対応例：OpenNTF「XPages User Selfregister and Avatar
App」にXPages版のパスワードリセットのコードがあります

特定の文書への書き込み処理が多くて
[保存時の競合]が発生してしまうようなケースの制御
（例）カウントアップしていく予約番号のナンバリング制御等
→対応例： [保存時の競合]が発生した場合の制御コードを丁寧に
書いていく
【Lotusscript】
docCtr.Save(False, False, True)
の戻り値がFalseの場合、競合文書を削除して保存のリトライ、等

18. ■開発編

19. Dominoサーバーのチューニング（１）

Dominoのセキュリティ ロックダウン
参考サイト
（ちょっと古い）：
http://www.ibm.com/developerworks/jp/lotus/library/dominowebserver-security.html
・サーバーアクセスの見直し
- SSL通信を有効にする
- オープンするポートの設定
・データベースアクセスの見直し
- Dominoがはじめから持つNSF,NTF（catalog.nsf等）の権限を設定
ACLで「デフォルト」と「匿名アクセス」は極力全てアクセス権限なしに設定
・拡張ACL（ｘACL）
- ディレクトリ(names.nsf等)に適応出来るアクセス制御機能

20. Dominoサーバーのチューニング（２）

最新のHotfixを確認

不必要なサービスの停止
カレンダー系のサービスタスク（nsched, nrnrmgr, ncalconn）等の不必要なサービ
スは停止

セッションベースのログイン設定
インターネットサイト文書から設定

ログイン画面のカスタマイズ
domCfg.nsfを使って編集

最新のXPages Extension Library のインストール

21. XPages開発 （画面の遷移）
予約画面
①予約画面
②ログイン画面
SessionScope
に保存
③予約確認画面
④予約完了画面
SessionScope
に保存
文書に保存

22. XPages開発 （画面の遷移の管理）

SessionScope.orderPage 変数１つで画面の遷移を管理

BeforePageLoad イベントで制御
<!-- 画面２ページ目での制御例 -->
<xp:this.beforePageLoad>
<![CDATA[#{javascript:
if( null==sessionScope.orderPage || sessionScope.orderPage < 1){
context.redirectToPage("order.xsp");
}
else{
sessionScope.orderPage = 2;
}
}
]]>
</xp:this.beforePageLoad>

23. XPages開発
フォームの値は画面遷移後も保持するように
SessionScopeに格納
Dojo Number Spinner
コントロール
このボタンで下の
Dojo DataGridを
部分更新
予約状況は、SSJSで
動的に計算させて描画
選択された文書のUNIDの取得には
CSJS onClickイベントを使用

24. XPages開発 （Dojo DataGrid ソースコード1）
<?xml version="1.0" encoding="UTF-8"?>
<xp:view xmlns:xp="http://www.ibm.com/xsp/core"
xmlns:xe="http://www.ibm.com/xsp/coreex"
xmlns:xc="http://www.ibm.com/xsp/custom">
<xp:div id="div_Schedule_depart"
styleClass="gridbox">
<xe:restService
id="restServiceDepartSche">
<xe:this.service>
<xe:viewJsonService
viewName="[YOUR_VIEW_HERE]" defaultColumns="true"
contentType="application/json" var="entry"
formName="[YOUR_FORM_HERE]">
<xe:this.columns>
<xe:restViewColumn
name="DSResvStat">
<xp:this.value><![CDATA[#{javascript:""; /*予約状況の計算プログラムが入り
ます*/ }]]></xp:this.value>
</xe:restViewColumn>
</xe:this.columns>
<xe:this.keys><![CDATA[#{javascript:""; /*Viewの絞込のキーワードを返すようにします
*/ }]]></xe:this.keys>
</xe:viewJsonService>
</xe:this.service>
</xe:restService>

25. XPages開発 （Dojo DataGrid ソースコード2）
<xe:djxDataGrid id="djxDataGridDepart"
style="width: 100%;height: auto; padding: 1px"
storeComponentId="restServiceDepartSche" selectionMode="single"
selectable="false" loadingMessage="検索しています" autoHeight="5"
jsId="jsDataGridDepart">
<xe:djxDataGridColumn
id="djxDataGridColumn1" label="便名" field="DSName">
</xe:djxDataGridColumn>
<xe:djxDataGridColumn
id="djxDataGridColumn2" label="出航地" field="DSDepartCity"
width="50px">
</xe:djxDataGridColumn>
<xe:djxDataGridColumn
id="djxDataGridColumn3" label="出航時間" field="DSDepartTimeStr">
</xe:djxDataGridColumn>
<xe:djxDataGridColumn
id="djxDataGridColumn4" label="目的地" field="DSArriveCity"
width="50px">
</xe:djxDataGridColumn>
<xe:djxDataGridColumn
id="djxDataGridColumn5" label="到着時間" field="DSArriveTimeStr"
width="50px">
</xe:djxDataGridColumn>
<xe:djxDataGridColumn
id="djxDataGridColumn11" label="予約状況" field="DSResvStat" width="auto">
</xe:djxDataGridColumn>
</xe:djxDataGrid>

26. XPages開発 （Dojo DataGrid ソースコード3）
<xp:scriptBlock id="scriptBlock1">
<xp:this.value><![CDATA[XSP.addOnLoad(function(){
dojo.connect(dijit.byId("#{id:djxDataGridDepart}"), "_onFetchComplete",function()
{
// 画面遷移先から戻ってきた時に以前に選択された値を選択状態にしておくためのCSJS
var selUnid = dojo.byId('#{id:scheDepartDSUnid}');
var grid = dijit.byId("#{id:djxDataGridDepart}");
if( selUnid && selUnid.value != ""){
for (var i = 0; i < grid.rowCount; i++){
theitem = grid.getItem(i);
dojo.forEach(grid.store.getAttributes(theitem), function(attr){
if(attr == '@unid'){
var value = grid.store.getValues(theitem, attr);
if( value == selUnid.value){
grid.selection.setSelected(i,true);
}
}
});
}
}
grid.canSort = function(){return false};
});
});]]></xp:this.value>
</xp:scriptBlock>
</xp:div>
<!-- GridViewで選択された行のUNIDを格納する隠しフィールド -->
<xp:inputText id="scheDepartDSUnid" style="display:none;"
value="#{sessionScope.scheDepartDSUnid}">
</xp:inputText>

27. XPages開発 （Dojo DataGrid ソースコード4）
<!-- 次へ進むボタンを押下時にGridViewで選択された行のUNIDを取得して隠しフィールドに保存 -->
<xp:div styleClass="enter">
<xp:link escape="true" id="link2">
<xp:image id="image15" url="/button-next.gif"
alt="次へ進む">
</xp:image>
<xp:eventHandler event="onclick" submit="true"
immediate="false" save="true">
<xp:this.script><![CDATA[var grid = dijit.byId('#{id:djxDataGridDepart}');
var items = grid.selection.getSelected();
if(items.length) {
dojo.forEach(items, function(selectedItem) {
if(selectedItem!==null) {
dojo.forEach(grid.store.getAttributes(selectedItem), function(attribute){
var value = grid.store.getValues(selectedItem, attribute);
//
alert('attribute: ' + attribute + ', value: ' + value);
if(attribute == '@unid'){
dojo.byId('#{id:scheDepartDSUnid}').value = value;
}
});
}
});
}
]]></xp:this.script>
</xp:eventHandler>
</xp:link>
</xp:div>
</xp:view>

28. XPages開発 （ポップアップログイン）
OpenNTF 「Xpages Dojo Login Custom Control」
をカスタマイズして利用
OpenNTF 「Xpages Dojo Login Custom Control」:
http://www.openntf.org/Internal/home.nsf/project.xsp?action=openDocument&name=Xpages%20Dojo%20Login%20Custom%20Control

29. XPages開発 （自動アカウント登録）
OpenNTF 「XPages User Selfregister and Avatar App」
をカスタマイズして利用
アカウント作成ボタンを押すと、
入力されたEmailアドレスに
アカウント有効化URLが記載
されたメールが送信される
OpenNTF 「XPages User Selfregister and Avatar App」:
http://www.openntf.org/Internal/home.nsf/project.xsp?action=openDocument&name=XPages%20User%20Selfregister%20and%20Avatar%20App

30. いかがでしたでしょうか？
機はすでに熟しています！

31. みんなのXPagesアプリ待ってるぜ！

32. ご清聴ありがとうございました