【C-3】ジャンボフェリー予約システムの事例からみるXPagesを使った提案・開発の概要

御社ホームページがYahoo、Google等のサーチエンジンに評価され上位表示される様にサポートを行います。

ケートリック, LLCwww.ktrick.com

田付和慶 ([email protected])

【C-3】ジャンボフェリー予約システムの事例からみる

XPagesを使った提案・開発の概要

自己紹介田付和慶（たつきかずのり）

ケートリック, LLC 代表兼何でも屋

IBM Connect (Lotusphere) オンラインシステムでXPageアプリを多数開発してきた経験をもつ

他にもC、C++、Java、Javascript、PHP などの言語を使ったWEBアプリやiPhone, Android アプリの開発が得意

目次

事例内容

XWork ServerでのXPages開発

Domino / XPagesでWebアプリを作る優位性

Dominoサーバーのチューニング

XPages開発

事例内容

お客様のニーズ

WEBメール・フォームによるフェリー予約からの改善

管理業務の効率化 - 社員総出で対応しても追いつかない状態を改善する

将来の拡張に備えたWebシステム基盤の整備 - ホテル予約なども出来るようにしたい

https://www.travel-yoyaku.net/

ソリューションXWork Serverで「XPages」技術を活用してWebアプリケーション開発

ビジター従業員管理者

XWorkServer

XPagesアプリケーション

実際に稼働している

システムを見てみましょう

導入効果

低予算、短納期を実現

ユーザー・インターフェースの使い勝手の改善

リピーターに対する入力の負担を軽減

従業員の業務効率化を実現

リアルタイムに残席数の見える化

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

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

こんな感じの提案！！

になるために Domino / XPagesで作る WEBアプリの特性を理解しましょう

XWork ServerでのXPages開発

XWork Server とは？ライセンス形態がプロセッサーValue Unit（PVU）ではなく、年間使用料に

よるDominoサーバーの新しい形のライセンスオファリング

Domino Utility Serverよりもリーズナブルな価格

基本、Notes Client からのアクセスは出来ない。WEBユーザーのみ

グループウェア・メッセージング機能等の利用は出来ない

１サーバーに設置できるデータベース数に限りがある（IBM XWork Server V9.0では１ライセンスで８つ

までDBを持つことが可能）

Domino / XPagesでWebアプリを作る優位性（１）

セキュリティ:

- ビジネスの最前線で使われてきたIBM Dominoのセキュリティ技術の元、開発できる (オープンソースプロジェクトの場合、サーバー、開発言語、フレームワークによるセキュリティホールの対応は全て自己責任）

- ACL、読者(Readers) / 作成者 (Authors) フィールド WEBユーザーの権限設定に対して柔軟に対応が可能 (ACLに相当する機能を自前で開発すると途方も無い工数に）

管理・メンテナンスの容易さ：Domino Administratorを使った管理ツールが充実・log.nsfの履歴は1～２週間程度に伸ばしての運用が実用的

コード拡張の柔軟性：フォーム – フィールド（SQLでいうところのカラム）を追加するときのリスクが少ない

ビュー – ソートやカテゴリービューをそのままXPagesを用いて表示出来る

Javaでのプログラミング

Domino / XPagesでWebアプリを作る優位性（２）

高度な運用のための機能が充実：・シングルサインオン(SSO)

・クラスタリング (自前でクラスタリング機能を実装するには高度なスキルと検証が必要）

Domino / XPagesでWebアプリを作る優位性（３）

XPagesによる開発工数の短縮：

部分更新 – プログラミングせずにAjaxの導入が可能

Wysiwygエディタ – 標準で高機能なwysiwygエディターを実装できる

Xpages Extension Library – より使いやすいUIを作ることが可能

Domino / XPagesでWebアプリを作る優位性（４）

拡張性：・OpenNTFで公開されている様々なXPagesアプリを利用できる

モバイル版WEBアプリの作成 – Xpages Mobile Control など

・他のシステムとの連携ソーシャル連携などの機能も充実

Domino / XPagesでWebアプリを作る優位性（５）

ユーザー文書に関わる変更の制御が難しい（例）パスワードの変更やログインID（Email）の変更等

→対応例：OpenNTF「XPages User Selfregister and Avatar App」にXPages版のパスワードリセットのコードがあります

特定の文書への書き込み処理が多くて[保存時の競合]が発生してしまうようなケースの制御（例）カウントアップしていく予約番号のナンバリング制御等

→対応例： [保存時の競合]が発生した場合の制御コードを丁寧に書いていく【Lotusscript】 docCtr.Save(False, False, True) の戻り値がFalseの場合、競合文書を削除して保存のリトライ、等

逆に、 Domino / XPagesを利用する時の注意点

■開発編

Dominoサーバーのチューニング（１） Dominoのセキュリティロックダウン

参考サイト（ちょっと古い）： http://www.ibm.com/developerworks/jp/lotus/library/dominowebserver-security.html

・サーバーアクセスの見直し - SSL通信を有効にする - オープンするポートの設定

・データベースアクセスの見直し - Dominoがはじめから持つNSF,NTF（catalog.nsf等）の権限を設定 ACLで「デフォルト」と「匿名アクセス」は極力全てアクセス権限なしに設定

・拡張ACL（ｘACL） - ディレクトリ(names.nsf等)に適応出来るアクセス制御機能

http://www.ibm.com/developerworks/jp/lotus/library/dominowebserver-security.html

Dominoサーバーのチューニング（２）最新のHotfixを確認

不必要なサービスの停止カレンダー系のサービスタスク（nsched, nrnrmgr, ncalconn）等の不必要なサービスは停止

セッションベースのログイン設定インターネットサイト文書から設定

ログイン画面のカスタマイズ domCfg.nsfを使って編集

最新のXPages Extension Library のインストール

文書に保存

XPages開発（画面の遷移）

予約画面 ②ログイン画面①予約画面 ③予約確認画面 ④予約完了画面

SessionScopeに保存

SessionScopeに保存

XPages開発（画面の遷移の管理）

<xp:this.beforePageLoad><![CDATA[#{javascript:if( null==sessionScope.orderPage || sessionScope.orderPage < 1){ context.redirectToPage("order.xsp");}else{ sessionScope.orderPage = 2;}}]]></xp:this.beforePageLoad>

SessionScope.orderPage 変数１つで画面の遷移を管理

BeforePageLoad イベントで制御

XPages開発

このボタンで下のDojo DataGridを部分更新

Dojo Number Spinnerコントロール

予約状況は、SSJSで動的に計算させて描画

選択された文書のUNIDの取得にはCSJS onClickイベントを使用

フォームの値は画面遷移後も保持するようにSessionScopeに格納

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:viewJsonServiceviewName="[YOUR_VIEW_HERE]" defaultColumns="true"contentType="application/json" var="entry"formName="[YOUR_FORM_HERE]"><xe:this.columns>

<xe:restViewColumnname="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>

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:djxDataGridColumnid="djxDataGridColumn1" label="便名" field="DSName">

</xe:djxDataGridColumn><xe:djxDataGridColumn

id="djxDataGridColumn2" label="出航地" field="DSDepartCity"width="50px">


id="djxDataGridColumn3" label="出航時間" field="DSDepartTimeStr"></xe:djxDataGridColumn><xe:djxDataGridColumn

id="djxDataGridColumn4" label="目的地" field="DSArriveCity"width="50px">


id="djxDataGridColumn5" label="到着時間" field="DSArriveTimeStr"width="50px">


id="djxDataGridColumn11" label="予約状況" field="DSResvStat" width="auto"></xe:djxDataGridColumn>

</xe:djxDataGrid>

XPages開発（Dojo DataGrid ソースコード3）<xp:scriptBlock id="scriptBlock1">

<xp:this.value><![CDATA[XSP.addOnLoad(function(){ dojo.connect(dijit.byId("#{id:djxDataGridDepart}"), "_onFetchComplete",function(){

// 画面遷移先から戻ってきた時に以前に選択された値を選択状態にしておくためのCSJSvar 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>

<xp:inputText id="scheDepartDSUnid" style="display:none;"

value="#{sessionScope.scheDepartDSUnid}"></xp:inputText>

XPages開発（Dojo DataGrid ソースコード4）<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>

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

XPages開発（自動アカウント登録）

OpenNTF 「XPages User Selfregister and Avatar App」をカスタマイズして利用

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

アカウント作成ボタンを押すと、入力されたEmailアドレスにアカウント有効化URLが記載されたメールが送信される

いかがでしたでしょうか？

機はすでに熟しています！

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

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

Technology

【C-3】ジャンボフェリー 予約システムの事例からみるXPagesを使った提案・開発の概要

【C-3】ジャンボフェリー予約システムの事例からみるXPagesを使った提案・開発の概要