現場で役立つ実践Teeda

2007 Spring 現 場 で 役 立 つ 実 践 Teeda 2007.5.27 エスエムジー 株 式 会 社 テクニカルコンサルタント 鈴 木 貴 典 2007 Spring Copyright 2004-2007 The Seasar Foundation and the others. All rights reserved. 1

名 前 : 鈴 木 貴 典 Blog:http://d.hatena.ne.jp/szk-takanori/ はじめまして 所 属 :エスエムジー 株 式 会 社 (http://www.smg.co.jp) コミッタ:S2Axis/S2Axis2 メール :takanorig@gmail.com 主 な 仕 事 : フレームワーク 開 発 Web+DBアプリ 開 発 プロセス 改 善 (SEPG) 2

現 場 で 役 立 つ 実 践 Teeda このセッションのゴール Teedaをより 便 利 に 使 いこな せるようになってもらいたい! このセッションの 位 置 づけ Teedaプロジェクトリーダの 大 谷 さんによる 今 から 役 立 つ Teeda 入 門 に 続 くものです 3

Agenda 1. Teedaの 特 徴 2. アプリケーション アーキテクチャを 決 める 3. HTMLモックアップ 作 成 のコツ 4. スコープ 管 理 を 使 いこなす 5. かゆいところに 手 が 届 く 便 利 機 能 6. Teedaにおけるテスト 実 践 4

Teedaの 特 徴 5

UI(=ページ)を 中 心 に 開 発 するスタイル Teedaの の 特 徴 ページ 開 発 駆 動 ユーザにとって 最 も 分 かりやすいものを 中 心 に 据 える Teedaは この 開 発 スタイルによって 最 適 化 されている UIスケッチ xxx ユーザレビュー xxx OK キャンセル HTML テンプレート (View) DB Javaクラス データベース モデリング UIモック 自 動 生 成 (Chura) 6

アプリケーション アーキテクチャを 決 める 7

アプリケーション アーキテクチャを 決 める レイヤーとコンポーネントの 構 成 を 考 える Goyaベース DxoやDoltengとの 親 和 性 の 向 上 を 目 指 す Teedaでは 画 面 と1:1になるようにPageを 作 成 する employeelist.html EmployeeListPage.java ただし Page( 画 面 の 項 目 と 関 連 )とAction( 画 面 のボ タンと 関 連 )を 分 割 することも 可 能 employeelist.html EmployeeListPage.java EmployeeListAction.java 8

アプリケーション アーキテクチャを 決 める Full Pattern 大 規 模 アプリケーション 向 け 画 面 とロジックを 分 担 して 共 同 開 発 したり フロー 制 御 や 他 システム 連 携 が 多 かったりするシステムに 向 く Actionを 無 くして Pageだけにする 構 成 でもOK! 9

アプリケーション アーキテクチャを 決 める Middle Pattern 中 規 模 アプリケーション 向 け 画 面 ロジックとドメインロジックを2つのレイヤーに 集 約 させたパターンであり 大 抵 のシステムに 対 応 できる 10

アプリケーション アーキテクチャを 決 める Lightweight Pattern 小 規 模 アプリケーション 向 け 画 面 とDBテーブルが1 対 1で ロジックはほぼない と いうシステムに 向 く 11

HTMLモックアップ 作 成 のコツ 12

HTMLモックアップ 作 成 のコツ IDの の 決 め 方 全 フィールドに 対 して ユニークになるように 付 ける :name :username HTMLのIDと DBのフィールドを ルを 指 定 しなくても 自 動 的 にマッピングされる 一 致 させる (DBのカラム 名 もユニークにする( ID/VersionNo 以 外 )) 社 員 番 号 社 員 名 所 属 登 録 id= empno id= empname id= deptnoitems (value) : deptno Dxo リスト 項 目 のIDは valueとなるidに 合 わせる Dxoでの 変 換 時 に 変 換 ルー EMPLOYEE EMP_NO EMP_NAME DEPT_ID DEPT DEPT_NO DEPT_NAME 13

HTMLモックアップ 作 成 のコツ ボタンとリンクの 使 い 分 け ボタン と リンク では 値 の 引 き 継 がれ 方 が 異 なる ボタン(doXxx, goxxx, jumpxxx) 全 プロパティが 次 画 面 に 引 き 継 がれる リンク(goXxx) クエリストリングで 指 定 したプロパティのみ 次 画 面 に 引 き 継 がれる でも リンクで 遷 移 して かつ 値 も 引 き 継 ぎたい 場 合 も ある 例 タブ(に 見 せかけたリンク)を 利 用 した 自 画 面 遷 移 画 面 設 計 の 段 階 で どちらを 利 用 するのかを 考 慮! Step1 Step2 Step3 回 避 策 非 表 示 のボタンを 用 意 しておき JavaScriptを 利 用 して リンクが 押 下 された 際 にボタンが 押 下 されるようにする <a id= xxx href= #?id=1 onclick= navigate(this) > 14

HTMLモックアップ 作 成 のコツ モックタグの 活 用 モックだけで 表 示 させ 動 作 時 には 表 示 されないタグを 記 述 することが 可 能 <div id= mockxxx > ( idを mock から 始 める) こんなときに 便 利 HTML 自 体 に 仕 様 やメモを 書 いておく <div id= mockcomment > XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX </div> JavaScriptをモックのときだけ 動 作 させたい <script id="mockscript" type="text/javascript"> <! alert( Hello ); // --> </script> 15

スコープ 管 理 を 使 いこなす 16

HTTP Request HTTP Request/Sessionの 限 界 Request スコープ 管 理 を 使 いこなす Request/Sessionの の 限 界 ウィザードなどの 複 数 リクエストにまたがる 処 理 で 利 用 するには ライフサイク ルが 短 すぎる 帯 に 短 し 値 を 引 き 継 ぐために hiddenを 多 用 する 必 要 がある パラメータ 改 ざんの 危 険 性 も 出 てくる Session ウィザードなどの 複 数 リクエストにまたがる 処 理 で 利 用 するには ライフサイク ルが 長 すぎる タスキに 長 し Sessionへの 格 納 (setattribute) および Sessionからの 削 除 ( removeattribute)を 開 発 者 が 管 理 する 必 要 がある バグが 増 える マルチウィンドウ Request/Sessionだけでは 不 便! 17

スコープ 管 理 を 使 いこなす Teedaにおけるスコープ 管 理 (1/4( 1/4) Teedaに 画 面 遷 移 時 の 値 引 き 継 ぎ 原 則 ユーザ 名 登 録 鈴 木 貴 典 遷 移 ユーザ 名 実 行 鈴 木 貴 典 戻 る /view/employee/input.html /view/employee/confirm.html <input type= text id= username /> <span id= username /> /web/employee/inputpage.java public void InputPage { private String username; } /web/employee/confirmpage.java public void ConfirmPage { private String username; } 遷 移 の 前 後 で 同 じプロパティがあれば 次 の 画 面 で 値 がインジェクションされる ( 同 一 サブアプリケーション 内 でのボタンでの 遷 移 の 場 合 ) 18

Teeda 独 自 のスコープ スコープ 管 理 を 使 いこなす Teedaにおけるスコープ 管 理 (2/4( 2/4) スコープ 名 SubApplicationScope (デフォルト) RedirectScope PageScope ライフサイクル 同 一 のサブアプリケーション 内 ならば プロパティを 引 き 継 ぐ 異 なるサブアプリケーションに 遷 移 した 場 合 は プロパ ティ 値 は 削 除 される 次 の 画 面 にリダイレクト 後 プロパティ 値 は 削 除 される つまり 次 の 画 面 までしか 値 を 引 き 継 がない 次 の 画 面 に 値 を 引 き 継 がない public void EmployeePage { プロパティに アノテーションを 指 定 する } @PageScope private String username; 19

Teeda 独 自 のスコープ スコープ 管 理 を 使 いこなす Teedaにおけるスコープ 管 理 (3/4( 3/4) <subapp1> 一 覧 画 面 <subapp1> 入 力 画 面 <subapp1> 確 認 画 面 <subapp1> 完 了 画 面 PageScope RedirectScope SubApplicationScope <subapp2> 一 覧 画 面 サブアプリケーションが 異 なるので 値 は 引 き 継 が れない 20

Session/Requestも 使 えます Pageクラスにインジェクションする public void EmployeePage { private HtttpSession session; スコープ 管 理 を 使 いこなす Teedaにおけるスコープ 管 理 (4/4( 4/4) } public void setsession(httpsession session) { this.session = session; } Dtoのクラスなどに アノテーションを 指 定 する @Component(instance = InstanceType.SESSION) public class UserDto implements Serializable { } 21

スコープ 管 理 を 使 いこなす TakeOver TakeOverアノテーションを 利 用 して 引 き 継 ぐプロパテ ィを 個 別 に 指 定 することもできる タイプ 説 明 アノテーション NEVER 次 画 面 に 何 も 引 き 継 がない @TakeOver( type=takeovertype.never) INCLUDE EXCLUDE 次 画 面 に name value のみを 引 き 継 ぐ 次 画 面 に name value 以 外 のプ ロパティを 引 き 継 ぐ @TakeOver( type=takeovertype.include, properties= name, value") @TakeOver( type=takeovertype.exclude, properties= name, value") メソッドにアノテーションを 指 定 する @TakeOver(type = TakeOverType.NEVER) public String doexecute() { return } 22

かゆいところに 手 が 届 く 便 利 機 能 23

Teedaでは 以 下 の 機 能 が 便 利 拡 張 されたバリデータ ボタン 指 定 エラー 発 生 時 のスタイルシート 自 動 設 定 簡 単 なメッセージ 表 示 個 別 プロパティ/ 画 面 全 体 に 対 するメッセージ 表 示 Utilの 活 用 かゆいところに 手 が 届 く 便 利 機 能 こんな 機 能 があります ラベルの 引 き 継 ぎ プルダウンやラジオボタンで valueだけでなく labelの 引 き 継 ぎがで きる List<Map>の 利 用 繰 り 返 しや 一 覧 の 項 目 で わざわざDtoを 作 成 しなくても 済 む 24

JSFのバリデータを 超 えています かゆいところに 手 が 届 く 便 利 機 能 拡 張 されたバリデータ ボタン 指 定 1 画 面 内 に 複 数 のボタンがある 場 合 にバリデーションが 動 作 するボタ ンを 指 定 できる public void EmployeePage { @Required(target= doexecute ) private String empname; } エラー 発 生 時 のスタイルシート 自 動 設 定 onteedaerror というスタイルが 出 力 される target 属 性 に ボタンのidを 指 定 する 指 定 したボタンが 押 下 され たときだけ バリデーション が 実 行 される <input type="text id= empname" name= form:empname value= class= onteedaerror /> バリデーションエラーとなっ た 項 目 に 色 を 付 ける 等 分 かりやすい 表 示 が 可 能 になる 25

これさえ 知 っていれば 問 題 なし HTMLの 指 定 かゆいところに 手 が 届 く 便 利 機 能 簡 単 なメッセージ 表 示 id 説 明 HTMLでの 指 定 allmessages 全 てのメッセージ <span id= allmessages /> messages 項 目 にヒモ 付 かないメッセージ <span id= messages /> id+message 指 定 されたidにヒモ 付 くメッセージ <span id= empnamemessage /> レベルに 合 わせたスタイルの 切 り 替 え <span id="allmessages" te:fatalclass= fatalmessage te:errorclass="errormessage te:warnclass="warnmessage te:infoclass="infomessage" </span> サーバ 側 の 指 定 FacesMessageUtil.addErrorMessage(String messageid) FacesMessageUtil.addErrorMessage(String messageid, Object[] args) メッセージ 表 示 は これだけで 可 能 になる 26

N:1の 関 連 でよく 使 います かゆいところに 手 が 届 く 便 利 機 能 ラベルの 引 き 継 ぎ プルダウンやラジオボタンなどで 値 (value)だけでなく ラベ ル(label)を 引 き 継 ぐことができる このようなパターンの 画 面 で 効 いてくる 入 力 画 面 ではプルダウンで 選 択 確 認 画 面 では 選 択 されたlabelを 表 示 DBには valueで 登 録 <input type="hidden" id= fooitemssave" /> <select id= fooitems"> <option value= 0 >ラベル0</option> </select> xxxlabelというプロパティ があれば 自 動 的 にラベル 値 がインジェクションされる 注 意 ItemsSave/ ItemsSessionSaveを 利 用 する 必 要 がある public void SelectPage { private List fooitems; private Integer foo; private String foolabel; } 27

かゆいところに 手 が 届 く 便 利 機 能 List<Map>の の 利 用 実 装 量 が 減 らせます 繰 り 返 しや 一 覧 (Grid/ForEach/SelectOneRadioなど)の プロパティ(xxxItems)では Dtoのリスト/ 配 列 だけでなく Mapのリストも 利 用 できる 更 新 処 理 がなければ Mapのリストで 十 分 <select id= fooitems"> <option value= 0 > 選 択 </option> </select> public void SelectPage { private List<Map<String, String>> fooitems; } Dxoとの 連 携 で 簡 単 に 実 現 可 能 ConversionRuleで プロ パティの 関 連 付 けを 行 う @ConversionRule( value : id, label : empname") List<Map<String, String>> convert(entity[] entities); 28

Teedaにおけるテスト 実 践 29

Teedaでは テストのことも 考 えられています RequestDumpFilter HTTPリクエストの 情 報 をログに 出 力 するServletFilter TeedaTestCase JUnitの 拡 張 テストケース Teedaにおけるテスト 実 践 テストに 関 する 機 能 HttpServletResponseやFacesContextなどのモックが 標 準 で 用 意 されている TeedaWebTester TomcatなどのAPサーバを 起 動 した 状 態 でテストする 30

RequestDumpFilter Teedaにおけるテスト 実 践 RequestDumpFilter デバッグやテスト 実 施 時 のエビデンスとして 役 に 立 つ <filter> <filter-name>requestdumpfilter</filter-name> <filter-class>org.seasar.teeda.core.filter.requestdumpfilter</filter-class> <init-param> <param-name>beforerequestparameter</param-name> <param-value>true</param-value> </init-param> </filter> 入 力 値 や 押 下 したボタンの IDなどが 分 かる ** before *************: /view/add/add.html Request class=org.seasar.extension.httpsession. RequestedSessionId=c0a8811c1aaf64da9e22e349fb91 REQUEST_URI=/teeda-html-example/view/add/add.html, SERVLET_PATH=/view/add/add.html [param]_id24:addform/view/add/add.html=_id24:addform [param]_id24:addform:arg1=1 [param]_id24:addform:arg2=2 [param]_id24:addform:docalculate=calculate 31

TeedaTestCase Teedaにおけるテスト 実 践 TeedaTestCase HttpServletResponse/FacesContextなどのモックが 利 用 できるので ServletやJSFのAPIが 絡 むテストも 可 能 public class DownloadActionTest extends TeedaTestCase { public void testresponsecomplete() throws Exception { DownloadAction action = new DownloadAction(); action.setresponse(getresponse()); assertequals(false, getfacescontext().getresponsecomplete()); action.download(); } assertequals(true, getfacescontext().getresponsecomplete()); } 32

TeedaWebTester Teedaにおけるテスト 実 践 TeedaWebTester 画 面 からの 操 作 を 自 動 化 するイメージで 使 う 実 行 する 前 に 対 象 のアプリケーションを 起 動 しておく public class AddWebTest extends TestCase { public void testadd() throws Exception { final TeedaWebTester tester = new TeedaWebTester(); tester.beginat( http://localhost:8080/teeda-html-example, "view/add/add.html"); tester.settextbyid("arg1", 5"); tester.settextbyid("arg2", 27"); tester.submitbyid("docalculate"); } tester.asserttextequalsbyid( result, 32"); } 33

ふりかえり 1. Teedaの 特 徴 ページ 駆 動 開 発 2. アプリケーション アーキテクチャ を 決 める Goyaベースのアーキテク チャ Full Pattern Middle Pattern Lightweight Pattern 3. HTMLモックアップ 作 成 のコツ IDの 付 け 方 ボタンとリンクの 使 い 分 け モックタグの 活 用 4. スコープ 管 理 を 使 いこなす SubApplicationScope RedirectScope PageScope TakeOverアノテーション 5. かゆいところに 手 が 届 く 便 利 機 能 拡 張 されたバリデータ 簡 単 なメッセージ 表 示 ラベルの 引 き 継 ぎ List<Map>の 利 用 6. Teedaにおけるテスト 実 践 RequestDumpFilter TeedaTestCase TeedaWebTester 34

ご 静 聴 ありがとうございました 35