【xpages day2016】標準コントールを使わないxpage開発
Post on 26-Jan-2017
915 views
TRANSCRIPT
自己紹介
会社:リコーITソリューションズ株式会社(RITS)
ITソリューション事業部 イノベーションデベロップメントセンター
第2イノベーション開発部 第3グループ
・本日は、鹿児島からリモート参加
・九州地区ノーツパートナー会として「qA9 サイト」をオープン
http://xpages.jp/QA/qa.nsf
・社内向けポータル「 」をあちこちで宣伝中。
名前:西 雄樹
年齢:38歳
出身:鹿児島
Notes歴:15年
自己紹介
名前:西 雄樹
年齢:38歳
出身:鹿児島
Notes歴:15年
本日の話は、ブログでも詳しく公開予定! (サンプル アプリも!)
会社:リコーITソリューションズ株式会社(RITS)
ITソリューション事業部 イノベーションデベロップメントセンター
第2イノベーション開発部 第3グループ
脱Xpagesはじめました。 I started De.XPages.
http://de-xpages.hatenablog.com/
本日のお話
2016/11/22 Version: 1.0.0 Classification: Internal Owner: Ricoh IT Solutions Co.,Ltd. 5
「 」と「 」を使って
「標準コントロール」を使わないXpages開発の紹介
「BootStrap」、「jQuery」って Webサイトでよく使われる
フレームワーク
Dojo OneUI
本日のお話
2016/11/22 Version: 1.0.0 Classification: Internal Owner: Ricoh IT Solutions Co.,Ltd. 6
「 」と「 」を使って
「標準コントロール」を使わないXpages開発の紹介
「標準コントロール」ってこれ
なぜ、「標準コントロール」を使わない?
Xpages特有の「<xp:>」タグで、一般的な
webのソースの流用が難しい。
2016/11/22 Version: 1.0.0 Classification: Internal Owner: Ricoh IT Solutions Co.,Ltd. 7
IDが自動で割り振られたり・・・
余計なタグが自動で振られたり・・・
なぜ、「標準コントロール」を使わない?
コントロール内のプロパティにいろいろ設定すると
ロジックが煩雑化し、開発が難しい。
2016/11/22 Version: 1.0.0 Classification: Internal Owner: Ricoh IT Solutions Co.,Ltd. 8
Xpage内にHTML 、 CSJS 、 SSJS、CSSが
ごちゃごちゃ・・・
なぜ、「標準コントロール」を使わない?
その他の理由
クライアント向け開発に比べ、複雑なプロパティ設定が必要で、開発が難しい。
「設計」タブ(デザイナー上でのプレビュー)でのGUIが不完全な為、
開発が難しい。
参考文献が少なく 、開発が難しい。
Dojoの参考文献が少なく、開発が難しい。
Dominoのバージョンによって非互換が発生し、開発が難しい。
2016/11/22 Version: 1.0.0 Classification: Internal Owner: Ricoh IT Solutions Co.,Ltd. 9
その他の理由
クライアント向け開発に比べ、複雑なプロパティ設定が必要で、開発が難しい。
「設計」タブ(デザイナー上でのプレビュー)でのGUIが不完全な為、
開発が難しい。
参考文献が少なく 、開発が難しい。
Dojoの参考文献が少なく、開発が難しい。
Dominoのバージョンによって非互換が発生し、開発が難しい。
なぜ、「標準コントロール」を使わない?
2016/11/22 Version: 1.0.0 Classification: Internal Owner: Ricoh IT Solutions Co.,Ltd. 10
じゃあ、どうするの?
2016/11/22 Version: 1.0.0 Classification: Internal Owner: Ricoh IT Solutions Co.,Ltd. 11
REST
「標準コントロール」
を基本使わず・・・
一般的なWebアプリ
開発手法で構築
アーキテクチャについて
2016/11/22
12 Version: 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. 13
アプリケーションの性質によっては、標準コントロールの方が効率が
良い。
Xpagesの知識は要らなくなるが、BootStrapやjQueryの
Frameworkの知識が必要。
アーキテクチャー:基本の考え(ソース配備)
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
アーキテクチャー:基本の考え(トランザクション)
2016/11/22 Version: 1.0.0 Classification: Internal Owner: Ricoh IT Solutions Co.,Ltd. 15
XPagesのサーバーサイド+部分更新は使わず、CSJSをIn/Outに設ける
インプットを渡す 処理をする 結果を反映する
インプットを取得する 処理をする
結果を反映する
通常のXPages
今回のアーキテクチャ
アーキテクチャー:データの流れ全体
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
アーキテクチャー: UI 担当
2016/11/22 Version: 1.0.0 Classification: Internal Owner: Ricoh IT Solutions Co.,Ltd. 17
Xpage上にBootStrapをベースとしたHTMLで見た目を記述
HTML、CSS、Javascriptからなるフ
レームワークの1つ。
class等の属性に決められた値をセッ
トするだけでリッチなデザインを実現でき
る。(Xpages標準では、One-UI)
BootStrap [レスポンシブCSSフレームワーク]
アーキテクチャー: 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操作]
デモ
2016/11/22 Version: 1.0.0 Classification: Internal Owner: Ricoh IT Solutions Co.,Ltd. 19
BootStrapの利用例 jQueryの利用例
デモ:Javascriptライブラリの設置の仕方
2016/11/22 Version: 1.0.0 Classification: Internal Owner: Ricoh IT Solutions Co.,Ltd. 20
“xpages bootstrap”でググったらもう少し詳しいのが出てきます。
①パッケージ・エクスプロラー画面から必要なjs、cssファイルなどをそのまま貼付。
使用方法
②xpages上で読み込み。
デモ:BootStrapの利用例
2016/11/22 Version: 1.0.0 Classification: Internal Owner: Ricoh IT Solutions Co.,Ltd. 21
参考:http://bootstrap3.cyberlab.info/components/
今回は、「ドロップダウン ボタン」を例にします。
BootStrapを使うと、
簡単にUIを実現できます。
例:ドロップダウン ボタン
デモ: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
デモ:jQueryの利用例
2016/11/22 Version: 1.0.0 Classification: Internal Owner: Ricoh IT Solutions Co.,Ltd. 23
jQueryを使うと、簡単にDOM操作が
実現できます。
例:ボタンをクリックした時に文字を黒から赤に変える。
デモ:jQueryの利用例
2016/11/22 Version: 1.0.0 Classification: Internal Owner: Ricoh IT Solutions Co.,Ltd. 24
例:ボタンをクリックした時に文字を黒から赤に変える。
※Notesクライアント開発の発想の場合・・・
1. 色別の文字を用意
2. 可視欄に表示・非表示条件を記述
3. ボタン押下時のイベント処理+部分更新
• 意外と大変 • 部分更新(サーバー通信)が発生
デモ: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を使うと・・・
• 簡単! • 余計な通信が発生しない
アーキテクチャー:通信 担当
2016/11/22 Version: 1.0.0 Classification: Internal Owner: Ricoh IT Solutions Co.,Ltd. 26
Response Request
サーバーへリクエストを投げ、結果をクライアントサイドへ返す。
ajaxは、ウェブブラウザ内で非同期通信
を行いながらインターフェイスの構築を行
うプログラミング手法。
beforeSendイベントとdoneイベントに
よって、CSJS→SSJS→CSJSの流れを組
むことができる。
jQuery.ajax() [HTML通信]
[Output] JSON Data
[Input] JSON Data
$.ajax
アーキテクチャー:処理 担当
2016/11/22 Version: 1.0.0 Classification: Internal Owner: Ricoh IT Solutions Co.,Ltd. 27
Response Request
$.ajaxから受け取ったInputとなる
JSONデータを基にサーバーサイドの
JavaScriptを記述。
結果を、JSONデータで返す。
ServerSideJavaScript [JavaScript × Dominoクラス]
Access
$.ajax
DBに対しての処理は、 全てここに任せる。
[Output] JSON Data
[Input] JSON Data
アーキテクチャー:処理の流れ
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
デモ:ボタンを押すと処理結果を返す
2016/11/22 Version: 1.0.0 Classification: Internal Owner: Ricoh IT Solutions Co.,Ltd. 29
ボタンを押すと、
処理結果をパネルと一緒に表示
デモ:ボタンを押すと処理結果を返す
2016/11/22 Version: 1.0.0 Classification: Internal Owner: Ricoh IT Solutions Co.,Ltd. 30
デザインの構築 $.ajax()の呼び出し サーバー処理 結果の反映
開発の流れ
デモ:デザインの構築
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="#">リンクのリスト2</a></li> <li role="presentation"><a href="#">リンクのリスト3</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.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()の呼び出し
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となるデータ
デモ:サーバー処理
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で整理
デモ:結果の反映
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データ
デモ:Ajax_Sample プレビュー
2016/11/22 Version: 1.0.0 Classification: Internal Owner: Ricoh IT Solutions Co.,Ltd. 35
ボタンを押すと処理結果を返す
なんか・・・
2016/11/22 Version: 1.0.0 Classification: Internal Owner: Ricoh IT Solutions Co.,Ltd. 36
プログラム増えてね?
標準コントール使ってSSJS+部分更新すればいいじゃない。
デモ:データ一覧の表示
2016/11/22 Version: 1.0.0 Classification: Internal Owner: Ricoh IT Solutions Co.,Ltd. 37
リスト表示
パネルを使ってタイル表示
デモ:リスト表示
2016/11/22 Version: 1.0.0 Classification: Internal Owner: Ricoh IT Solutions Co.,Ltd. 38
データ一覧の表示
指定したビューにある文書のタイトルを取得し、リスト表示する。
デモ:リスト表示 ポイント
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); });
繰り返したい部分をクラスで取得して、複製させる
繰り返したい部分
デモ:リスト表示 プレビュー
2016/11/22 Version: 1.0.0 Classification: Internal Owner: Ricoh IT Solutions Co.,Ltd. 40
データ一覧の表示
デモ:パネルを使ってタイル表示 プレビュー
2016/11/22 Version: 1.0.0 Classification: Internal Owner: Ricoh IT Solutions Co.,Ltd. 41
データ一覧の表示
パネルを並べて、タイル表示
ヘッダー:カテゴリ名 ボディ:タイトル フッター:更新者
デモ:パネルを使ってタイル表示 ポイント
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へ書き換えて どこに表示するか決めるだけ
繰り返したい部分
表示場所へセットするだけ
条件によって色を変えるなども全部ここで実現できる
デモ:パネルを使ってタイル表示 プレビュー
2016/11/22 Version: 1.0.0 Classification: Internal Owner: Ricoh IT Solutions Co.,Ltd. 43
データ一覧の表示
このアーキテクチャの良いところ
2016/11/22 Version: 1.0.0 Classification: Internal Owner: Ricoh IT Solutions Co.,Ltd. 45
Xpagesの各コントロールの仕様や制限に左右されない。
プログラム改修がし易い。
開発前のデザイン設計がし易い。
開発作業が分担し易い。
このアーキテクチャの良いところ
2016/11/22 Version: 1.0.0 Classification: Internal Owner: Ricoh IT Solutions Co.,Ltd. 46
無駄なデータ通信を抑えることでレスポンス改善が期待で
きる。
オープンソースのJavascriptライブラリが流用し易い。
Dominoのバージョンによって非互換が発生し難い。
参考文献がたくさんある。
なんか・・・
2016/11/22 Version: 1.0.0 Classification: Internal Owner: Ricoh IT Solutions Co.,Ltd. 47
だったら、Xpagesじゃなくても
よくね??
Xpagesである必要性
2016/11/22 Version: 1.0.0 Classification: Internal Owner: Ricoh IT Solutions Co.,Ltd. 48
汎用性を考慮してカスタムコントール化
類似の機能は、ペタペタ貼るだけでできる。
Xpagesである必要性
2016/11/22 Version: 1.0.0 Classification: Internal Owner: Ricoh IT Solutions Co.,Ltd. 49
汎用性を考慮してカスタムコントール化
例:ユーザー選択
Verseなどと同じ操作性
過去のメールから重要ユーザーを
表示するアナリティクス機能
Xpagesである必要性
2016/11/22 Version: 1.0.0 Classification: Internal Owner: Ricoh IT Solutions Co.,Ltd. 50
自分達にあった
独自フレームワークとして利用
実用例
2016/11/22 Version: 1.0.0 Classification: Internal Owner: Ricoh IT Solutions Co.,Ltd. 51
社内向けポータル
このアーキテクチャの課題
2016/11/22 Version: 1.0.0 Classification: Internal Owner: Ricoh IT Solutions Co.,Ltd. 52
カスタムコントロールを使うので完全に標準コントロールを使わないわけでは
ない。
アプリケーションの性質によっては、標準コントロールの方が効率が良い。
JavaScriptに加え、BootStrapやjQueryなどのFrameworkの知識を
習得する必要がある。
最後に・・・
2016/11/22 Version: 1.0.0 Classification: Internal Owner: Ricoh IT Solutions Co.,Ltd. 53
せっかくWeb化するのであれば、UXにこだわった
価値のあるアプリケーションを作りましょう。
価値観は人や立場によって異なる。
だからといって、ただの焼き直しでは、価値は上がらない。
2016/11/22 Version: 1.0.0 Classification: Internal Owner: Ricoh IT Solutions Co.,Ltd. 54
途中で簡単に変えられないので、選定は重要に!
世の中にWebアプリ向けのFrameWorkは、いっぱいある。
BootStrapやjQueryにこだわる必要はない。
最後に・・・
最後に・・・
2016/11/22 Version: 1.0.0 Classification: Internal Owner: Ricoh IT Solutions Co.,Ltd. 55
普通に標準コントールをいっぱい使っても
実現はできます。
本日のお話は一つの手法であり、
実現したいアプリによっては有効になると思います。
以上
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/
本日の話は、ブログでも詳しく公開予定! (サンプル アプリも!)