【Xpages day2016】標準コントールを使わないxpage開発

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

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

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

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

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

本日のお話
「」と「」を使って
「標準コントロール」を使わないXpages開発の紹介
「標準コントロール」ってこれ

なぜ、「標準コントロール」を使わない？
Xpages特有の「<xp：>」タグで、一般的な
webのソースの流用が難しい。
IDが自動で割り振られたり・・・
余計なタグが自動で振られたり・・・

コントロール内のプロパティにいろいろ設定すると
ロジックが煩雑化し、開発が難しい。
Xpage内にHTML 、 CSJS 、 SSJS、CSSが
ごちゃごちゃ・・・

 その他の理由
 クライアント向け開発に比べ、複雑なプロパティ設定が必要で、開発が難しい。
 「設計」タブ（デザイナー上でのプレビュー）でのGUIが不完全な為、
開発が難しい。
 参考文献が少なく、開発が難しい。
 Dojoの参考文献が少なく、開発が難しい。
 Dominoのバージョンによって非互換が発生し、開発が難しい。

じゃあ、どうするの？
REST
「標準コントロール」
を基本使わず・・・
一般的なWebアプリ
開発手法で構築

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

アーキテクチャー：前置き
アプリケーションの性質によっては、標準コントロールの方が効率が
良い。
Xpagesの知識は要らなくなるが、BootStrapやjQueryの
Frameworkの知識が必要。

アーキテクチャー：基本の考え（ソース配備）
HTML、CSJS、SSJS、CSSでソースを分離する
HTML.xsp CSS.css CSJS.js SSJS.js

アーキテクチャー：基本の考え（トランザクション）
XPagesのサーバーサイド＋部分更新は使わず、CSJSをIn/Outに設ける
インプットを渡す処理をする結果を反映する
インプットを取得する
処理をする
結果を反映する
通常のXPages
今回のアーキテクチャ

アーキテクチャー：データの流れ全体
Client Side
Server Side
$.ajax
Response
[Output]
JSON Data
[Input]
JSON Data
Request
Ivent Show
Access

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

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

デモ
 BootStrapの利用例
 jQueryの利用例

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

デモ：BootStrapの利用例
参考：http://bootstrap3.cyberlab.info/components/
今回は、「ドロップダウンボタン」を例にします。
BootStrapを使うと、
簡単にUIを実現できます。

例：ドロップダウンボタン
デモ：BootStrapの利用例
タグ × クラス指定した
HTMLを記述するだけ！
参考：http://bootstrap3.cyberlab.info/components/dropdowns.html

デモ：jQueryの利用例
jQueryを使うと、簡単にDOM操作が
実現できます。
例：ボタンをクリックした時に文字を黒から赤に変える。

※Notesクライアント開発の発想の場合・・・
1. 色別の文字を用意
2. 可視欄に表示・非表示条件を記述
3. ボタン押下時のイベント処理＋部分更新
• 意外と大変
• 部分更新（サーバー通信）が発生

ルールに沿ってクライアントサイド
JavaScriptを記述するだけ。
$([セレクタ]).css("color","red");
参考：http://semooh.jp/jquery/api/css/css/name%2C+value/
ID、class、タグなどで対象部分を
細かく指定可能
※jQueryを使うと・・・
• 簡単！
• 余計な通信が発生しない

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

アーキテクチャー：処理担当
ResponseRequest
$.ajaxから受け取ったInputとなる
JSONデータを基にサーバーサイドの
JavaScriptを記述。
結果を、JSONデータで返す。
ServerSideJavaScript
[JavaScript × Dominoクラス]
Access
$.ajax
DBに対しての処理は、
全てここに任せる。
[Output]
JSON Data
[Input]
JSON Data

アーキテクチャー：処理の流れ
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

デモ：ボタンを押すと処理結果を返す
ボタンを押すと、
処理結果をパネル
と一緒に表示

デモ：ボタンを押すと処理結果を返す
 デザインの構築
 $.ajax()の呼び出し
 サーバー処理
 結果の反映
開発の流れ

デモ：デザインの構築
<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：結果をセットする場所

デモ：$.ajax()の呼び出し
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となるデータ

デモ：サーバー処理
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で整理

デモ：結果の反映
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データ

デモ：Ajax_Sample プレビュー

なんか・・・
プログラム増えてね？
標準コントール使ってSSJS＋部分更新すればいいじゃない。

デモ：データ一覧の表示
 リスト表示
 パネルを使ってタイル表示

デモ：リスト表示
データ一覧の表示
指定したビューにある文書のタイト
ルを取得し、リスト表示する。

デモ：リスト表示ポイント
.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);
});
繰り返したい部分をクラスで取
得して、複製させる
繰り返し
たい部分

デモ：リスト表示プレビュー

デモ：パネルを使ってタイル表示プレビュー
パネルを並べて、タイル表示
ヘッダー：カテゴリ名
ボディ：タイトル
フッター：更新者

デモ：パネルを使ってタイル表示ポイント
.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へ書き換えて
どこに表示するか決めるだけ
繰り返し
たい部分
表示場所へセットするだけ
条件によって色を変えるなども全
部ここで実現できる

デモ：パネルを使ってタイル表示プレビュー

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

このアーキテクチャの良いところ
Xpagesの各コントロールの仕様や制限に左右されない。
プログラム改修がし易い。
開発前のデザイン設計がし易い。
開発作業が分担し易い。

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

なんか・・・
だったら、Xpagesじゃなくても
よくね？？

Xpagesである必要性
汎用性を考慮してカスタムコントール化
類似の機能は、ペタペタ貼るだけでできる。

汎用性を考慮してカスタムコントール化
例：ユーザー選択
 Verseなどと同じ操作性
 過去のメールから重要ユーザーを
表示するアナリティクス機能

自分達にあった
独自フレームワークとして利用

実用例
社内向けポータル

このアーキテクチャの課題
 カスタムコントロールを使うので完全に標準コントロールを使わないわけでは
ない。
 アプリケーションの性質によっては、標準コントロールの方が効率が良い。
 JavaScriptに加え、BootStrapやjQueryなどのFrameworkの知識を
習得する必要がある。

最後に・・・
せっかくWeb化するのであれば、UXにこだわった
価値のあるアプリケーションを作りましょう。
価値観は人や立場によって異なる。
だからといって、ただの焼き直しでは、価値は上がらない。

途中で簡単に変えられないので、選定は重要に！
世の中にWebアプリ向けのFrameWorkは、いっぱいある。
BootStrapやjQueryにこだわる必要はない。
最後に・・・

最後に・・・
普通に標準コントールをいっぱい使っても
実現はできます。
本日のお話は一つの手法であり、
実現したいアプリによっては有効になると思います。

以上
ご静聴ありがとうございました。
脱Xpagesはじめました。
I started De.XPages.
http://de-xpages.hatenablog.com/
本日の話は、ブログでも詳しく公開予定！
（サンプルアプリも！）

【Xpages day2016】標準コントールを使わないxpage開発

【Xpages day2016】標準コントールを使わないxpage開発

Recommended

Recommended

More Related Content

What's hot

What's hot (20)

Similar to 【Xpages day2016】標準コントールを使わないxpage開発

Similar to 【Xpages day2016】標準コントールを使わないxpage開発 (20)

【Xpages day2016】標準コントールを使わないxpage開発