X pages day発表_20141118

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

1.XPages ってこんなもの

XPagesDay をご参加の皆様 !

こんなことは知ってらぁ！という声が聞こえてくるのを承知で、おさらいします。

13

1.XPages ってこんなもの

・ Notes Domino8.5 から提供されている、 Domino 上で動作するWeb アプリケーションを開発するための技術

・ Web アプリケーションを構築のためさまざまなコントロールが提供され、従来のフォーム・ビューなどによるノーツクライアントアプリケーションの構築に近い感覚で開発が可能

・ JavaScript 、 Css のほか、 JavaScript を使用してノーツオブジェクトを操作を可能とする ServerSideJavaScript(SSJS) や @ 関数が使用できるので、Lotus Script や式言語の知識がある方になじみやすい

・今までに蓄積されたノーツ DB のデータを Web 上で利用するための 1stチョイス

14

2. 初めての XPages （困惑編）

最近でこそ 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. 初めての XPages （困惑編）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

3.続いて・・・

27

【 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){

var nDoc: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);

既に、関数が用意されています。

たとえば、動的なイベント割り当ての場合

http://www-10.lotus.com/ldd/ddwiki.nsf/dx/Japanese_XSP_Client_Side_JavaScript_Object_Function




今後の予定

２月のフェスタに向けて

• 「 XPages 開発。これはルール化しておこう（仮）」の発表を予定しています。

• 今回発表した内容以外にも、毎回、開発者同士で課題の持ち合い、解決策の熱いディスカッションを行ってます。その一部も紹介します。

Business

X pages day発表_20141118