X pages day発表_20141118　final

1
目的
ノーツコンソーシアムは、お客様、取り扱いユーザー、IBM ICSチームから成る非営利団体です。情報交換や研究、セミナーを通じて、会員相互の共通利益を追求します。
活動内容
各研究会(2014年度例)
•ソーシャル研究会
•Xpages研究会
•DPP研究会
•大阪地区研究会
•九州地区研究会etc…
イベント開催
•情報交換会
•テクニカルセミナー
ノーツコンソーシアムの概要
ノーツコンソーシアムFacebookページ
https://www.facebook.com/notescons

2
Notes Consortium Home Page
http://www.notescons.gr.jp/

3
Notesconsortium Facebook
https://www.facebook.com/notescons

4
ノーツコンソーシアム活動スケジュール（11月–12月）
オープンセミナー
クラウド時代のノーツドミノを考える
12月12日(金) 15:00-17:00
@渋谷IIC, リモート
+-------------------------+
| ノーツコンソーシアム｜
+-------------------------+
[検索]

【A5】ノーツコソーシアムXPages研究会中間成果発表
2014/11/18

今年のXPages研究会は。。。
いろいろな開発事例の紹介
参加者からの開発事例紹介
XPages 開発におけるベストプラクティスの発掘
（できれば）開発ルールの策定までやりたい。。。

ベストプラクティス策定までの道のり
いきなりベストプラクティスはさすがに無理なので。。。。
•【Step1】まずは、失敗例、困ったこと事例を集めて
•【Step2】「こうするべきだよね」、「これはやるべきでないよね」の意見交換
•【Step3】最後に、開発ルール案の提示
今は、【Step2】の途中です。。。

今回の発表では・・・
•【Step1】まずは、失敗例、困ったこと事例を集めて
•【Step2】「こうするべきだよね」、「これはやるべきでないよね」の意見交換
の2つの議論の中で特に関心が高かったものをピックアップしてご紹介します。

【A5】ノーツコソーシアムXPages研究会中間成果発表（その１) -初めてのXPagesではまった落とし穴とその解決方法-
2014/11/18
アクロス株式会社
矢森隆嗣
9

•このパートではXPages研究会の中で、
【Step1】まずは、失敗例、困ったこと事例を集めて・・・
で議論した中で特に関心が高かったもの、初心者が陥りやすいものを取りまとめてみました。
10

本パートのスピーカー
矢森隆嗣
アクロス株式会社
11

本パートの目次
1.XPagesってこんなもの
2.初めてのXPages（困惑編）
12

XPagesDayをご参加の皆様!
こんなことは知ってらぁ！という声が聞こえてくるのを承知で、おさらいします。
13

・Notes Domino8.5から提供されている、Domino上で動作する Webアプリケーションを開発するための技術
・Webアプリケーションを構築のためさまざまなコントロールが提供され、従来のフォーム・ビューなどによるノーツクライアントアプリケーションの構築に近い感覚で開発が可能
・JavaScript、Cssのほか、JavaScriptを使用してノーツオブジェクトを操作を可能とするServerSideJavaScript(SSJS)や@関数が使用できるので、 Lotus Scriptや式言語の知識がある方になじみやすい
・今までに蓄積されたノーツDBのデータをWeb上で利用するための1stチョイス
14

最近でこそXPagesの開発も実績を積ませていただいておりますが、初めてXPagesの開発に手を染めたころは・・・
これ、どうすればいいの？？？(＠_＠;)
うまくいかない～！！（>_<）
の連続で試行錯誤や調査などずいぶん遠回りをしました。
15

アクロス株式会社での経験をノーツコンソーシアムXPages研究会で発表しましたところ・・・
「やっぱりみんなハマるんだねぇ・・・」
とうなずきが多かったものをピックアップ、XPages研究会メンバーのナレッジを追加してご紹介します。
XPagesを始める、始めたばかりの方へのちょっとしたHowToとして、皆様の一助になれば幸いです。
16

メニュー
1.当然必要ですよね、JavaScript。
クライアントサイド（CSJS）とサーバーサイド（SSJS)ってどう違うの？使い分けは？
2.なんかエラーでた。デバッグってどうやろう。
3.既存のフォームに仕込まれた＠式が使いたいんだけど。
4.競合ってどう処理するの？
5.URLでファイルダウンロードリンクを貼りたい。
でもファイル形式によってダウンロードしたり、開いたり。ダウンロードしたいんだけど・・・
6.ロードバランサーなどで代表アドレスがあると・・・
17

1.当然必要ですよね、JavaScript。サーバーサイド（SSJS)とクライアントサイド（CSJS）ってどう違うの？使い分けは？ ■SSJS：サーバーにて処理される。 LS的にノーツオブジェクトが使えるので、文書とか他のDBとか参照するなどはこっち。エラーチェックで使うときはユーザインターフェイスに注意。アラートぐらいはできるが、YES/NOなど返り値が取れない。 ■CSJS: クライアントで処理される。レスポンスよく、サーバー負荷が低い。でもSSJSでないとできないこともあり。 SSJSと混在してエラーチェックで使用するとCSJS→SSJSの順で処理される関係上、画面上の並び順とエラーチェックの順序が異なりユーザの混乱を招く可能性も・・・
18

2.なんかエラーでた。デバッグってどうやろう。 ■CSJS：・IEなりFirefox、Chromeなりの開発者ツールとか使えばデバッガーもある。
19

2.なんかエラーでた。デバッグってどうやろう。（つづき） ■SSJS：・ひとまずXspプロパティの「XPage実行時のエラーページを表示」をOnに。詳細なエラーメッセージが表示されます。これは最低限！
20

2.なんかエラーでた。デバッグってどうやろう。（つづき） ■SSJS：・処理中の変数の確認などはview.postscript(“alert(…)”)で表示することにより可能。サーバーコンソールが使えるならば、サーバーのnotes.iniに “Debug_Console=1”を追加して_dumpでコンソールに出力して確認する方法も・・・（サーバの負荷に注意！）
21

2. なんかエラーでた。デバッグってどうやろう。（つづき） ■SSJS：（つづき）・Domino9から搭載されたSSJSデバッガーを使用することも出来ます。 SSJSデバッガーは変数のほか、セッション変数などの参照も出来ます。サーバNotes.iniに設定する必要があります。注意事項： (1)同一サーバー上で一人しかデバッガーは使用できない。 (2)サーバへの負荷が高い、かつデバッグしている際は他のユーザが利用できない。＞運用サーバーで開発している場合、または1サーバーを共有で開発している場合は Designerのプレビューでも利用できる（はず）。
22

3.既存のフォームに仕込まれた＠関数が使いたいんだけど。 →データソースの「フォーム検証の実行」を設定すれば、オープン時/保存時/両方のタイミングで＠関数が計算されます！
23

4.競合ってどう処理するの？ →「すべてのプロパティ」–「データ」のconCurrencyModeのオプション設定により対応可能。 try -catch でトラップして、exceptionにて「もう一度修正してください」などのメッセージで回避のほか、「先勝ち」、「後勝ち」、および「競合文書を作成する」を設定可能。
24

5.URLでファイルダウンロードリンクを貼りたい。でもファイル形式によってダウンロードしたり、開いたり。ダウンロードしたいんだけど・・・ →XPages以前では以下の形式のURLでアクセスができました。でも動作がファイルによって違う！ http://ホスト名/DBファイルパス/0/ドキュメントID/$FILE/ファイル名 XPagesなら以下のURLならファイルがダウンロードになります。 http://ホスト名/DBファイルパス/xsp/.ibmmodres/domino/OpenAttachment/DBファイルパス/DocumentID/ファイルが添付されているフィールド名 /ファイル名
25

6.ロードバランサーなどで代表アドレスがあると・・・ facesContextで今表示されているURLが取れない。 →CSJSで取得して、連携するとかちょっと工夫がいる。
context.redirectToPageにて相対パス指定でページ移動するとき、そのイベントのサーバーオプションが「部分更新」だと代表アドレスでなくてサーバー名に・・・「全体更新」にすると代表アドレスになる。
26

【A5】ノーツコソーシアムＸＰａｇｅｓ研究会中間成果発表（その2)
2014/11/18
コムチュア株式会社
和智一臣

引き続き、失敗例・困ったことの発表
•コードの散在、巨大なライブラリ
•スコープ変数。。。
•SSJS,CSJSの使い分け
•クライアントサイドJavaScriptのお作法

JSコードの散在、JS巨大なライブラリ
•目的の実装箇所がなかなか見つからない。
•スクリプトライブラリが巨大化して、デザイナの動作が重い。。。
•イベント処理コードが異様に長い。

ライブラリ化のルールが必要
•ルール化にあたって
•何でも“common.js” は要注意！！
•共通ライブラリは放っておくと巨大化。
•画面表示制御系、イベント処理系、マスタ参照系など、目的毎のライブラリ化
•ページ毎に専用ライブラリ（というのもあり？）
•目的、影響範囲が一目瞭然。
•ライブラリの数は増えるけど。。
•メンテナンス頻度、使い回しの容易さを考慮
•共通部品はライブラリに逃がさないで、
•ページ内にガシガシコードを書く方が、使い回しが楽。

スコープ変数。。。
•スコープ変数の中身が良くわからない
•同じ目的の変数を前任者が定義していた。
•にもかかわらず置き換えたせいでバグ発生。
•application,session,view,requestScopeどう使い分ける？

スコープ変数のルール化
•設定箇所の局所化
•ＸＰａｇｅ、カスタムコントロールの先頭にまとめる、専用のライブラリのみ定義するとか
•ページ間で共有するものは専用のコントロール内、またはライブラリに局所化
•何でもSessionScopeはNG！
•基本は、RequestScope。
•それぞれのライフサイクルの理解が必須！
•なるべく使わない方法・・・
•カスタムコントロール内の参照なら、requestScopeの代わりにcompositeDataが使用可能。

《compositeDataの使用》
•カスタムコントロール内でのみ共有可能な記憶領域
通常は、デザイナ画面でカスタムプロパティとして宣言するが、カスタムコントロール内部での動的な宣言も可能。
→同じMap実装なので、スコープ変数と使い方は同じ。
→カスタムコントロールのローカル変数なので、外側からは参照できない。
◆値の設定
compositeData.put(“key”,”value”)
◆値の使用
compositeData.get(“key”)

CSJSとSSJSとの使い分け
•インプットチェックはどっちで実装する？
•CSJS&SSJS派
レスポンス重視。
クライアントサイドでできるものはクライアントサイドで済ませる。
•SSJSオンリー派
メンテナンス性重視
エラーメッセージ制御が一元化。実装結果はシンプル。
・・・・研究会でも意見が分かれたところ。。。
どちらが良いとは言えないけど、どちらかに統一はしましょう。

JavaScriptのお作法に則る
•グローバル変数は危険・・・
•グローバル領域＝widowオブジェクト
•他フレームワークとの競合・・・
•グローバル領域には直接変数を設定しない。
•他フレームワークと共存する場合など
•変数格納用オブジェクトをグローバル定義して、プロパティとして変数を設定する
var myGlobal = myGlobal || {};//グローバル変数格納用変数
myGlobal.hoge = “hogehoge”;//グローバル変数の設定
alert(myGlobal.hoge);//グローバル変数の使用

JavaScriptのお作法に則る
•varを忘れないこと。
•varを使わなくてもコンパイルエラーにはならないが、グローバル領域に宣言される。
//varを忘れると。。。
function fnc1(){
v = “global”;//関数内として定義したつもりが。。。
}
alert(window.v);//”global”と表示される。
//->windowオブジェクトのプロパティに設定されている。

ＣＳＳファイルは定期的に整理！！
•開発終盤になると、CSSファイルの中身がカオス！
•似たような名前のクラス。。。
•実際使っているのはどれ？？
•コントールを削除するときは、ＣＳＳファイルもチェック！
といっても、実際には難しいので、
定期的に（忘れないうちに）整理する。
•CSSセレクタを活用して、コード量を減らす。

《CSSセレクタの活用例》
.formDataTable{
border:solid 1px #000000;
border-collapse:collapse;
width:640px;
}
.formDataTable TD{
border:solid 1px #000000;padding:2px;
}
.formDataTable TD:first-child{
background-color:#EEEEEE;width:20%;
}
.formDataTable TD:nth-child(2){
background-color:#FFFFFF;width:30%;
}
.formDataTable TD:last-child{
background-color:#BBBBBB;width:50%;
}
TABLEタグの
CSSクラス定義
TDタグ共通の
スタイル定義
列毎にTDタグの
スタイルを定義（１列目、２列目、３列目の順）
<xp:table styleClass="formDataTable">
→TABLEタグへのクラス指定のみ。 TDタグへのクラス指定が不要！！
CSSクラスは「formTable」のみ定義。各セルのスタイルはセレクタによる指定。

その他
•recycle忘れには注意！！
function doForAllDocuments(nView:NotesView){
varnDoc:NotesDocument,
tempDoc:NotesDocument;
try{
nDoc = nView.getFirstDocument();
while(null !== nDoc){
doForEachDocument(nDoc);
tempDoc = nView.getNextDocument(nDoc);
nDoc.recycle();
nDoc = tempDoc;
}
}finally{
}
}
ビューの各文書を参照する処理では必須！！

その他
•XSPJavaScriptオブジェクトの利用によるコード削減
•http://www- 10.lotus.com/ldd/ddwiki.nsf/dx/Japanese_XSP_Client_Side_JavaScript_Object_Functionをご参照。
if(window.addEventListner){
document.getElementById("#{id:button2}")
.addEventListner("click",myObj.fnc1,false);
}else if(window.attachEvent){
document.getElementById("#{id:button2}")
.attachEvent("onclick",myObj.fnc1);
}else{
document.getElementById("#{id:button2}")["onclick"]
= myObj.fnc1;
}
これまで、いちいちこんな面倒臭いことしてたのが。。
XSP.attachClientFunction("#{id:button1}","click",myObj.fnc1);
既に、関数が用意されています。
たとえば、動的なイベント割り当ての場合

今後の予定
２月のフェスタに向けて
•「XPages開発。これはルール化しておこう（仮）」の発表を予定しています。
•今回発表した内容以外にも、毎回、開発者同士で課題の持ち合い、解決策の熱いディスカッションを行ってます。その一部も紹介します。

X pages day発表_20141118　final

Recommandé

Recommandé

Contenu connexe

Tendances

Tendances (20)

Similaire à X pages day発表_20141118　final

Similaire à X pages day発表_20141118　final (20)