【c-3】ジャンボフェリー...
DESCRIPTION
2013年11月8日に使った【C-3】ジャンボフェリー 予約システムの事例からみるXPagesを使った提案・開発の概要、セッションのプレゼンテーションですTRANSCRIPT
御社ホームページが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ユーザーのみ
グループウェア・メッセージング機能等の利用は出来ない
1サーバーに設置できるデータベース数に限りがある(IBM XWork Server V9.0では1ライセンスで8つ
までDBを持つことが可能)
Domino / XPagesでWebアプリを作る優位性(1)
セキュリティ:
- ビジネスの最前線で使われてきたIBM Dominoのセキュリティ技術の元、開発できる (オープンソース プロジェクトの場合、サーバー、開発言語、フレーム ワークによるセキュリティホールの対応は全て自己責任)
- ACL、 読者(Readers) / 作成者 (Authors) フィールド WEBユーザーの権限設定に対して柔軟に対応が可能 (ACLに相当する機能を自前で開発すると途方も無い工数に)
管理・メンテナンスの容易さ:Domino Administratorを使った管理ツールが充実・log.nsfの履歴は1~2週間程度に伸ばしての運用が実用的
コード拡張の柔軟性:フォーム – フィールド(SQLでいうところのカラム)を追加するときのリスクが少ない
ビュー – ソートやカテゴリービューをそのままXPagesを用いて表示出来る
Javaでのプログラミング
Domino / XPagesでWebアプリを作る優位性(2)
高度な運用のための機能が充実:・シングルサインオン(SSO)
・クラスタリング (自前でクラスタリング機能を実装するには高度なスキルと検証が必要)
Domino / XPagesでWebアプリを作る優位性(3)
XPagesによる開発工数の短縮:
部分更新 – プログラミングせずにAjaxの導入が可能
Wysiwygエディタ – 標準で高機能なwysiwygエディターを実装できる
Xpages Extension Library – より使いやすいUIを作ることが可能
Domino / XPagesでWebアプリを作る優位性(4)
拡張性:・OpenNTFで公開されている様々なXPagesアプリを利用できる
モバイル版WEBアプリの作成 – Xpages Mobile Control など
・他のシステムとの連携 ソーシャル連携などの機能も充実
Domino / XPagesでWebアプリを作る優位性(5)
ユーザー文書に関わる変更の制御が難しい(例)パスワードの変更やログインID(Email)の変更等
→対応例:OpenNTF「XPages User Selfregister and Avatar App」にXPages版のパスワードリセットのコードがあります
特定の文書への書き込み処理が多くて[保存時の競合]が発生してしまうようなケースの制御(例)カウントアップしていく予約番号のナンバリング制御等
→対応例: [保存時の競合]が発生した場合の制御コードを丁寧に書いていく 【Lotusscript】 docCtr.Save(False, False, True) の戻り値がFalseの場合、競合文書を削除して保存のリトライ、等
逆に、 Domino / XPagesを利用する時の注意点
■開発編
Dominoサーバーのチューニング(1) Dominoのセキュリティ ロックダウン
参考サイト (ちょっと古い): http://www.ibm.com/developerworks/jp/lotus/library/dominowebserver-security.html
・サーバーアクセスの見直し - SSL通信を有効にする - オープンするポートの設定
・データベースアクセスの見直し - Dominoがはじめから持つNSF,NTF(catalog.nsf等)の権限を設定 ACLで「デフォルト」と「匿名アクセス」は極力全てアクセス権限なしに設定
・拡張ACL(xACL) - ディレクトリ(names.nsf等)に適応出来るアクセス制御機能
Dominoサーバーのチューニング(2) 最新のHotfixを確認
不必要なサービスの停止カレンダー系のサービスタスク(nsched, nrnrmgr, ncalconn)等の不必要なサービスは停止
セッションベースのログイン設定インターネットサイト文書から設定
ログイン画面のカスタマイズ domCfg.nsfを使って編集
最新のXPages Extension Library のインストール
文書に保存
XPages開発 (画面の遷移)
予約画面 ②ログイン画面①予約画面 ③予約確認画面 ④予約完了画面
SessionScopeに保存
SessionScopeに保存
XPages開発 (画面の遷移の管理)
<!-- 画面2ページ目での制御例 --><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 変数1つで画面の遷移を管理
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">
</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>
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>
<!-- GridViewで選択された行のUNID を格納する隠しフィールド --><xp:inputText id="scheDepartDSUnid" style="display:none;"
value="#{sessionScope.scheDepartDSUnid}"></xp:inputText>
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>
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アプリ待ってるぜ!
ご清聴ありがとうございました