アーキテクチャ：基本構成
今回は、Founderフレームワークにおけるアーキテクチャ図とその説明を記述します。
本フレームワークでは、Xpage用に用意された標準コントロールは基本使用せず、一般的なWebアプリ開発の手法を利用していきます。
となると、「.xsp」である必要性もなくなるのですが、Extension Libraryのように、カスタムコントロール化し、 部品としてXpage上にペタペタ貼っていきたいのでXpage、カスタムコントロールの設計要素は利用していきます。
１）アーキテクチャ図
UI/デザイン
XPage内には、BootStrapをベースとしたHTMLで見た目を実現していきます。Input（アクション）はjQueryを使ってサーバーサイドに渡し（命令）、 OutputもjQueryを使って画面に反映（描画）していきます。
また、Xpages上へスタイルの直書きは行わず、カスタムコントロールごとのCSSに記述します。
操作：
標準コントールで表示・非表示を実現した場合、サーバーサイドへ要求を投げ、戻ってきた部分HTMLを描画するといった無駄な通信が発生します。
そこで、jQueryを用いて画面の表示・非表示や動きを実現させ、無駄な通信を抑えます。
ユーザーへのストレス軽減、マウス移動やクリック操作をできるだけ抑えた操作性を実現します。
トランザクション：
javascriptを用いたプログラムにより開発を行い、Xpage上での@関数やシンプルアクションは利用しません。 基本的にXpage/カスタムコントロール内にソースは書かず、用意したCSJS用とSSJS用のライブラリにて DOM操作も含め、トランザクション用のソースを一元管理します。
NotesDBへのアクセス、文書の参照/更新は、HTML通信（jquery.$ajax）にて実行します。（命令⇒結果）
データ：
便利性、汎用性を考え、データのやり取りや文書上に保持するデータは、JSON形式で行います。
Xpageの標準コントロールは、使用しないので薄っぺらく表現しました。 この構成で実現した場合、Xpagesの知識は、不要となります。 Notesとしての知識は、NotesDatabaseやNotesDocumentクラス等、LotusScriptのプログラム知識があればよいです。
逆に、HTML、CSS、JavaScript等の一般的なWebアプリ開発をする為の知識が必要になってきます。
ただ、こちらについては、有識者やweb上の情報も多く、将来的にNotes以外の開発をするとなった時にも役に立つと思います。
（XPages勉強していないものだから、QA9サイトで上がってくるXPagesの質問は、まったく分からなくなってきました・・・）
２） Xpages 標準コントロールの利用しない理由
Xpagesは、Dojoフレームワークを使った多くのコントロールが存在しますが、下記のような弊害があります。
- クライアント向け開発に比べ、複雑なプロパティ設定が必要で、EUCができるレベルの開発ではない。
- 参考文献が少なく、あったとしても基本的なレベルのものであり、従来レベルのアプリ開発しか実現できない。
- コントロール内のそれぞれのプロパティに設定することで、ロジックが煩雑化してしまう。
- 「設計」タブ（ﾃﾞｻﾞｲﾅｰ上でのプレビュー）で、GUIが実現できておらず、結果的にソースレベルでの構築が早い。
- Dominoのバージョンによって、非互換が発生しやすい。
- Xpages特有の「<xp：XXX>」タグが使われることで、webアプリ構築向けサイトからのソースが流用しずらい。
- Dojoのバージョンアップも乏しく、参考文献も少ない。結果、jQueryに吸収された。
３） BootStrap について
HTML、CSS、Javascriptからなるフレームワークの１つです。
見た目や動きについて、はじめからある程度用意してくれている「ライブラリファイル」。
class等の属性に決められた値をセットするだけでリッチなデザインを実現できます。（Xpages標準では、One-UI）
同じようなフレームワークとして、MaterialUIやFoundationなど様々なものがありますが、下記の理由から、BootStrapを採用しました。
- グリッドシステムによって、レスポンシブ・ウェブ・デザインを実現。利用する端末によって画面レイアウトを調整することができる。
- 統一されたデザインにすることでリッチなデザインを実現。パターンCSSを変えることである程度、時代やユーザー思想に合わせたデザインに切り替えることができる。
- 参考文献が豊富にある。
- 好み。（最近、MaterialUIに傾いてきてますが・・・）
＜参考サイト＞
- 親サイト：http://getbootstrap.com/
- Bootstrap3日本語リファレンス：http://bootstrap3.cyberlab.info/
- Bootstrapの使い方：http://greenapple-room.com/conc/user/TwitterBootstrap/bootstrap.html
４） jQuery について
ウェブブラウザ用のJavaScriptコードをより容易に記述できるようにするために設計された軽量なJavaScriptライブラリです。 開閉式のメニューを作ったり、指定したタグ内の色や値を変えるといったDOM操作から、POSTなどのHTML通信まで容易に実現できます。 BootStrap内でも利用されており、文献や派生ライブラリも多く存在します。
＜参考サイト＞
- 親サイト：https://jquery.com/
- jQuery日本語リファレンス：http://semooh.jp/jquery/
- jQueryにおけるフォーム値の取得と設定１： http://jszuki.doorblog.jp/archives/31702159.html
- jQueryにおけるフォーム値の取得と設定２：http://js.studio-kingdom.com/jquery
５） JSONについて
JSON は、「JavaScript Object Notation」の略。テキストフォーマットの一種です。シンプルで軽量です。 Web開発を始めて、よく聞くようになったのですが、分かりやすく言えばCSVデータが「,(カンマ)」区切り表現されているのに対して、 ｛｝や[]などを使って連想配列の形ができるイメージです。
＜参考サイト＞
- JavaScriptプログラミング講座【JSON について】：http://hakuhin.jp/js/json.html#JSON_00
６） データ送受信について
jQuery.ajaxを用いてデータの送受信を行います。 非同期通信を行うことで、レスポンスを待っている間の不快感を低減します。
＜参考サイト＞
Extension Libraryには「RESTコントール」もありますが、 このフレームワークでは使っていません。 「RESTコントール」については、下記に詳しく書かれています。
次回は、「HTTP通信(ajax）」についてもう少し詳しく書いていきます。
そろそろ、サンプルDBも公開できるようにします。
次回は、BootStrapとJQueryについて、サンプルを交えながらもう少し書きたいと思います。
