BootStrapと jQuery の利用
今回は、BootStrapと jQuery の利用のご紹介をサンプルDBを基に行います。
１） サンプルDBのダウンロード
XpagesDay2016でも利用した本ブログで使用するサンプルDBをgithubへアップしました。
AjaxSample/founder_Ajax.nsf at master · RitsNishi/AjaxSample · GitHub
＜ダウンロード方法＞
上記リンク先にて「Download」ボタンを押すとダウンロードできます。
BootStrapと jQueryに必要なライブラリをDBに設置する場合は、下記を参考にしてみてください。
Twitter Bootstrap を XPages で使う (IBM Enterprise Social Solutions Development Engineer Blog in Japan)
今回のサンプルDBでは既に、BootStrapと jQueryに必要なライブラリは設置済みの為、 上のURLの内容をする必要はありません。
２） BootStrap の実装
＜サンプルDB-利用設計要素＞
| 設計要素 | 名前 |
|---|---|
| Xpages | Ph1_BootStrapSample.xsp |
＜参考サイト＞
ドロップダウン ≪ コンポーネント ≪ Bootstrap3日本語リファレンス
＜ソース＞
<?xml version="1.0" encoding="UTF-8"?> <xp:view xmlns:xp="http://www.ibm.com/xsp/core" xmlns:xc="http://www.ibm.com/xsp/custom"> <xp:this.resources> <xp:script src="jQuery/jquery-2.1.3.min.js" clientSide="true" /> <xp:script src="Bootstrap/js/bootstrap.min.js" clientSide="true" /> <xp:styleSheet href="Bootstrap/css/bootstrap.css" /> </xp:this.resources> <!--ここにBootStrapのHTMLを貼りつけ（ 参考：http://bootstrap3.cyberlab.info/components/）/////////////////// --> <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="#">リンクのリスト１</a></li> <li role="presentation"><a href="#">リンクのリスト２</a></li> <li role="presentation"><a href="#">リンクのリスト３</a></li> </ul> </div> <!-- ///////////////////ここにBootStrapのHTMLを貼りつけ（ 参考：http://bootstrap3.cyberlab.info/components/） --> </xp:view>
XPageの設計要素の中身は、
これだけです。
該当のXpageをブラウザで起動して、「F12」キーを押して見ましょう。 すると、Dominoが変換してくれたHTMLソースとCSSが表示されます。
ここで、＜button class="btn btn-default dropdown-toggle"・・・と記述されている部分にカーソルを当ててみると、
BootStrapのスタイルが当たっていることが分かります。
BootStrapのサンプルサイトを参考にするだけで、ある程度の画面デザインは実現できます。
あとは、いろいろなサイトを参考にしながら、HTMLやCSSの基本知識を学ぶことでUIについては、実現していくことができます。
３） jQuery の実装
＜サンプルDB-利用設計要素＞
| 設計要素 | 名前 |
|---|---|
| Xpages | Ph2_JquerySample.xsp |
＜参考サイト＞
css(name, value) - jQuery 日本語リファレンス
＜ソース＞
<?xml version="1.0" encoding="UTF-8"?> <xp:view xmlns:xp="http://www.ibm.com/xsp/core" xmlns:xc="http://www.ibm.com/xsp/custom"> <xp:this.resources> <xp:script src="jQuery/jquery-2.1.3.min.js" clientSide="true" /> <xp:script src="Bootstrap/js/bootstrap.min.js" clientSide="true" /> <xp:styleSheet href="Bootstrap/css/bootstrap.css" /> </xp:this.resources> <div class="panel panel-default" style="margin:10px"> <div class="panel-body"> <ul> <li id="taro">太郎</li> <li>次郎</li> <li>花子</li> </ul> </div> <div class="panel-footer"> <xp:button value="ID指定でスタイル切り替え" id="button1"> <xp:eventHandler event="onclick" submit="false"> <xp:this.script><![CDATA[$("#taro").css("color", "red");]]></xp:this.script> </xp:eventHandler> </xp:button> </div> </div> </xp:view>
このソースでは、ボタンを押した際に、
「"taro"というIdをもった要素に対して、色を赤色にする。」
ということをしています。
jQueryと呼ばれる部分は、
$("#taro").css("color", "red");
になります。
$("")の中にターゲットとなる要素の情報（セレクタ）を記述し、その要素に対して行いたいメソッドを指定することで、
DOM操作を実現することができます。
セレクタでは、idを指定したり、classを指定したり、複雑な組み合わせでの要素を絞ることができますし、 複数の要素に対してメソッドを当てるといったこともできます。
４） BootStrapと jQuery の併用
それでは、２）のBootStrapSampeを使って、jQueryのクリックイベントを実装してみます。
＜サンプルDB-利用設計要素＞
| 設計要素 | 名前 |
|---|---|
| Xpages | Ph1_BootStrapSample.xsp |
＜ソース＞
Ph1_BootStrapSample.xspの最後の方（＜/xp:view＞の前）に下記のようにクライアントサイド用のscriptを記述します。
: : <script> $("li").click(function () { var btnName = $("a",this).text(); alert("押したボタンは、「" + btnName + "」です。") }); </script> </xp:view>
ドロップダウンリストでは、「リンクのリスト１」～「リンクのリスト３」が＜li＞要素を使ってリスト化されています。
この＜li＞タブをクリックした時のイベントを$("li").click()で表現することができ、
このイベントは、全ての＜li＞タグに有効になります。
イベントの中では
- クリックした要素内の＜a＞タグに書かれたテキストノードを「btnName」という変数にセット。
- 取得した値をメッセージボックスで表示。
といったことをしています。
結果は、下記のような感じで、各ボタンのアクションを1つのソースで実現することができます。
本日、XpagesDay 2016にセッションスピーカーとして参加しました
本日、TeamStudio様主催のXpagesDay 2016にセッションスピーカーとして参加しました。
http://xpagesday.com/xpagesday.nsf/home.xsp
今回のセッションでは、本ブログで記述していこうと思っていた部分の7,8割を話してしまいました...
今後はしばらく、セッション資料をベースにブログの投稿数をちびちび稼ごうと思っています。
セッションを既に聞いて下さっていて、落ちも分かっている方は、面白くない内容かもしれませんがご了承ください。
セッションを聞いていない方で、落ちまで見たい方は、下記をご覧ください。
その後の本ブログの構想としては、外部ライブラリの紹介やJQueryのメソッドを使ったDOM操作など、 JavaScriptを中心とした情報をNotes/Xpages開発者視点で紹介していこうと考えています。
アーキテクチャ：基本構成
今回は、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について、サンプルを交えながらもう少し書きたいと思います。
アーキテクチャ：コンセプト
ここ最近、少しずつではありますが、より効率的にXPages開発するために「Founder」というフレームワークを開発しています。
OpenNTFにある「Extension Library」やTeamStudio様の「XContorls」などと同じように、
カスタムコントロール等で構成された部品群です。
このブログでは、この「Founder」フレームワークで使われているアーキテクチャを通して、下記の開発者向け視点で話をして行こうと思います。
【開発者レベル】
- Notesクライアント向けの開発経験がある
- XPagesの基本的知識がある
- WEB開発についてあまり知識がない
コンセプト
このフレームワークでは、XPages標準で欠けているであろう３つのポイントを克服する目的で考えられました。
１）操作性
XPagesアプリを開発するにあたって、クライアント動作しているDB*1をWEB向けに焼き直しするという話は少なくはありません。 簡単なアプリであれば、標準コントールを使って、ナビゲータやビューの一覧を表示させることは可能でしょう。
しかし、Notesクライアント自体があまりにも素晴らしい出来である為、Web化した時に操作性で劣化してしまう部分が多々あります。
例えば、
- クライアントでビュー表示をした場合、全対象文書が一覧で表示されるにも関わらず、XPagesの場合はページャーでページを切り替えなけれならない。
- XPagesでビューの文書を選択する際、1件1件チェックボックスでチェックしなければならない。
- リッチテキスト機能が劣化する。
などなど。
お金を掛けてWEB化した結果、機能そのままどころか、劣化してしまうことに何の意味があるのでしょうか。
すべてのDBがWeb化され、利用ユーザーのクライアント管理が不要となるのであれば効果があるかもしれませんが、
であれば、Notes Pluginや別のグループウェアに移行した方が良いのでは？と思ってしまいます。
FacebookなどのSNSをはじめ、世の中のWEBサイトは、ユーザーへのストレス軽減を操作性を考慮したアプリが溢れています。 操作性が劣化したアプリを提供していては、「Notesは古い」というイメージを脱却する事はできません。
IBM Champion 加藤様のブログにもありますが、せっかくWeb化するのであれば単純な焼き直しではなく、よりよいアプリを作ろうではありませんか。
IBM Champion 加藤様のブログ jp.teamstudio.com
２）トレンドのデザイン
Notesクライアント向けDBを開発している場合、どこまでデザインを重視されていますか？
クライアントで実現できるUI/UXは限られていいますし、社内向けのDB開発なのでデザインにに対して深く意識することは無かったりすると思います。
ですがWEBとなると、少し変わってくるのではないでしょうか？
ユーザーからすると「Notes」という感覚は無くなり、facebookやブログサイトのような１つのWEBサイトに捉えられます。
他のWEBベースでできたグループウェアと比較しても、昔作ったDBは見劣りしてしまいます。
ずっと、思っていました。Notesは、互換性があり過ぎなのです。互換性があり過ぎるせいで、DBがリニューアルされず、デザインが古く見えてしまう。 青色ベースの最新クライアントになったところで、各アプリは古いままなのです。
デザインには、流行り廃り、逆に操作しずらい、どのデザインが主流になっていくか読めない等あり、難しいところもありますが、Notes4.5時代に作ったような古臭いデザインのままよりは、少しでもこだわった方がよいのではないでしょうか。
XPagesでは、「One UI」というデザインフレームワークが 用意されており、設定だけでポップなデザインにすることができますが、そのデザインもちょっと古くなってきています。
では、どんなデザインがよいのでしょうか。 最近のデザインのトレンドは、SNSやGoogleサイト等を見ればだいたい分かってきます。 ちょっと前まではフレームに丸みを帯びたものが流行っていましたが、最近はフラットデザインが流行っています。
ちまたには、Bootstrap、Material Designをはじめ多くのWebアプリ向けのデザインフレームワークがあり、ガイドラインに沿ったタグ記述やClass定義をすることで、デザインセンスに自身がない人でもオシャレなページを実現できるようになっています。
ただし、XPages上でこのフレームワークを使うにはいろいろと厄介な点が出てきます。（この点は、今後の話で記述していきます。）
３）カスタマイズ性
下記は、私がメインで担当したQA9サイトの質疑・回答画面のXpages設計です。
＜設計タブ＞
＜ソースタブ＞
<div class="qaInfo"> <xp:panel styleClass="inlineB"> <span>カテゴリ:</span> <xp:link escape="true" id="category_link"> <xp:this.text><![CDATA[#{javascript:var doc =docQues.getDocument(); doc.getItemValueString("Category"); }]]></xp:this.text> <xp:eventHandler event="onclick" submit="true" refreshMode="complete"> <xp:this.action> <xp:actionGroup> <xp:executeScript> <xp:this.script><![CDATA[#{javascript:var doc =docQues.getDocument(); var Target = doc.getItemValueString("Category"); sessionScope.CategoryName = Target;}]]></xp:this.script> </xp:executeScript> <xp:openPage name="/top.xsp"></xp:openPage> </xp:actionGroup> </xp:this.action> </xp:eventHandler> </xp:link> <span class="separator"> | </span> <span>タグ:</span> <xc:cc_Taglist id="Ques_Tag"> <xc:this.TagField><![CDATA[#{javascript: var Tag =docQues.getItemValue("Tag"); return @Implode(Tag,",") }]]></xc:this.TagField> </xc:cc_Taglist> <span class="separator">  | </span> <span>質問日時:</span> <xp:text styleClass="value" escape="true" id="Ques_Created" value="#{docQues.Created}"> <xp:this.converter> <xp:convertDateTime type="both"> </xp:convertDateTime> </xp:this.converter> </xp:text> <xp:image url="/3096_32.png" id="image5" style="width:20px;height:20px"> <xp:this.rendered><![CDATA[#{javascript:var parentdoc = docQues.getDocument(); //質問者でなければ、非表示 if (Common.getCurrentUser().name!=parentdoc.getItemValueString("Author")){ return false; }else{ return true }}]]></xp:this.rendered> </xp:image> <xp:text escape="false" id="Editlink" style="text-decoration:underline;color:rgb(0,0,255)"> <xp:this.value><![CDATA[#{javascript:var doc =docQues.getDocument(); var editdocID = doc.getUniversalID(); return "<a href=\"x_QuestionCompose.xsp?docId=" + editdocID + "\">" + "編集する" + "</a>"}]]></xp:this.value> <xp:this.rendered><![CDATA[#{javascript:var parentdoc = docQues.getDocument(); //質問者でなければ、非表示 if (Common.getCurrentUser().name!=parentdoc.getItemValueString("Author")){ return false; }else{ return true }}]]></xp:this.rendered> </xp:text> <xp:link escape="true" id="Deletelink" text="削除" style="text-decoration:underline"> <xp:this.rendered><![CDATA[#{javascript:var parentdoc = docQues.getDocument(); //質問者でなければ、非表示 if (Common.getCurrentUser().name!=parentdoc.getItemValueString("Author")){ return false; }else{ return true }}]]></xp:this.rendered> <xp:image id="image7" url="/3159_32.png" style="height:20px;width:20px"> </xp:image> <xp:eventHandler event="onclick" submit="true" refreshMode="complete"> <xp:this.action> <xp:actionGroup> <xp:confirm message="この質問文書を削除してよろしいですか？"> </xp:confirm> <xp:executeScript> <xp:this.script><![CDATA[#{javascript:var targetdoc = docQues.getDocument(); //削除処理 qa_JsLib.DeleteDocument(targetdoc,1); }]]></xp:this.script> </xp:executeScript> <xp:openPage name="/top.xsp"></xp:openPage> </xp:actionGroup> </xp:this.action> </xp:eventHandler> </xp:link> <xp:table style="width:100%"> <xp:tr> <xp:td></xp:td> <xp:td style="text-align:left"> <xc:cc_UserProfile> <xc:this.userName><![CDATA[#{javascript:var Author = docQues.getDocument().getItemValueString("Author"); return @Name("[ABBREVIATE]",Author)}]]></xc:this.userName> </xc:cc_UserProfile> </xp:td> <xp:td> <xp:panel id="Bestpanel"> <xp:this.rendered><![CDATA[#{javascript:if (Common.getCurrentUser().name=="Anonymous") { return false; } else { return true; } }]]></xp:this.rendered> <xp:image url="/2925_64.png" id="image3" title="お気に入り登録する" styleClass="StartIcon"> <xp:this.rendered><![CDATA[#{javascript:var su = Common.getCurrentUser().name; var Favmem = docQues.getItemValue('User_Favorite'); if(@IsMember(su, Favmem) == @True()) { return false ; } else { return true ; }}]]></xp:this.rendered> <xp:eventHandler event="onclick" submit="true" refreshMode="partial" refreshId="Bestpanel" id="eventHandler1"> <xp:this.action><![CDATA[#{javascript:var targetdoc = docQues.getDocument(); //お気に入り！質問文書-ユーザー登録 qa_JsLib.SetFavoriteCountUD(1,targetdoc); //お気に入り！プロフィール-お気に入り先登録 qa_JsLib.SetPersonHistory(targetdoc,3); }]]></xp:this.action> </xp:eventHandler> </xp:image> <xp:image url="/3227.png" id="image4" styleClass="StartIcon" title="お気に入り解除する"> <xp:this.rendered><![CDATA[#{javascript:var su = Common.getCurrentUser().name; var Favmem = docQues.getItemValue('User_Favorite'); if(@IsMember(su, Favmem) == @True()) { return true ; } else { return false ; }}]]></xp:this.rendered> <xp:eventHandler event="onclick" submit="true" refreshMode="partial" refreshId="Bestpanel" id="eventHandler2"> <xp:this.action><![CDATA[#{javascript:var targetdoc = docQues.getDocument(); //お気に入り！質問文書-ユーザー解除 qa_JsLib.SetFavoriteCountUD(0,targetdoc); //お気に入り！プロフィール-お気に入り先解除 qa_JsLib.SetPersonHistory(targetdoc,4); }]]></xp:this.action> </xp:eventHandler> </xp:image> </xp:panel> </xp:td> <xp:td> <xc:c_SelectSnippet></xc:c_SelectSnippet> </xp:td> </xp:tr> </xp:table> </xp:panel> </div>
javascriptもXpagesも経験が浅い状態で作ったので非常に汚いソースでお恥ずかしい部分もありますが、ご了承ください。
まず、設計タブですが、繰り返しコントロールやパネルなど複数のコントロールが入り乱れており、非常に分かりづらい状態となりました。 どこにどういうコントロールを配置したのか分かりませんし、修正したいコントロールを選択しようとしてもなかなか選択できません。
こうなってくると、ソースタブで開発をしていく事になるのですが、こちらは、HTMLタグ、XPages独自タグ*2をはじめ、javascript（ボタン等の処理）やCSS（色や幅等のデザイン）が入り乱れています。 今回のソースでは、基本CSSを別のスタイルシートファイル上に記述するようにしていますが、NotesクライアントDB開発者はどう記述するでしょう？ XPagesの各コントロールプロパティ上でもアクションイベントやスタイルを定義できるようになっているわけですから、おそらくこれまでの開発同様、プロパティ内にアクションを記述したり、色を付けたりすることでしょう。
結果、ソースタブには複数の言語が入り乱れ、ソースの管理が難しくなります。
そこで、それぞれのソースの記述を綺麗に分離させ、後から読みやすくカスタマイズ性を持たせる必要がでてきます。
ここに関しては、フレームワークと言うより開発ルールになってきますが、より効率よい開発をするにあたって重要な部分になります。
「操作性」、「デザイン性」、「カスタマイズ性」。
「Founder」フレームワークは、この３つをコンセプトにアーキテクチャを組みました。
次回は、アーキテクチャの概要と基本ルールについてまとめたいと思います。
はじめに：本ブログについて
初めまして。
私は、グループウェア Notesをこよなく愛するＳＥの一人です。
かれこれNotes開発に15年ほど関わってきましたが、
クライアント上で動くLotusScriptを使ったプログラムがメインで活動してきました。
2012年頃、ひょんなことからNotesコンソから派生した九州地区ノーツパートナー会のメンバーとなり、 以前から興味の持っていたXPagesについて勉強を始めました。
WebもXpagesもほとんど無知な状態でしたが、
従来型のNotesアプリケーションが、どのようにしたらXPagesで実現できるのかを探求し、
「さまざまなタイプのフィールドの表現を XPages のビューコントロールを用いて実現する方法」をパートナー会として発信しています。
その後、メンバーでXPagesを駆使して、Notes開発者向けのQAサイト「qA9サイト」を開設しました。
このQAサイトでは、これまでのよくあるNotesDBのデザインではなく、stackoverflowのようなリッチで使い易いアプリをめざして開発しました。
ゼロから初めてXPagesのアプリの開発をしてみて、感じたことは、
XPagesムズイ！！！
です。
XPagesの思想としては、これまでクライアント向けDBの開発をしてきた開発者が、違和感なく開発ができるよう設計されている気がしますが、Webアプリは、そんな甘いものではないと感じました。
私のようにクライアント向けDBの開発出身者は、このXPagesには非常に苦労し、このままではXPagesは発展できないのではないかと考えています。
このブログでは、上記経験を経て、私が行きついたXPagesでの開発手法について、投稿していきます。
題して「脱XPages」です。
※「脱XPages」としていますが、XPagesを否定するものではありません。
※100％脱はしていません。インパクトを付ける為に書きました。
イメージ例
社内向けポータル「neRson」
文書管理システム
