1.
XPagesDay 2016
標準コントロール
を使わない
XPages開発
2016年11月22日
リコーITソリューションズ株式会社
西 雄樹
2016/11/22 1

2.
自己紹介
会社：リコーITソリューションズ株式会社（RITS）
ＩＴソリューション事業部 イノベーションデベロップメントセンター
第２イノベーション開発部 第３グループ
・本日は、鹿児島からリモート参加
・九州地区ノーツパートナー会として「qA9 サイト」をオープン
http://xpages.jp/QA/qa.nsf
・社内向けポータル「 」をあちこちで宣伝中。
名前：西 雄樹
年齢：38歳
出身：鹿児島
Notes歴：15年

3.
自己紹介
名前：西 雄樹
年齢：38歳
出身：鹿児島
Notes歴：15年
本日の話は、ブログでも詳しく公開予定！
(サンプル アプリも！）
会社：リコーITソリューションズ株式会社（RITS）
ＩＴソリューション事業部 イノベーションデベロップメントセンター
第２イノベーション開発部 第３グループ
脱Xpagesはじめました。
I started De.XPages.
http://de-xpages.hatenablog.com/

4.
本日のお話
2016/11/22 4Version: 1.0.0 Classification: Internal Owner: Ricoh IT Solutions Co.,Ltd.

5.
本日のお話
2016/11/22 Version: 1.0.0 Classification: Internal Owner: Ricoh IT Solutions Co.,Ltd. 5
「 」と「 」を使って
「標準コントロール」を使わないXpages開発の紹介
「BootStrap」、「jQuery」って
Webサイトでよく使われる
フレームワーク
DojoOneUI

6.
本日のお話
2016/11/22 Version: 1.0.0 Classification: Internal Owner: Ricoh IT Solutions Co.,Ltd. 6
「 」と「 」を使って
「標準コントロール」を使わないXpages開発の紹介
「標準コントロール」ってこれ

7.
なぜ、「標準コントロール」を使わない？
Xpages特有の「<xp：>」タグで、一般的な
webのソースの流用が難しい。
2016/11/22 Version: 1.0.0 Classification: Internal Owner: Ricoh IT Solutions Co.,Ltd. 7
IDが自動で割り振られたり・・・
余計なタグが自動で振られたり・・・

8.
なぜ、「標準コントロール」を使わない？
コントロール内のプロパティにいろいろ設定すると
ロジックが煩雑化し、開発が難しい。
2016/11/22 Version: 1.0.0 Classification: Internal Owner: Ricoh IT Solutions Co.,Ltd. 8
Xpage内にHTML 、 CSJS 、 SSJS、CSSが
ごちゃごちゃ・・・

9.
なぜ、「標準コントロール」を使わない？
 その他の理由
 クライアント向け開発に比べ、複雑なプロパティ設定が必要で、開発が難しい。
 「設計」タブ（デザイナー上でのプレビュー）でのGUIが不完全な為、
開発が難しい。
 参考文献が少なく 、開発が難しい。
 Dojoの参考文献が少なく、開発が難しい。
 Dominoのバージョンによって非互換が発生し、開発が難しい。
2016/11/22 Version: 1.0.0 Classification: Internal Owner: Ricoh IT Solutions Co.,Ltd. 9

10.
 その他の理由
 クライアント向け開発に比べ、複雑なプロパティ設定が必要で、開発が難しい。
 「設計」タブ（デザイナー上でのプレビュー）でのGUIが不完全な為、
開発が難しい。
 参考文献が少なく 、開発が難しい。
 Dojoの参考文献が少なく、開発が難しい。
 Dominoのバージョンによって非互換が発生し、開発が難しい。
なぜ、「標準コントロール」を使わない？
2016/11/22 Version: 1.0.0 Classification: Internal Owner: Ricoh IT Solutions Co.,Ltd. 10

11.
じゃあ、どうするの？
2016/11/22 Version: 1.0.0 Classification: Internal Owner: Ricoh IT Solutions Co.,Ltd. 11
REST
「標準コントロール」
を基本使わず・・・
一般的なWebアプリ
開発手法で構築

12.
アーキテクチャについて
2016/11/2
2
12
Version: 1.0.0 Classification: Internal Owner: Ricoh IT Solutions Co.,Ltd.

13.
アーキテクチャー：前置き
2016/11/22 Version: 1.0.0 Classification: Internal Owner: Ricoh IT Solutions Co.,Ltd. 13
アプリケーションの性質によっては、標準コントロールの方が効率が
良い。
Xpagesの知識は要らなくなるが、BootStrapやjQueryの
Frameworkの知識が必要。

14.
アーキテクチャー：基本の考え（ソース配備）
2016/11/22 Version: 1.0.0 Classification: Internal Owner: Ricoh IT Solutions Co.,Ltd. 14
HTML、CSJS、SSJS、CSSでソースを分離する
HTML.xsp CSS.css CSJS.js SSJS.js

15.
アーキテクチャー：基本の考え（トランザクション）
2016/11/22 Version: 1.0.0 Classification: Internal Owner: Ricoh IT Solutions Co.,Ltd. 15
XPagesのサーバーサイド＋部分更新は使わず、CSJSをIn/Outに設ける
インプットを渡す 処理をする 結果を反映する
インプットを取得する
処理をする
結果を反映する
通常のXPages
今回のアーキテクチャ

16.
アーキテクチャー：データの流れ全体
2016/11/22 Version: 1.0.0 Classification: Internal Owner: Ricoh IT Solutions Co.,Ltd. 16
Client Side
Server Side
$.ajax
Response
[Output]
JSON Data
[Input]
JSON Data
Request
Ivent Show
Access

17.
アーキテクチャー： UI 担当
2016/11/22 Version: 1.0.0 Classification: Internal Owner: Ricoh IT Solutions Co.,Ltd. 17
Xpage上にBootStrapをベースとした
HTMLで見た目を記述
HTML、CSS、Javascriptからなるフ
レームワークの１つ。
class等の属性に決められた値をセッ
トするだけでリッチなデザインを実現でき
る。（Xpages標準では、One-UI）
BootStrap
[レスポンシブCSSフレームワーク]

18.
アーキテクチャー： DOM操作 担当
2016/11/22 Version: 1.0.0 Classification: Internal Owner: Ricoh IT Solutions Co.,Ltd. 18
$.ajax
Ivent Show
リクエストを要求したり、サーバーサ
イドから戻ってきた結果をXPage上
へ反映させたりする。
CSJSにJavaScriptコードを記述する
ことで、DOM操作やHTML通信が容
易に実現できる。
BootStrap内でも利用されており、
文献や派生ライブラリも多く存在する。
jQuery
[DOM操作]

19.
デモ
2016/11/22 Version: 1.0.0 Classification: Internal Owner: Ricoh IT Solutions Co.,Ltd. 19
 BootStrapの利用例
 jQueryの利用例

20.
デモ：Javascriptライブラリの設置の仕方
2016/11/22 Version: 1.0.0 Classification: Internal Owner: Ricoh IT Solutions Co.,Ltd. 20
“xpages bootstrap”でググったらもう少し詳しいのが出てきます。
①パッケージ・エクスプロラー画面から必要なｊｓ、cssファイルなどをそのまま貼付。
使用方法
②xpages上で読み込み。

21.
デモ：BootStrapの利用例
2016/11/22 Version: 1.0.0 Classification: Internal Owner: Ricoh IT Solutions Co.,Ltd. 21
参考：http://bootstrap3.cyberlab.info/components/
今回は、「ドロップダウン ボタン」を例にします。
BootStrapを使うと、
簡単にUIを実現できます。

22.
例：ドロップダウン ボタン
デモ：BootStrapの利用例
2016/11/22 Version: 1.0.0 Classification: Internal Owner: Ricoh IT Solutions Co.,Ltd. 22
タグ × クラス指定した
HTMLを記述するだけ！
参考：http://bootstrap3.cyberlab.info/components/dropdowns.html

23.
デモ：jQueryの利用例
2016/11/22 Version: 1.0.0 Classification: Internal Owner: Ricoh IT Solutions Co.,Ltd. 23
jQueryを使うと、簡単にDOM操作が
実現できます。
例：ボタンをクリックした時に文字を黒から赤に変える。

24.
デモ：jQueryの利用例
2016/11/22 Version: 1.0.0 Classification: Internal Owner: Ricoh IT Solutions Co.,Ltd. 24
例：ボタンをクリックした時に文字を黒から赤に変える。
※Notesクライアント開発の発想の場合・・・
1. 色別の文字を用意
2. 可視欄に表示・非表示条件を記述
3. ボタン押下時のイベント処理＋部分更新
• 意外と大変
• 部分更新（サーバー通信）が発生

25.
デモ：jQueryの利用例
2016/11/22 Version: 1.0.0 Classification: Internal Owner: Ricoh IT Solutions Co.,Ltd. 25
例：ボタンをクリックした時に文字を黒から赤に変える。
ルールに沿ってクライアントサイド
JavaScriptを記述するだけ。
$([セレクタ]).css("color","red");
参考：http://semooh.jp/jquery/api/css/css/name%2C+value/
ID、class、タグなどで対象部分を
細かく指定可能
※jQueryを使うと・・・
• 簡単！
• 余計な通信が発生しない

26.
アーキテクチャー：通信 担当
2016/11/22 Version: 1.0.0 Classification: Internal Owner: Ricoh IT Solutions Co.,Ltd. 26
ResponseRequest
サーバーへリクエストを投げ、結果
をクライアントサイドへ返す。
ajaxは、ウェブブラウザ内で非同期通信
を行いながらインターフェイスの構築を行
うプログラミング手法。
beforeSendイベントとdoneイベントに
よって、CSJS→SSJS→CSJSの流れを組
むことができる。
jQuery.ajax()
[HTML通信]
[Output]
JSON Data
[Input]
JSON Data
$.ajax

27.
アーキテクチャー：処理 担当
2016/11/22 Version: 1.0.0 Classification: Internal Owner: Ricoh IT Solutions Co.,Ltd. 27
ResponseRequest
$.ajaxから受け取ったInputとなる
JSONデータを基にサーバーサイドの
JavaScriptを記述。
結果を、JSONデータで返す。
ServerSideJavaScript
[JavaScript × Dominoクラス]
Access
$.ajax
DBに対しての処理は、
全てここに任せる。
[Output]
JSON Data
[Input]
JSON Data

28.
アーキテクチャー：処理の流れ
2016/11/22 Version: 1.0.0 Classification: Internal Owner: Ricoh IT Solutions Co.,Ltd. 28
jQuery.ajax()
$.ajax({
url:"./Founder_WebService.xsp",
beforeSend: function(){
//REST前の処理
$("#Loading").show();
},
data:{
Name:”hoge”
},
async:true,
datatype:"json“
}).done(function(data, status, xhr) {
//REST後の処理
var resultObj = JSON.parse(data);
$("#result").text(resultObj.Message);
$("#Loading").hide();
);
ServerSideJavaScript
Founder_WebService.xsp
.beforeRenderResponse
.afterRenderResponse
function(){
//パラメータの取得
var Name =param.get("Name");
//処理の実行(DBにアクセスする等)
var resultMessage ="HELLO! " + Name;
var result ={
Message: resultMessage
};
return result; //結果を返す
};
Request
Response
Name:"hoge"
Message: “HELLO! hoge"
Ivent
Show
Client Side Server Side

29.
デモ：ボタンを押すと処理結果を返す
2016/11/22 Version: 1.0.0 Classification: Internal Owner: Ricoh IT Solutions Co.,Ltd. 29
ボタンを押すと、
処理結果をパネル
と一緒に表示

30.
デモ：ボタンを押すと処理結果を返す
2016/11/22 Version: 1.0.0 Classification: Internal Owner: Ricoh IT Solutions Co.,Ltd. 30
 デザインの構築
 $.ajax()の呼び出し
 サーバー処理
 結果の反映
開発の流れ

31.
デモ：デザインの構築
2016/11/22 Version: 1.0.0 Classification: Internal Owner: Ricoh IT Solutions Co.,Ltd. 31
<div id="Ajax_Sample">
<div class="dropdown">
<button class="btn btn-default dropdown-toggle" type="button" data-toggle="dropdown">
ドロップダウン
<span class="caret"></span>
</button>
<ul class="dropdown-menu" role="menu">
<li role=“presentation”><a href=“#” id=“Ajax_SampleBtn”>サンプルボタン</a></li>
<li role="presentation"><a href="#">リンクのリスト２</a></li>
<li role="presentation"><a href="#">リンクのリスト３</a></li>
</ul>
</div>
<center id="Loading">読込中...</center>
<div class="panel panel-default">
<div class="panel-heading">
<h5 class="panel-title">結果</h5>
</div>
<div class="panel-body" id="result">
Hogehoge
</div>
</div>
</div>
Ajax_Sample.xsp
CSS.ｃｓｓ
#Loading{
display:none;
}
.panel{
display:none;
margin:50px;
}
参考：http://bootstrap3.cyberlab.info/components/dropdowns.html （ドロップダウン）
http://bootstrap3.cyberlab.info/components/panels.html （パネル）
ボタンを押すと処理結果を返す
id：アクションの名前
SSJSからの戻りまで
表示させておく
Id：結果をセットする場所

32.
デモ：$.ajax()の呼び出し
2016/11/22 Version: 1.0.0 Classification: Internal Owner: Ricoh IT Solutions Co.,Ltd. 32
var actionkey = "Ajax_Sample";
//ボタンクリックイベント
$(function() { $('#Ajax_SampleBtn').click(function(){
$.ajax({
url:"./Founder_WebService.xsp",
beforeSend: function(){
//REST前の処理
console.log("実行を開始します。(beforeSend)");
var targetObj = $("#"+ actionkey);
$("#Loading",targetObj).show();
},
data:{
ActionKey:actionkey,
Name:"hoge"
},
async:true,
datatype:"json"
})
lib_Ajax_Sample_csjs.js
ボタンを押すと処理結果を返す
REST前の処理
Inputとなるデータ

33.
デモ：サーバー処理
2016/11/22 Version: 1.0.0 Classification: Internal Owner: Ricoh IT Solutions Co.,Ltd. 33
import Founder_AJAX_System_ssjs;
WebAction["Ajax_Sample"] = function(){
//パラメータの取得
var Name =param.get("Name");
//処理の実行(DBにアクセスする等)
var result ={
Message:"HELLO! " + Name
}
//結果を返す
return result;
}
lib_Ajax_Sample_ssjs.js
ボタンを押すと処理結果を返す
サーバー側の処理結果を
JSONで整理

34.
デモ：結果の反映
2016/11/22 Version: 1.0.0 Classification: Internal Owner: Ricoh IT Solutions Co.,Ltd. 34
lib_Ajax_Sample_csjs.js
$.ajax({
：
.done(function(data, status, xhr) {
console.log("サーバーサイド終了。Responseデータを表示します。(done)");
var targetObj = $("#"+ actionkey);
var resultObj = JSON.parse(data);
//値のセット
$("#result",targetObj).text(resultObj.Message);
$("#Loading",targetObj).hide();
$(".panel",targetObj).fadeIn("nomal");
console.log("すべての処理が終了しました。");
}
);
})
})
ボタンを押すと処理結果を返す
画面へ反映
Outputデータ

35.
デモ：Ajax_Sample プレビュー
2016/11/22 Version: 1.0.0 Classification: Internal Owner: Ricoh IT Solutions Co.,Ltd. 35
ボタンを押すと処理結果を返す

36.
なんか・・・
2016/11/22 Version: 1.0.0 Classification: Internal Owner: Ricoh IT Solutions Co.,Ltd. 36
プログラム増えてね？
標準コントール使ってSSJS＋部分更新すればいいじゃない。

37.
デモ：データ一覧の表示
2016/11/22 Version: 1.0.0 Classification: Internal Owner: Ricoh IT Solutions Co.,Ltd. 37
 リスト表示
 パネルを使ってタイル表示

38.
デモ：リスト表示
2016/11/22 Version: 1.0.0 Classification: Internal Owner: Ricoh IT Solutions Co.,Ltd. 38
データ一覧の表示
指定したビューにある文書のタイト
ルを取得し、リスト表示する。

39.
デモ：リスト表示 ポイント
2016/11/22 Version: 1.0.0 Classification: Internal Owner: Ricoh IT Solutions Co.,Ltd. 39
データ一覧の表示
.xsp（結果を表示するエリア）
<div id="ViewList">
<div class="template" style="display:none;">
<li class="list-group-item">
<div class="title"></div>
</li>
</div>
</div>
.csjs
//リスト表示エリアを取得
var viewBox = $("#" + actionkey +" #ViewList");
//templateを取得
var tempRow = $("#" + actionkey +" #ViewList .template");
data = JSON.parse(data);
//繰り返し(each)
$.each(data,function(){
var rowData = this;
//.templateエリアの複製
var newRow = tempRow.clone();
newRow
.removeClass("template")
.addClass("Listinfo")
.fadeIn(1000);
//値のセット
$(".title",newRow).text(rowData.title);
//リストに追加
viewBox.append(newRow);
});
繰り返したい部分をクラスで取
得して、複製させる
繰り返し
たい部分

40.
デモ：リスト表示 プレビュー
2016/11/22 Version: 1.0.0 Classification: Internal Owner: Ricoh IT Solutions Co.,Ltd. 40
データ一覧の表示

41.
デモ：パネルを使ってタイル表示 プレビュー
2016/11/22 Version: 1.0.0 Classification: Internal Owner: Ricoh IT Solutions Co.,Ltd. 41
データ一覧の表示
パネルを並べて、タイル表示
ヘッダー：カテゴリ名
ボディ：タイトル
フッター：更新者

42.
デモ：パネルを使ってタイル表示 ポイント
2016/11/22 Version: 1.0.0 Classification: Internal Owner: Ricoh IT Solutions Co.,Ltd. 42
データ一覧の表示
.xsp（結果を表示するエリア）
<div id="ViewList">
<div class="template" style="display:none;">
<div class="panel panel-default">
<div class=“panel-heading Categories"></div>
<div class="panel-body tittle"></div>
<div class="panel-footer LastEditor"></div>
</div>
</div>
</div>
.csjs
//繰り返し(each)
$.each(data,function(){
var rowData = this;
//.templateエリアの複製
：
//値のセット
$(". Categories",newRow).text(rowData.categories);
$(". tittle",newRow).text(rowData.title);
$(". LastEditor",newRow).text(rowData.lastEditor);
//リストに追加
viewBox.append(newRow);
});
パネルのHTMLへ書き換えて
どこに表示するか決めるだけ
繰り返し
たい部分
表示場所へセットするだけ
条件によって色を変えるなども全
部ここで実現できる

43.
デモ：パネルを使ってタイル表示 プレビュー
2016/11/22 Version: 1.0.0 Classification: Internal Owner: Ricoh IT Solutions Co.,Ltd. 43
データ一覧の表示

44.
まとめ
2016/11/2
2
44
Version: 1.0.0 Classification: Internal Owner: Ricoh IT Solutions Co.,Ltd.

45.
このアーキテクチャの良いところ
2016/11/22 Version: 1.0.0 Classification: Internal Owner: Ricoh IT Solutions Co.,Ltd. 45
Xpagesの各コントロールの仕様や制限に左右されない。
プログラム改修がし易い。
開発前のデザイン設計がし易い。
開発作業が分担し易い。

46.
このアーキテクチャの良いところ
2016/11/22 Version: 1.0.0 Classification: Internal Owner: Ricoh IT Solutions Co.,Ltd. 46
無駄なデータ通信を抑えることでレスポンス改善が期待で
きる。
オープンソースのJavascriptライブラリが流用し易い。
Dominoのバージョンによって非互換が発生し難い。
参考文献がたくさんある。

47.
なんか・・・
2016/11/22 Version: 1.0.0 Classification: Internal Owner: Ricoh IT Solutions Co.,Ltd. 47
だったら、Xpagesじゃなくても
よくね？？

48.
Xpagesである必要性
2016/11/22 Version: 1.0.0 Classification: Internal Owner: Ricoh IT Solutions Co.,Ltd. 48
汎用性を考慮してカスタムコントール化
類似の機能は、ペタペタ貼るだけでできる。

49.
Xpagesである必要性
2016/11/22 Version: 1.0.0 Classification: Internal Owner: Ricoh IT Solutions Co.,Ltd. 49
汎用性を考慮してカスタムコントール化
例：ユーザー選択
 Verseなどと同じ操作性
 過去のメールから重要ユーザーを
表示するアナリティクス機能

50.
Xpagesである必要性
2016/11/22 Version: 1.0.0 Classification: Internal Owner: Ricoh IT Solutions Co.,Ltd. 50
自分達にあった
独自フレームワークとして利用

51.
実用例
2016/11/22 Version: 1.0.0 Classification: Internal Owner: Ricoh IT Solutions Co.,Ltd. 51
社内向けポータル

52.
このアーキテクチャの課題
2016/11/22 Version: 1.0.0 Classification: Internal Owner: Ricoh IT Solutions Co.,Ltd. 52
 カスタムコントロールを使うので完全に標準コントロールを使わないわけでは
ない。
 アプリケーションの性質によっては、標準コントロールの方が効率が良い。
 JavaScriptに加え、BootStrapやjQueryなどのFrameworkの知識を
習得する必要がある。

53.
最後に・・・
2016/11/22 Version: 1.0.0 Classification: Internal Owner: Ricoh IT Solutions Co.,Ltd. 53
せっかくWeb化するのであれば、UXにこだわった
価値のあるアプリケーションを作りましょう。
価値観は人や立場によって異なる。
だからといって、ただの焼き直しでは、価値は上がらない。

54.
2016/11/22 Version: 1.0.0 Classification: Internal Owner: Ricoh IT Solutions Co.,Ltd. 54
途中で簡単に変えられないので、選定は重要に！
世の中にWebアプリ向けのFrameWorkは、いっぱいある。
BootStrapやjQueryにこだわる必要はない。
最後に・・・

55.
最後に・・・
2016/11/22 Version: 1.0.0 Classification: Internal Owner: Ricoh IT Solutions Co.,Ltd. 55
普通に標準コントールをいっぱい使っても
実現はできます。
本日のお話は一つの手法であり、
実現したいアプリによっては有効になると思います。

56.
以上
2016/11/22 Version: 1.0.0 Classification: Internal Owner: Ricoh IT Solutions Co.,Ltd. 56
ご静聴ありがとうございました。
脱Xpagesはじめました。
I started De.XPages.
http://de-xpages.hatenablog.com/
本日の話は、ブログでも詳しく公開予定！
（サンプル アプリも！）