【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年

http://xpages.jp/QA/qa.nsf/top.xsp

http://xpages.jp/QA/qa.nsf/top.xsp

自己紹介

名前：西雄樹

年齢：38歳

出身：鹿児島

Notes歴：15年

本日の話は、ブログでも詳しく公開予定！ (サンプルアプリも！）

会社：リコーITソリューションズ株式会社（RITS）

ＩＴソリューション事業部イノベーションデベロップメントセンター

第２イノベーション開発部第３グループ

脱Xpagesはじめました。 I started De.XPages.

http://de-xpages.hatenablog.com/

本日のお話

2016/11/22 4 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. 5

「」と「」を使って

「標準コントロール」を使わないXpages開発の紹介

「BootStrap」、「jQuery」って Webサイトでよく使われる

フレームワーク

Dojo OneUI

本日のお話


「」と「」を使って

「標準コントロール」を使わないXpages開発の紹介

「標準コントロール」ってこれ

なぜ、「標準コントロール」を使わない？

Xpages特有の「<xp：>」タグで、一般的な

webのソースの流用が難しい。


IDが自動で割り振られたり・・・

余計なタグが自動で振られたり・・・


コントロール内のプロパティにいろいろ設定すると

ロジックが煩雑化し、開発が難しい。


Xpage内にHTML 、 CSJS 、 SSJS、CSSが

ごちゃごちゃ・・・


その他の理由

クライアント向け開発に比べ、複雑なプロパティ設定が必要で、開発が難しい。

「設計」タブ（デザイナー上でのプレビュー）でのGUIが不完全な為、

開発が難しい。

参考文献が少なく、開発が難しい。

Dojoの参考文献が少なく、開発が難しい。

Dominoのバージョンによって非互換が発生し、開発が難しい。


じゃあ、どうするの？


REST

「標準コントロール」

を基本使わず・・・

一般的なWebアプリ

開発手法で構築

アーキテクチャについて

2016/11/22

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を実現できます。

http://bootstrap3.cyberlab.info/components/

http://bootstrap3.cyberlab.info/components/

例：ドロップダウンボタン

デモ：BootStrapの利用例


タグ × クラス指定した HTMLを記述するだけ！

参考：http://bootstrap3.cyberlab.info/components/dropdowns.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を使うと・・・

• 簡単！ • 余計な通信が発生しない

http://semooh.jp/jquery/api/css/css/name,+value/

http://semooh.jp/jquery/api/css/css/name,+value/

アーキテクチャー：通信担当


Response Request

サーバーへリクエストを投げ、結果をクライアントサイドへ返す。

ajaxは、ウェブブラウザ内で非同期通信

を行いながらインターフェイスの構築を行

うプログラミング手法。

beforeSendイベントとdoneイベントに

よって、CSJS→SSJS→CSJSの流れを組

むことができる。

jQuery.ajax() [HTML通信]

[Output] JSON Data

[Input] JSON Data

$.ajax

アーキテクチャー：処理担当


Response Request

$.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：結果をセットする場所



http://bootstrap3.cyberlab.info/components/panels.html

http://bootstrap3.cyberlab.info/components/panels.html

デモ：$.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/22

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開発

Software