Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.
XPagesDay 2016
標準コントロール
を使わない
XPages開発
2016年11月22日
リコーITソリューションズ株式会社
西 雄樹
2016/11/22 1
自己紹介
会社:リコーITソリューションズ株式会社(RITS)
ITソリューション事業部 イノベーションデベロップメントセンター
第2イノベーション開発部 第3グループ
・本日は、鹿児島からリモート参加
・九州地区ノーツパートナー会として「qA...
自己紹介
名前:西 雄樹
年齢:38歳
出身:鹿児島
Notes歴:15年
本日の話は、ブログでも詳しく公開予定!
(サンプル アプリも!)
会社:リコーITソリューションズ株式会社(RITS)
ITソリューション事業部 イノベーションデベロッ...
本日のお話
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
「 」と「 」を使って
「標準コントロール」を使わないX...
本日のお話
2016/11/22 Version: 1.0.0 Classification: Internal Owner: Ricoh IT Solutions Co.,Ltd. 6
「 」と「 」を使って
「標準コントロール」を使わないX...
なぜ、「標準コントロール」を使わない?
Xpages特有の「<xp:>」タグで、一般的な
webのソースの流用が難しい。
2016/11/22 Version: 1.0.0 Classification: Internal Owner: Ric...
なぜ、「標準コントロール」を使わない?
コントロール内のプロパティにいろいろ設定すると
ロジックが煩雑化し、開発が難しい。
2016/11/22 Version: 1.0.0 Classification: Internal Owner: Ri...
なぜ、「標準コントロール」を使わない?
 その他の理由
 クライアント向け開発に比べ、複雑なプロパティ設定が必要で、開発が難しい。
 「設計」タブ(デザイナー上でのプレビュー)でのGUIが不完全な為、
開発が難しい。
 参考文献が少なく...
 その他の理由
 クライアント向け開発に比べ、複雑なプロパティ設定が必要で、開発が難しい。
 「設計」タブ(デザイナー上でのプレビュー)でのGUIが不完全な為、
開発が難しい。
 参考文献が少なく 、開発が難しい。
 Dojoの参考文...
じゃあ、どうするの?
2016/11/22 Version: 1.0.0 Classification: Internal Owner: Ricoh IT Solutions Co.,Ltd. 11
REST
「標準コントロール」
を基本使わず...
アーキテクチャについて
2016/11/2
2
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
アプリケーションの性質によっては、標準...
アーキテクチャー:基本の考え(ソース配備)
2016/11/22 Version: 1.0.0 Classification: Internal Owner: Ricoh IT Solutions Co.,Ltd. 14
HTML、CSJS、S...
アーキテクチャー:基本の考え(トランザクション)
2016/11/22 Version: 1.0.0 Classification: Internal Owner: Ricoh IT Solutions Co.,Ltd. 15
XPagesのサ...
アーキテクチャー:データの流れ全体
2016/11/22 Version: 1.0.0 Classification: Internal Owner: Ricoh IT Solutions Co.,Ltd. 16
Client Side
Ser...
アーキテクチャー: UI 担当
2016/11/22 Version: 1.0.0 Classification: Internal Owner: Ricoh IT Solutions Co.,Ltd. 17
Xpage上にBootStrapを...
アーキテクチャー: DOM操作 担当
2016/11/22 Version: 1.0.0 Classification: Internal Owner: Ricoh IT Solutions Co.,Ltd. 18
$.ajax
Ivent S...
デモ
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の利用例
2016/11/22 Version: 1.0.0 Classification: Internal Owner: Ricoh IT Solutions Co.,Ltd. 21
参考:http://bootst...
例:ドロップダウン ボタン
デモ:BootStrapの利用例
2016/11/22 Version: 1.0.0 Classification: Internal Owner: Ricoh IT Solutions Co.,Ltd. 22
タグ...
デモ: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
例:ボタンをクリックした時に文字を黒か...
デモ:jQueryの利用例
2016/11/22 Version: 1.0.0 Classification: Internal Owner: Ricoh IT Solutions Co.,Ltd. 25
例:ボタンをクリックした時に文字を黒か...
アーキテクチャー:通信 担当
2016/11/22 Version: 1.0.0 Classification: Internal Owner: Ricoh IT Solutions Co.,Ltd. 26
ResponseRequest
サー...
アーキテクチャー:処理 担当
2016/11/22 Version: 1.0.0 Classification: Internal Owner: Ricoh IT Solutions Co.,Ltd. 27
ResponseRequest
$....
アーキテクチャー:処理の流れ
2016/11/22 Version: 1.0.0 Classification: Internal Owner: Ricoh IT Solutions Co.,Ltd. 28
jQuery.ajax()
$.aj...
デモ:ボタンを押すと処理結果を返す
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
 デザインの構築
 $.a...
デモ:デザインの構築
2016/11/22 Version: 1.0.0 Classification: Internal Owner: Ricoh IT Solutions Co.,Ltd. 31
<div id="Ajax_Sample">...
デモ:$.ajax()の呼び出し
2016/11/22 Version: 1.0.0 Classification: Internal Owner: Ricoh IT Solutions Co.,Ltd. 32
var actionkey = ...
デモ:サーバー処理
2016/11/22 Version: 1.0.0 Classification: Internal Owner: Ricoh IT Solutions Co.,Ltd. 33
import Founder_AJAX_Sys...
デモ:結果の反映
2016/11/22 Version: 1.0.0 Classification: Internal Owner: Ricoh IT Solutions Co.,Ltd. 34
lib_Ajax_Sample_csjs.js
...
デモ: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(結果を表示...
デモ:リスト表示 プレビュー
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
データ一覧の表示
.xs...
デモ:パネルを使ってタイル表示 プレビュー
2016/11/22 Version: 1.0.0 Classification: Internal Owner: Ricoh IT Solutions Co.,Ltd. 43
データ一覧の表示
まとめ
2016/11/2
2
44
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. 45
Xpagesの各コントロールの仕...
このアーキテクチャの良いところ
2016/11/22 Version: 1.0.0 Classification: Internal Owner: Ricoh IT Solutions Co.,Ltd. 46
無駄なデータ通信を抑えることでレ...
なんか・・・
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
汎用性を考慮してカスタムコントール化
例...
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
 カスタムコントロールを使うので完全に...
最後に・・・
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アプリ...
最後に・・・
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はじめました。...
【Xpages day2016】標準コントールを使わないxpage開発
Upcoming SlideShare
Loading in …5
×

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

2,607 views

Published on

Xpages day2016 2日目 第1セッション
リコーITソリューションズ 西 雄樹

Published in: Software
  • Be the first to comment

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

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

×