今回から数回にわたって、Groovyコンファレンスでデモする予定のアプリケーションPMSの仕組みと作り方について説明する。これはデモ用に作成した「日報入力アプリケーション」で、実際の業務で使うものではないが、基本は提案のソリューションでも同じ仕組みである。また、提案は携帯端末であったが、作り方に焦点をあてて説明したいので、普通のWebアプリケーションであることをご容赦願いたい。ただし、System-iへのデータアクセスは実際に行えるものを作る。<参考> PMS Demo
まず、開発のポイントをおさらいしよう。この記事の<提案>の部分である
1.代表となるWebサーバ(マッシュアップサーバ)をインターネットに公開する
2.各拠点のサーバ間はクローズドなVPN内で接続する
3.マッシュアップサーバから各拠点へのアクセス経路をつくり、拠点の情報はマッシュアップサーバ経由で検索できるようにする。
4.どの拠点にアクセスするかはマッシュアップサーバで判断する
5.拠点のサーバはXML(JSON)でデータを返すだけ。検索結果の編集はマッシュアップサーバで行う
上記を実現するため、BCEのそれぞれのレイヤにおいて以下の実装技術を使用する。
1.ブラウザからはAJAXでアクセスする
2.マッシュアップサーバにはsMashを使う
3.拠点サーバ(System-i)にReflexを導入する
この組み合わせのメリットは、前記事でも説明したが、それぞれの長所を生かせることと、BCEの各レイヤにおいて開発分業が可能になるという2点だ。
さて、アプリケーションの作り方であるが、具体的には次の順番で始める。この4番目まで作ったら、インスタンスを各レイヤに渡して後は個別での作業となる。(これについては次回以降説明する)
1.画面のモックアップを作る
2.モデリングを行い画面のEntity(Model)を作成する
3.テーブルのEntityを作成する(DAO)
4.Entityのインスタンスを作成する
(※)Reflex設計ではModelをEntityの構造として定義してドメインとしてシステム全体で使用する(補足:リソースの設計)
1.画面のモックアップを作る
まずは頭を空っぽにして画面のモックアップを作成するところから初める。モックアップはHTMLとJavaScriptだけで作成する。(Groovy、Javaは使わない)
<週報画面>
<月報画面>
上図2つはそれぞれ異なる画面であり、タブでブラウザ内を移動できるようになっている。
2.モデリングを行い画面のEntityを作成する
画面ができたら次にモデリングを行う。画面の項目について大、中、小と整理して構造を組み立てる。例えば週報の画面についてモデリングを行うと次のようになる。
週報
計画
実績
日付
出社時間
退社時間
タスク
内容
進捗%
評価
ユーザ
ユーザID
担当
パスワード
これを、Reflex Entity Editorを使って定義すると下図のようになる。
ここで、上記のReflex表現から、Reflex Entity Generatorを使ってEntity Beanを生成する。以下は自動生成したBeanの一部である、Reportのソースだ。
package jp.reflexworks.pms.model;
import jp.reflexworks.pms.controller.ReportCtl;
import java.util.List;
public class Report extends ReportCtl {
public List
public List
public List
public List
public String userid;
public String month;
public String responsecode;
public String createddate;
public List
return this.activity;
}
public void setActivity(List
this.activity = activity;
}
public List
return this.assessment;
}
・・・・
}
package jp.reflexworks.pms.model;
public class Activity {
public final int _$$col = 6;
public String _$$text;
public int get_$$col() {
return this._$$col;
}
public String get_$$text() {
return this._$$text;
}
public void set_$$text(String _$$text) {
this._$$text = _$$text;
}
}
2番目のソースは、Reportのもう一つ下の階層である要素のActivityであるが、これは以下のような2次元配列を格納できるようになっている。$$col=6が配列内部の要素数を示している。
def Activity = [["日付","出社時間","退社時間","タスク","内容","進捗%"]];
JSONとJavaBeanの変換例とサンプルプログラムについては、こちらを参照=>Reflex JSON Sample
3.テーブルのEntityを作成する
ここで、具体的にテーブル設計を行って、必要であれば正規化を行う。
先に定義したActivityは2次元配列であり、そのままではテーブルに格納できないため、Activityを変換して、テーブルにストアできるEnitityクラスを定義しなければならない。下図のActivityから引かれている矢印の先にあるActivitityDetailが変換すべきEntityとなる。
いわゆる、O/Rマッピングをここで行うことになるのだが、一般的なWeb設計と異なり、テーブル設計がEntity設計を行った後になっていることがポイントである。それから、Entityと項目名を統一することでシステム全体の見通しをよくすることも重要である。
既存のテーブルを使用する場合はしかたないとしても、テーブル設計を先にやってしまうと、リレーショナルモデルをシステム全体に及ぼすことになって不都合となることが多い。また、こちらに書いたように、オブジェクト設計の意味が半減してしまうのでなるべくなら後の方がよい。
ちなみに、Entity Generatorは、Entityと同時にテーブル生成用のSQLも出力するので、そのままSQLを使用するのであればテーブル設計は必要ない。(この場合、O=Rのイメージとなる)
<O/Rマッピング>
4.Entityのインスタンスを作成する
最後に、Entityのインスタンスを作成し、BCEそれぞれのレイヤの開発者に渡す。
開発者はインスタンスを元に開発することで相手システムと接続する必要がなくなる。その結果、相手の進捗によらず自分が担当している機能だけに集中できる。システムが疎結合であるため、このような開発スタイルが可能になったのだ。
<インスタンス>
var report = {
activity : [
["07/05","10:00","18:00","JavaScript","暑い","80%"],
["07/06","10:00","18:00","CSS","寒い","20%"],
["07/07","10:00","18:00","HTML","普通","40%"],
["07/08","10:00","18:00","JSON","暖かい","70%"],
["07/09","10:00","18:00","Ajax","肌寒い","100%"],
["07/10","10:00","18:00","JavaScript","暑い","80%"],
["07/11","10:00","18:00","CSS","寒い","20%"],
["07/12","10:00","18:00","HTML","普通","40%"],
["07/13","10:00","18:00","JSON","暖かい","70%"],
["07/14","10:00","18:00","Ajax","肌寒い","100%"],
["07/15","10:00","18:00","JavaScript","暑い","80%"],
["07/16","10:00","18:00","CSS","寒い","20%"],
["07/17","10:00","18:00","HTML","普通","40%"],
["07/18","10:00","18:00","JSON","暖かい","70%"],
["07/19","10:00","18:00","Ajax","肌寒い","100%"],
["07/20","10:00","18:00","JavaScript","暑い","80%"],
["07/21","10:00","18:00","CSS","寒い","20%"],
["07/22","10:00","18:00","HTML","普通","40%"],
["07/23","10:00","18:00","JSON","暖かい","70%"],
["07/24","10:00","18:00","Ajax","肌寒い","100%"],
["07/25","10:00","18:00","JavaScript","暑い","80%"],
["07/26","10:00","18:00","CSS","寒い","20%"],
["07/27","10:00","18:00","HTML","普通","40%"],
["07/28","10:00","18:00","JSON","暖かい","70%"],
["07/29","10:00","18:00","Ajax","肌寒い","100%"]
],
assessment : ["月の評価",
"よくできました",
"2週目評価",
"3週目評価",
"4週目評価"
],
plan : ["月のPlan","1週目plan","2週目plan","3週目plan","4週目泉岳寺"],
task : [
["週報システム","設計","クラス図","8/1","8/15","5"],
["週報システム","設計","クラス図","8/16","8/19","3"],
["取引システム","開発","Javaソース","8/20","8/31","2"]
],
userid : "user01",
month : "200808"
};
0 件のコメント:
コメントを投稿