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.
1 
目的 
ノーツコンソーシアムは、お客様、取り扱いユーザー、IBM ICSチームか ら成る非営利団体です。情報交換や研究、セミナーを通じて、会員相互の 共通利益を追求します。 
活動内容 
各研究会(2014年度例) 
•ソーシャル...
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】「こうするべきだよね」、「これはやるべきでないよね」の意見交換 
•【St...
今回の発表では・・・ 
•【Step1】まずは、失敗例、困ったこと事例を集めて 
•【Step2】「こうするべきだよね」、「これはやるべきでないよね」の意見交換 
の2つの議論の中で特に関心が高かったものを ピックアップしてご紹介します。
【A5】ノーツコソーシアムXPages研究会 中間成果発表(その1) -初めての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アプリケーションを構築のためさまざまなコントロールが提供され、 従来のフォーム...
2.初めてのXPages(困惑編) 
最近でこそXPagesの開発も実績を積ませていただいておりますが、 初めてXPagesの開発に手を染めたころは・・・ 
これ、どうすればいいの???(@_@;) 
うまくいかない~!!(>_<) 
の連続で...
2.初めてのXPages(困惑編) 
アクロス株式会社での経験をノーツコンソーシアムXPages研究会で 発表しましたところ・・・ 
「やっぱりみんなハマるんだねぇ・・・」 
とうなずきが多かったものをピックアップ、XPages研究会メンバーの...
2.初めてのXPages(困惑編) 
メニュー 
1.当然必要ですよね、JavaScript。 
クライアントサイド(CSJS)とサーバーサイド(SSJS)ってどう違うの?使い分けは? 
2.なんかエラーでた。デバッグってどうやろう。 
3.既...
2.初めてのXPages(困惑編) 
1.当然必要ですよね、JavaScript。 サーバーサイド(SSJS)とクライアントサイド(CSJS)ってどう違うの?使い分けは? ■SSJS: サーバーにて処理される。 LS的にノーツオブジェクトが使え...
2.初めてのXPages(困惑編) 
2.なんかエラーでた。デバッグってどうやろう。 ■CSJS: ・IEなりFirefox、Chromeなりの開発者ツールとか使えばデバッガーもある。 
19
2.初めてのXPages(困惑編) 
2.なんかエラーでた。デバッグってどうやろう。(つづき) ■SSJS: ・ひとまずXspプロパティの「XPage実行時のエラーページを表示」をOnに。 詳細なエラーメッセージが表示されます。これは最低限! ...
2.初めてのXPages(困惑編) 
2.なんかエラーでた。デバッグってどうやろう。(つづき) ■SSJS: ・処理中の変数の確認などはview.postscript(“alert(…)”)で表示することにより可能。 サーバーコンソールが使える...
2.初めてのXPages(困惑編) 
2. なんかエラーでた。デバッグってどうやろう。(つづき) ■SSJS:(つづき) ・Domino9から搭載されたSSJSデバッガーを使用することも出来ます。 SSJSデバッガーは変数のほか、セッション変数...
2.初めてのXPages(困惑編) 
3.既存のフォームに仕込まれた@関数が使いたいんだけど。 →データソースの「フォーム検証の実行」を設定すれば、 オープン時/保存時/両方のタイミングで@関数が計算されます! 
23
2.初めてのXPages(困惑編) 
4.競合ってどう処理するの? →「すべてのプロパティ」–「データ」のconCurrencyModeのオプション設定に より対応可能。 try -catch でトラップして、exceptionにて「もう一度修...
2.初めてのXPages(困惑編) 
5.URLでファイルダウンロードリンクを貼りたい。 でもファイル形式によってダウンロードしたり、開いたり。 ダウンロードしたいんだけど・・・ →XPages以前では以下の形式のURLでアクセスができました。...
2.初めてのXPages(困惑編) 
6.ロードバランサーなどで代表アドレスがあると・・・ facesContextで今表示されているURLが取れない。 →CSJSで取得して、連携するとかちょっと工夫がいる。 
context.redirect...
3.続いて・・・ 
27
【A5】ノーツコソーシアムXPages研究会 中間成果発表(その2) 
2014/11/18 
コムチュア株式会社 
和智一臣
引き続き、失敗例・困ったことの発表 
•コードの散在、巨大なライブラリ 
•スコープ変数。。。 
•SSJS,CSJSの使い分け 
•クライアントサイドJavaScriptのお作法
JSコードの散在、JS巨大なライブラリ 
•目的の実装箇所がなかなか見つからない。 
•スクリプトライブラリが巨大化して、デザイナの動作が重い。。。 
•イベント処理コードが異様に長い。
ライブラリ化のルールが必要 
•ルール化にあたって 
•何でも“common.js” は要注意!! 
•共通ライブラリは放っておくと巨大化。 
•画面表示制御系、イベント処理系、マスタ参照系など、目的毎のライブラリ化 
•ページ毎に専用ライブラ...
スコープ変数。。。 
•スコープ変数の中身が良くわからない 
•同じ目的の変数を前任者が定義していた。 
•にもかかわらず置き換えたせいでバグ発生。 
•application,session,view,requestScopeどう使い分ける?
スコープ変数のルール化 
•設定箇所の局所化 
•XPage、カスタムコントロールの先頭にまとめる、 専用のライブラリのみ定義するとか 
•ページ間で共有するものは専用のコントロール内、またはライブラリに局所化 
•何でもSessionScop...
《compositeDataの使用》 
•カスタムコントロール内でのみ共有可能な記憶領域 
通常は、デザイナ画面でカスタムプロパティとして宣言するが、 カスタムコントロール内部での動的な宣言も可能。 
→同じMap実装なので、スコープ変数と使い...
CSJSとSSJSとの使い分け 
•インプットチェックはどっちで実装する? 
•CSJS&SSJS派 
レスポンス重視。 
クライアントサイドでできるものはクライアントサイドで済ませる。 
•SSJSオンリー派 
メンテナンス性重視 
エラーメ...
JavaScriptのお作法に則る 
•グローバル変数は危険・・・ 
•グローバル領域=widowオブジェクト 
•他フレームワークとの競合・・・ 
•グローバル領域には直接変数を設定しない。 
•他フレームワークと共存する場合など 
•変数格...
JavaScriptのお作法に則る 
•varを忘れないこと。 
•varを使わなくてもコンパイルエラーにはならないが、 グローバル領域に宣言される。 
//varを忘れると。。。 
function fnc1(){ 
v = “global”...
CSSファイルは定期的に整理!! 
•開発終盤になると、CSSファイルの中身がカオス! 
•似たような名前のクラス。。。 
•実際使っているのはどれ?? 
•コントールを削除するときは、CSSファイルもチェック! 
といっても、実際には難しいの...
《CSSセレクタの活用例》 
.formDataTable{ 
border:solid 1px #000000; 
border-collapse:collapse; 
width:640px; 
} 
.formDataTable TD{ ...
その他 
•recycle忘れには注意!! 
function doForAllDocuments(nView:NotesView){ 
varnDoc:NotesDocument, 
tempDoc:NotesDocument; 
try{ ...
その他 
•XSPJavaScriptオブジェクトの利用によるコード削減 
•http://www- 10.lotus.com/ldd/ddwiki.nsf/dx/Japanese_XSP_Client_Side_JavaScript_Obje...
今後の予定 
2月のフェスタに向けて 
•「XPages開発。これはルール化しておこう(仮)」の発表を予定しています。 
•今回発表した内容以外にも、毎回、開発者同士で課題の持ち合い、解決策の熱い ディスカッションを行ってます。 その一部も紹介...
Upcoming SlideShare
Loading in …5
×

X pages day発表_20141118 final

1,589 views

Published on

ノーツコンソーシアムXPages研究会中間報告@XPagesDay 2014 Nov 18
11/20掲載したファイルの表示が切れていたため差し替えました。

Published in: Software
  • Be the first to comment

X pages day発表_20141118 final

  1. 1. 1 目的 ノーツコンソーシアムは、お客様、取り扱いユーザー、IBM ICSチームか ら成る非営利団体です。情報交換や研究、セミナーを通じて、会員相互の 共通利益を追求します。 活動内容 各研究会(2014年度例) •ソーシャル研究会 •Xpages研究会 •DPP研究会 •大阪地区研究会 •九州地区研究会etc… イベント開催 •情報交換会 •テクニカルセミナー ノーツコンソーシアムの概要 ノーツコンソーシアムFacebookペー ジ https://www.facebook.com/notescons
  2. 2. 2 Notes Consortium Home Page http://www.notescons.gr.jp/
  3. 3. 3 Notesconsortium Facebook https://www.facebook.com/notescons
  4. 4. 4 ノーツコンソーシアム活動スケジュール(11月–12月) オープンセミナー クラウド時代のノーツドミノを考える 12月12日(金) 15:00-17:00 @渋谷IIC, リモート +-------------------------+ | ノーツコンソーシアム| +-------------------------+ [検索]
  5. 5. 【A5】ノーツコソーシアムXPages研究会 中間成果発表 2014/11/18
  6. 6. 今年のXPages研究会は。。。 いろいろな開発事例の紹介 参加者からの開発事例紹介 XPages 開発におけるベストプラクティスの発掘 (できれば)開発ルールの策定までやりたい。。。
  7. 7. ベストプラクティス策定までの道のり いきなりベストプラクティスはさすがに無理なので。。。。 •【Step1】まずは、失敗例、困ったこと事例を集めて •【Step2】「こうするべきだよね」、「これはやるべきでないよね」の意見交換 •【Step3】最後に、開発ルール案の提示 今は、【Step2】の途中です。。。
  8. 8. 今回の発表では・・・ •【Step1】まずは、失敗例、困ったこと事例を集めて •【Step2】「こうするべきだよね」、「これはやるべきでないよね」の意見交換 の2つの議論の中で特に関心が高かったものを ピックアップしてご紹介します。
  9. 9. 【A5】ノーツコソーシアムXPages研究会 中間成果発表(その1) -初めてのXPagesではまった落とし穴とその解決方法- 2014/11/18 アクロス株式会社 矢森隆嗣 9
  10. 10. •このパートではXPages研究会の中で、 【Step1】まずは、失敗例、困ったこと事例を集めて・・・ で議論した中で特に関心が高かったもの、初心者が陥りやすいものを取りまとめて みました。 10
  11. 11. 本パートのスピーカー 矢森隆嗣 アクロス株式会社 11
  12. 12. 本パートの目次 1.XPagesってこんなもの 2.初めてのXPages(困惑編) 12
  13. 13. 1.XPagesってこんなもの XPagesDayをご参加の皆様! こんなことは知ってらぁ!という声が聞こえてくる のを承知で、おさらいします。 13
  14. 14. 1.XPagesってこんなもの ・Notes Domino8.5から提供されている、Domino上で動作する Webアプリケーションを開発するための技術 ・Webアプリケーションを構築のためさまざまなコントロールが提供され、 従来のフォーム・ビューなどによるノーツクライアントアプリケーションの構築に 近い感覚で開発が可能 ・JavaScript、Cssのほか、JavaScriptを使用してノーツオブジェクトを操作を可 能とするServerSideJavaScript(SSJS)や@関数が使用できるので、 Lotus Scriptや式言語の知識がある方になじみやすい ・今までに蓄積されたノーツDBのデータをWeb上で利用するための1stチョイス 14
  15. 15. 2.初めてのXPages(困惑編) 最近でこそXPagesの開発も実績を積ませていただいておりますが、 初めてXPagesの開発に手を染めたころは・・・ これ、どうすればいいの???(@_@;) うまくいかない~!!(>_<) の連続で試行錯誤や調査などずいぶん遠回りをしました。 15
  16. 16. 2.初めてのXPages(困惑編) アクロス株式会社での経験をノーツコンソーシアムXPages研究会で 発表しましたところ・・・ 「やっぱりみんなハマるんだねぇ・・・」 とうなずきが多かったものをピックアップ、XPages研究会メンバーの ナレッジを追加してご紹介します。 XPagesを始める、始めたばかりの方へのちょっとしたHowToとして、 皆様の一助になれば幸いです。 16
  17. 17. 2.初めてのXPages(困惑編) メニュー 1.当然必要ですよね、JavaScript。 クライアントサイド(CSJS)とサーバーサイド(SSJS)ってどう違うの?使い分けは? 2.なんかエラーでた。デバッグってどうやろう。 3.既存のフォームに仕込まれた@式が使いたいんだけど。 4.競合ってどう処理するの? 5.URLでファイルダウンロードリンクを貼りたい。 でもファイル形式によってダウンロードしたり、開いたり。ダウンロードしたいんだけど・・・ 6.ロードバランサーなどで代表アドレスがあると・・・ 17
  18. 18. 2.初めてのXPages(困惑編) 1.当然必要ですよね、JavaScript。 サーバーサイド(SSJS)とクライアントサイド(CSJS)ってどう違うの?使い分けは? ■SSJS: サーバーにて処理される。 LS的にノーツオブジェクトが使えるので、文書とか他のDBとか参照するなどはこっち。 エラーチェックで使うときはユーザインターフェイスに注意。アラートぐらいはできるが、YES/NOなど返り 値が取れない。 ■CSJS: クライアントで処理される。レスポンスよく、サーバー負荷が低い。 でもSSJSでないとできないこともあり。 SSJSと混在してエラーチェックで使用するとCSJS→SSJSの順で処理される関係上、 画面上の並び順とエラーチェックの順序が異なりユーザの混乱を招く可能性も・・・ 18
  19. 19. 2.初めてのXPages(困惑編) 2.なんかエラーでた。デバッグってどうやろう。 ■CSJS: ・IEなりFirefox、Chromeなりの開発者ツールとか使えばデバッガーもある。 19
  20. 20. 2.初めてのXPages(困惑編) 2.なんかエラーでた。デバッグってどうやろう。(つづき) ■SSJS: ・ひとまずXspプロパティの「XPage実行時のエラーページを表示」をOnに。 詳細なエラーメッセージが表示されます。これは最低限! 20
  21. 21. 2.初めてのXPages(困惑編) 2.なんかエラーでた。デバッグってどうやろう。(つづき) ■SSJS: ・処理中の変数の確認などはview.postscript(“alert(…)”)で表示することにより可能。 サーバーコンソールが使えるならば、サーバーのnotes.iniに “Debug_Console=1”を追加して_dumpでコンソールに出力して確認する方法も・・・ (サーバの負荷に注意!) 21
  22. 22. 2.初めてのXPages(困惑編) 2. なんかエラーでた。デバッグってどうやろう。(つづき) ■SSJS:(つづき) ・Domino9から搭載されたSSJSデバッガーを使用することも出来ます。 SSJSデバッガーは変数のほか、セッション変数などの参照も出来ます。 サーバNotes.iniに設定する必要があります。 注意事項: (1)同一サーバー上で一人しかデバッガーは使用できない。 (2)サーバへの負荷が高い、かつデバッグしている際は他の ユーザが利用できない。 >運用サーバーで開発している場合、 または1サーバーを共有で開発している場合は Designerのプレビューでも利用できる(はず)。 22
  23. 23. 2.初めてのXPages(困惑編) 3.既存のフォームに仕込まれた@関数が使いたいんだけど。 →データソースの「フォーム検証の実行」を設定すれば、 オープン時/保存時/両方のタイミングで@関数が計算されます! 23
  24. 24. 2.初めてのXPages(困惑編) 4.競合ってどう処理するの? →「すべてのプロパティ」–「データ」のconCurrencyModeのオプション設定に より対応可能。 try -catch でトラップして、exceptionにて「もう一度修正してください」などの メッセージで回避のほか、「先勝ち」、「後勝ち」、 および「競合文書を作成する」を設定可能。 24
  25. 25. 2.初めてのXPages(困惑編) 5.URLでファイルダウンロードリンクを貼りたい。 でもファイル形式によってダウンロードしたり、開いたり。 ダウンロードしたいんだけど・・・ →XPages以前では以下の形式のURLでアクセスができました。 でも動作がファイルによって違う! http://ホスト名/DBファイルパス/0/ドキュメントID/$FILE/ファイル名 XPagesなら以下のURLならファイルがダウンロードになります。 http://ホスト名/DBファイルパス/xsp/.ibmmodres/domino/OpenAttachment/DBファイルパス/DocumentID/ファイルが添付されているフィールド名 /ファイル名 25
  26. 26. 2.初めてのXPages(困惑編) 6.ロードバランサーなどで代表アドレスがあると・・・ facesContextで今表示されているURLが取れない。 →CSJSで取得して、連携するとかちょっと工夫がいる。 context.redirectToPageにて相対パス指定でページ移動するとき、 そのイベントのサーバーオプションが「部分更新」だと代表アドレスでなくて サーバー名に・・・「全体更新」にすると代表アドレスになる。 26
  27. 27. 3.続いて・・・ 27
  28. 28. 【A5】ノーツコソーシアムXPages研究会 中間成果発表(その2) 2014/11/18 コムチュア株式会社 和智一臣
  29. 29. 引き続き、失敗例・困ったことの発表 •コードの散在、巨大なライブラリ •スコープ変数。。。 •SSJS,CSJSの使い分け •クライアントサイドJavaScriptのお作法
  30. 30. JSコードの散在、JS巨大なライブラリ •目的の実装箇所がなかなか見つからない。 •スクリプトライブラリが巨大化して、デザイナの動作が重い。。。 •イベント処理コードが異様に長い。
  31. 31. ライブラリ化のルールが必要 •ルール化にあたって •何でも“common.js” は要注意!! •共通ライブラリは放っておくと巨大化。 •画面表示制御系、イベント処理系、マスタ参照系など、目的毎のライブラリ化 •ページ毎に専用ライブラリ(というのもあり?) •目的、影響範囲が一目瞭然。 •ライブラリの数は増えるけど。。 •メンテナンス頻度、使い回しの容易さを考慮 •共通部品はライブラリに逃がさないで、 •ページ内にガシガシコードを書く方が、使い回しが楽。
  32. 32. スコープ変数。。。 •スコープ変数の中身が良くわからない •同じ目的の変数を前任者が定義していた。 •にもかかわらず置き換えたせいでバグ発生。 •application,session,view,requestScopeどう使い分ける?
  33. 33. スコープ変数のルール化 •設定箇所の局所化 •XPage、カスタムコントロールの先頭にまとめる、 専用のライブラリのみ定義するとか •ページ間で共有するものは専用のコントロール内、またはライブラリに局所化 •何でもSessionScopeはNG! •基本は、RequestScope。 •それぞれのライフサイクルの理解が必須! •なるべく使わない方法・・・ •カスタムコントロール内の参照なら、requestScopeの代わりにcompositeDataが使用可能。
  34. 34. 《compositeDataの使用》 •カスタムコントロール内でのみ共有可能な記憶領域 通常は、デザイナ画面でカスタムプロパティとして宣言するが、 カスタムコントロール内部での動的な宣言も可能。 →同じMap実装なので、スコープ変数と使い方は同じ。 →カスタムコントロールのローカル変数なので、外側からは参照できない。 ◆値の設定 compositeData.put(“key”,”value”) ◆値の使用 compositeData.get(“key”)
  35. 35. CSJSとSSJSとの使い分け •インプットチェックはどっちで実装する? •CSJS&SSJS派 レスポンス重視。 クライアントサイドでできるものはクライアントサイドで済ませる。 •SSJSオンリー派 メンテナンス性重視 エラーメッセージ制御が一元化。実装結果はシンプル。 ・・・・研究会でも意見が分かれたところ。。。 どちらが良いとは言えないけど、どちらかに統一はしましょう。
  36. 36. JavaScriptのお作法に則る •グローバル変数は危険・・・ •グローバル領域=widowオブジェクト •他フレームワークとの競合・・・ •グローバル領域には直接変数を設定しない。 •他フレームワークと共存する場合など •変数格納用オブジェクトをグローバル定義して、 プロパティとして変数を設定する var myGlobal = myGlobal || {};//グローバル変数格納用変数 myGlobal.hoge = “hogehoge”;//グローバル変数の設定 alert(myGlobal.hoge);//グローバル変数の使用
  37. 37. JavaScriptのお作法に則る •varを忘れないこと。 •varを使わなくてもコンパイルエラーにはならないが、 グローバル領域に宣言される。 //varを忘れると。。。 function fnc1(){ v = “global”;//関数内として定義したつもりが。。。 } alert(window.v);//”global”と表示される。 //->windowオブジェクトのプロパティに設定されている。
  38. 38. CSSファイルは定期的に整理!! •開発終盤になると、CSSファイルの中身がカオス! •似たような名前のクラス。。。 •実際使っているのはどれ?? •コントールを削除するときは、CSSファイルもチェック! といっても、実際には難しいので、 定期的に(忘れないうちに)整理する。 •CSSセレクタを活用して、コード量を減らす。
  39. 39. 《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タグの スタイルを定義(1列目、2列目、3列目の順) <xp:table styleClass="formDataTable"> →TABLEタグへのクラス指定のみ。 TDタグへのクラス指定が不要!! CSSクラスは 「formTable」のみ定義。 各セルのスタイルはセレ クタによる指定。
  40. 40. その他 •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{ } } ビューの各文書を 参照する処理では 必須!!
  41. 41. その他 •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); 既に、関数が用意されています。 たとえば、動的なイベント割り当ての場合
  42. 42. 今後の予定 2月のフェスタに向けて •「XPages開発。これはルール化しておこう(仮)」の発表を予定しています。 •今回発表した内容以外にも、毎回、開発者同士で課題の持ち合い、解決策の熱い ディスカッションを行ってます。 その一部も紹介します。

×