ジャンボフェリー 事例紹介

 

XPagesで乗り越えたミッションの数々をご紹介

 

ノーツコンソーシアム 九州地区研究会

2014年8月22日

 

ケートリック合同会社

自己紹介


  • 田付 和慶 (たつき かずのり)
     
  • ケートリック合同会社 代表

     
  • IBM Connect (Lotusphere) オンライン システムでXPageアプリを多数開発してきた経験を持ちます。
     
  • 初めて学んだ開発言語はC言語、次いでC++、Java、PHP、JavascriptなどWEBアプリ開発にハマる。

九州行けなくてすみません

実はこの8月初旬に九州を福岡から鹿児島までプライベートで旅をしてました。

本題にもどります。。。

フェリー事例紹介

 

今回、九州地区研究会では

「XPages開発者の猛者が沢山おられる」

ということで、事務局の山元様からXPagesの技術寄りの話をして欲しいとお話がありました。

去年のXPagesDay 2013でも

「ジャンボフェリーの事例紹介」をさせて頂きました。

この時は

”どのようにXPagesのプロジェクトを提案していったか”

という部分により焦点をあててご説明させて頂きました。

今回は、

 

「XPagesでどのように

お客様の要望をクリアしていったのか」

 

という視点を技術的に掘り下げてみたいと思います。

様の予約システムを構築

 

実際の稼働サーバー:https://www.travel-yoyaku.net

ミッション その1:

 

ビジターが自動でアカウント作成できる仕組みを作れ!

利点
  1. Emailの入力ミスのままアカウント作成されることを回避
  2. 最近のWEBアプリでよく見られるスタイルでアカウント登録を行える

Domino特有の難点
  1. Person文書はEmailの他に氏名の入力が必要になるため省略出来なかった。(ロジックを複雑にすれば出来たかも)

主なカスタマイズ箇所
  1. アカウント作成段階では匿名ユーザーなので、Emailによるアカウント重複チェックには特別なエージェントによって行わせた。
  2. Email等の打ち間違いでアカウント作成が失敗し◯◯時間放置のリクエスト文書はスケジュールエージェントで削除。

ミッション その2

 

ログイン画面をポップアップ形式で実装せよ!

利点
  1. フェリー予約の途中で画面遷移をスムーズにログイン処理を行える。(domcfgのログインとは別のログイン画面を持てる)
    ※sessionScopeは匿名ユーザーからログインユーザーに切り替わっても変数は破棄されず引き継がれます。
  2. このテンプレートにはパスワード再設定機能もあるので使える。
    ※Dominoが標準でもつパスワード設定の機能(names.nsf?ChnagePassword)を使わず実装できるので、names.nsf等NABをWeb経由でアクセス不可に設定できる。

主なカスタマイズ箇所
  1. アカウント新規登録と連携するようにデザインを変更

ミッション その3:

 

カレンダーで予約出来る日にちを制限せよ

 

(例)

  • 一般予約では当日から2日後から予約可
  • 予約は当日から60日先まで



	<![CDATA[#{javascript:var tod:Date = @Today();
tod.setDate(tod.getDate() + 2);
return tod;}]]>
	
		
			
				<![CDATA[#{javascript:var tod:Date = @Today();
var maxdate:Date = @Today();
var mindate:Date = @Today();
maxdate.setDate(tod.getDate() + 62);
mindate.setDate(tod.getDate() + 2);
"{min:'"+I18n.toString(mindate, "yyyy-MM-dd")+"',max:'"+I18n.toString(maxdate, "yyyy-MM-dd")+"'}"}]]>
			
			
				<![CDATA[#{javascript:"var dd = new Date(this.get('value'));"+
"var aobj = dijit.byId('"+getClientId('djDateTextBoxArrive')+"');"+
"var da = new Date(aobj.get('value'));"+
"aobj.constraints.min = this.get('value');"+
"aobj.constraints.max = this.constraints.max;"+
"if( (dd.getTime() - da.getTime()) > 0) aobj.set('value', this.get('value'))"}]]>
			
		
	
	
		
		
	

・コアコントロール「日時ピッカー」を挿入直後のコード

	

	
	
		
	

        

 

・デフォルトの日付を今日より2日後に設定
	

	<![CDATA[#{javascript:var tod:Date = @Today();
tod.setDate(tod.getDate() + 2);
return tod;}]
	
	
		
	

        
・日付の制限の最小値、最大値を追加したコード


	<![CDATA[#{javascript:var tod:Date = @Today();
tod.setDate(tod.getDate() + 2);
return tod;}]]>
	
		
			
				<![CDATA[#{javascript:var tod:Date = @Today();
var maxdate:Date = @Today();
var mindate:Date = @Today();
maxdate.setDate(tod.getDate() + 62);
mindate.setDate(tod.getDate() + 2);
"{min:'"+I18n.toString(mindate, "yyyy-MM-dd")+"',max:'"+I18n.toString(maxdate, "yyyy-MM-dd")+"'}"}]]>
			
		
	

・生成されたHTMLコード


・別の日時ピッカーをリモートで連動


	
		
			
				<![CDATA[#{javascript:"var dd = new Date(this.get('value'));"+
"var aobj = dijit.byId('"+getClientId('djDateTextBoxArrive')+"');"+
"var da = new Date(aobj.get('value'));"+
"aobj.constraints.min = this.get('value');"+
"aobj.constraints.max = this.constraints.max;"+
"if( (dd.getTime() - da.getTime()) > 0) aobj.set('value', this.get('value'))"}]]>
			
		
	

・生成されるonChangeイベントのクライアントJavascript

var dd = new Date(this.get('value')); 
var aobj = dijit.byId('view:_id1:djDateTextBoxArrive'); 
var da = new Date(aobj.get('value')); 
aobj.constraints.min = this.get('value');
aobj.constraints.max = this.constraints.max; 
if( (dd.getTime() - da.getTime()) > 0)
     aobj.set('value', this.get('value'))

ここで1つ気づきました。

 

SSJSの中にCSJSを無理やり書くのはとっても見づらいです。

ちょっと改良します。。。

・changeArriveDateConstraints() クライアント関数を用意

・CSJSコードを「出力スクリプト」コントロールに記述


	<![CDATA[
		var changeArriveDateConstraints = function(departDate, objArriveId) {
			var dd = new Date(departDate.get('value')); 
			var aobj = dijit.byId(objArriveId); 
			var da = new Date(aobj.get('value')); 
			aobj.constraints.min = departDate.get('value');
			aobj.constraints.max = departDate.constraints.max; 
			if( (dd.getTime() - da.getTime()) > 0)aobj.set('value', departDate.get('value'));
 		}
	]]>

ミッション その4:

 

管理者と従業員アカウントでページ毎のアクセス権を細かく設定せよ

・XPage自体のアクセス権をACLの権限ごとに設定

(例)管理者は見れるが従業員は見れない


	
		
			
				
				
				
				
				
					<![CDATA[[Administrators]]]>
					<![CDATA[[Administrators]]]>
				
				
					<![CDATA[[Employees]]]>
					<![CDATA[[Employees]]]>
				
			
		
	
・各コントロールを権限毎に描画設定


	<![CDATA[#{javascript:return (context.getUser().getRoles().contains('[SystemAdmins]'))}]]>

大きな画面でソースコード追っかけるのは

もしかして大変なのかも。

 

とここに来て反省

 

XPagesの技術をご紹介しだすと

いつまでも尽きないのでこのへんで・・・

むりやり

まとめ


・OpenNTFでプロジェクトの宝探しをしよう

 

・Dojoが絡むカスタマイズではXPages抜きでGoogle検索

 

・他のWEBアプリがやっていることはXPagesでも大体できる。

 

最後に、

実は今回のプレゼンテーションは

XPagesで作りました。

※今回初公開!

 

以下のURLで誰でもアクセス出来ます。

http://ow.ly/AxKP8

(スマホ、タブレットでもスワイプして見れちゃう。)

そこで、

XPagesで作られたこのプレゼンテーションNSFを

今回お越しの皆様にプレゼントしたいと思います。

 

設計を見ると意外とマル秘ネタがいくつか含まれています。

(1)繰り返しコントロール内でのデータソースの定義

(2)Dojoダイアログ内に別XPageをロード

(3)リッチテキストフィールドのカスタマイズ

(4)多言語サポート(英語、日本語)

などなど興味がある方には面白いかもしれません。

http://ow.ly/AxKP8

 

応募方法


興味がある方は

http://www.ktrick.com

のお問い合せフォームより

「プレゼンテーションNSFよこせ」など

分かりやすい内容で送信ください。

後日添付ファイル付きで返信させて頂きます。

 

※今回のプレゼンの感想なども添えてもらえると嬉しいです。^^;

ご質問

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