Teedaで で 始 めるPage 駆 動 開 発 Teedaプロジェクト/リーダー 電 通 国 際 情 報 サービス/Seasar2 技 術 推 進 G 大 谷 晋 平 1
アジェンダ Teedaとは Page 駆 動 開 発 とは 何 か Teedaの 特 徴 Demo Teedaを 支 えるEcilpseプラグイン Dolteng TeedaのRoadmap まとめ 2
自 己 紹 介 名 前 : 大 谷 晋 平 (おおたに しんぺい) Blog : http://d.hatena.ne.jp/shot6/ 所 属 : 株 式 会 社 電 通 国 際 情 報 サービス(http://www.isid.co.jp) コミッタ : Teeda S2JSF S2Struts Seasar2 プレゼンテーション 層 で 主 に 開 発 しています メール : shinpei.ohtani@gmail.com 特 徴 : めがね 3
Teedaとは Teedaとは プレゼンテーション 層 の 開 発 をよりシンプルに Webアプリケーションフレームワーク JavaでPage 駆 動 開 発 を 実 現 Teedaとは 沖 縄 の 言 葉 で 太 陽 http://teeda.seasar.org/ja/ Teeda 1.0 リリース (^ ^)/ 11 月 11 日 11 時 11 分 無 事 リリース 4
Page 駆 動 開 発 とは 何 か Page 駆 動 開 発 とは HTMLをベースとした 開 発 スタイル HTMLにJavaクラスをマッピングする 対 応 関 係 が 明 確 なのでムリが 少 ない 1Page = 1HTML + 1POJO( 単 なるJavaクラス) TeedaではPOJOのことをPageクラスと 呼 びます マッピングの 設 定 が 必 要 なの? Teedaでは 規 約 に 従 い シンプルに 名 前 をあわせるだけ» add.html AddPage.java»HTML 名 の 頭 を 大 文 字 +Page 5
Teedaの の 位 置 づけ Teeda Uuji Mayaa Struts KuinaDao JSP JSF S2Dao Velocity View 層 View 制 御 層 プレゼンテーション 層 パーシステンス 層 (それ 以 外 の 層 ) 6
Teedaの の 特 徴 Webアプリケーションフレームワーク さくさくWeb 開 発 できる Super AgileとEasy Enterpriseの 両 面 サポート Super Agile = 独 自 仕 様 で 開 発 生 産 性 を 重 視 Easy Enterprise = 標 準 仕 様 に 基 づき 機 能 拡 張 設 定 ファイルをほぼ 書 かない PRGパターンの 実 装 Stateless 7
Webアプリケーション アプリケーションFW Teeda(1) Seasar2.4の 機 能 を100% 発 揮 できる さくさく 感 のあるリズムのよい 開 発 が 可 能 に 最 大 のウリはHotDeployによる 段 階 的 な 開 発 規 約 によって 開 発 を 効 率 化 フルスタック(WebからDB)で まとめて 一 つのフ レームワークとして 提 供 される 本 来 必 要 の 無 い 設 定 を 色 々なところでやる 必 要 もない 一 環 したポリシーに 基 づいていて 違 和 感 が 少 ない FWのポリシーの 差 を 使 う 人 が 吸 収 するのは 時 代 遅 れ 8
Webアプリケーション アプリケーションFW Teeda(2) Super AgileとEasy Enterpriseの 両 面 を 支 える きちんと 定 義 されたライフサイクルを 持 つ プレゼンテーションの 開 発 に 必 要 な 機 能 を 持 つ Validation Converterなど 拡 張 性 Teedaは 以 下 の 要 素 から 成 り 立 つ CoreはJSF 仕 様 の 実 装 部 分 Extensionは 拡 張 機 能 部 分 ( 今 回 はここ) Ajaxな 機 能 を 実 現 する 部 分 9
設 定 ファイルを 書 かない(1) 設 定 ファイルをほぼ 書 かない XML 地 獄 からの 脱 却 規 約 に 基 づき 必 要 なリソースに 記 述 開 発 のリズムを 崩 さないためにも 重 要 画 面 遷 移 の 設 定 HTMLに 簡 単 な 規 約 に 基 づいて 書 くだけで 遷 移 Pageクラス(Model)の 登 録 Seasar2.4のSmartDeploy 機 能 でほぼ 必 要 なし 始 めの 一 回 で 基 点 となるパッケージを 指 定 するのみ 10
設 定 ファイルを 書 かない(2) 画 面 遷 移 は HTMLに 書 くだけ 非 常 に 直 感 的 開 発 に 必 要 なリソース 以 外 は 修 正 しない addresult.htmlに 遷 移 する <input type="button" value="calculate" id= goaddresult"/> docalculate()を 呼 んで その 結 果 で 遷 移 する <input type="button" value="calculate" id="docalculate"/> 11
設 定 ファイルを 書 かない(3) Modelの 登 録 Rootパッケージ 名 を 入 力 するだけ <?xml version="1.0" encoding="utf-8"?> <!DOCTYPE components PUBLIC "-//SEASAR//DTD S2Container 2.4//EN" "http://www.seasar.org/dtd/components24.dtd"> <components> <component class="org.seasar.framework.convention.impl.namingconventionimpl"> <initmethod name="addrootpackagename"> <arg>ここにrootパッケージ 名 を 入 力 </arg> </initmethod> </component> </components> 12
PRGパターンの 実 装 (1) PRGパターンとは 何 か? POST-REDIRECT-GETの 組 み 合 わせで 画 面 遷 移 開 発 者 を 悩 ませる4つの 問 題 ブラウザのRELOAD 問 題 ブラウザの 戻 るボタン 問 題 URLがずれる この 画 面 消 せないんですか?というお 客 様 の 要 望 w この 問 題 への 解 決 方 法 それがPRGパターン 13
PRGパターンの 実 装 (2) 何 が 問 題 か Forwardでの 問 題 はPOSTしたresponseをそのまま 使 うため reloadしたときも 再 度 POSTされる REDIRECTを 挟 み GETを 使 えば 対 処 できる GETであれば RELOADされてもModelが 意 図 しない 状 態 で 更 新 されない URLもずれない PRGパターンは 責 務 の 分 離 Modelの 状 態 変 更 と 画 面 の 描 画 の 分 離 14
PRGパターンの 実 装 (3) Teedaでの 実 装 は Viewをハンドリングする 部 分 (ViewHandler)で 実 装 REDIRECTする 直 前 にPageのプロパティをsave RESTOREされたときに 同 一 のプロパティ 名 があれば restoreする TAKE_OVERアノテーションで 引 き 継 ぐ 引 き 継 がないを 細 かく 制 御 可 能 @TakeOver(type = TakeOverType.NEVER) public String dofinish() { 15
PRGパターンイメージ 図 View(Client) addinput.html POST REDIRECT Teeda(Server) AddInputPage GET 状 態 を restore 状 態 をsave AddResultPage addresult.html 16
Stateless TeedaはStateless Teedaでは 極 力 状 態 を 保 持 しない Teedaでは 明 確 な 方 針 を 出 してます 状 態 はHTML 側 に 埋 め 込 むか DBに 格 納 する Teeda 内 部 ではSessionを 原 則 使 わない 限 定 して 利 用 PRGのPage 間 の 遷 移 時 に ダブルサブミット 対 策 に Sessionに 状 態 を 中 途 半 端 に 保 持 しない 通 常 のJSFでは 状 態 をひたすら 保 持 17
Viewテクノロジの 特 徴 ピュアなHTMLでViewを 記 述 可 能 HTMLテンプレートと 呼 びます 設 計 の 時 に 使 ったHTMLのMockをそのまま 実 行 環 境 に 持 っていける Teedaではidを 振 るのみ これだけでコンポーネントとマッピングされる <input type="text" id="arg1"/> マッピングの 詳 細 規 約 などは 最 後 に 18
HTMLテンプレートの 分 類 HTMLテンプレートの 分 類 ポイントはコンポーネントの 定 義 をどこに 記 述 するか どこにも 書 かない Teeda(idベースの 規 約 によって 自 動 設 定 する) View(HTMLなど)に 直 接 記 述 する S2JSF Viewとは 別 のファイルに 記 述 する( 直 接 も 書 ける) Mayaa Tapestry4 Javaで 記 述 する Wicket Clickなど 19
足 し 算 によるDemo 足 し 算 のサンプル 足 し 算 をして 結 果 を 次 画 面 に 表 示 入 力 なし または3 桁 未 満 ならValidationエラー 足 し 算 実 行 addinput.html addresult.html 再 度 足 し 算 or 次 の 足 し 算 まずはHTMLだけで 動 かしてみましょう 20
足 し 算 によるDemo Demo( ( 続 き1) HTML(addInput.html) <html> ( 途 中 省 略 ) <form id="addform"> <tr> <td></td><td><input type="text" id="arg1"/></td><td><span id="arg1message"></span></td> </tr> <tr><td> + </td> <td><input type="text" id="arg2"/></td><td><span id="arg2message"></span></td> </tr> </table> <input type="button" value="calculate" id="docalculate onclick="location.href='./addresult.html'"/> </form> </body> </html> idによって Pageクラスと マッピングする 21
足 し 算 によるDemo Demo( ( 続 き2) き Pageクラス(addInputPage.java) public class AddInputPage { } // 各 種 使 用 するValidatorの 設 定 ( 省 略 ) private Integer arg1; private Integer arg2; private Integer result; public String docalculate() { } result = new Integer(arg1.intValue() + arg2.intvalue()); return addresult ;// 次 の 画 面 遷 移 はaddResult.html // 各 種 getter/setter 省 略 idによって Pageクラスと マッピングする ボタンが 押 されたら 呼 ばれるメソッド 22
足 し 算 によるDemo Demo( ( 続 き3) き では 実 際 に 動 かしてみましょう このDemoでは 次 のことがわかります HotDeployによるサーバNonStopさくさく 開 発 Htmlテンプレートが 実 際 に 動 く Validation 23
Ecilpseプラグイン プラグイン Dolteng Dolteng Teedaでの 開 発 効 率 を 促 進 より さくさく 感 のある 開 発 へ HTMLとPageクラスのマッピング 機 能 QuickJUnitのように Ctrl+5でHTML Page 間 を 遷 移 正 しくマッピングされている 場 合 はマーカーを 表 示 ではDemoをご 覧 ください 24
Teedaのロードマップ Roadmap レイアウト 機 能 (TilesやS2JSFのと 同 等 ) ClientSideのValidation 機 能 サーバサイドでValidatorを 設 定 すると 自 動 で 出 力 Ajaxな 機 能 の 強 化 2007 年 初 頭 ( 次 のSeasarCon?) Flexとの 連 携 ( 妄 想 ^^;?) HTMLの 限 界 を 超 える 部 分 をFlexに 委 譲 25
まとめ Teeda プレゼンテーション 層 の 開 発 をシンプルにする Page 駆 動 なWebアプリケーションフレームワーク PRGパターンの 実 装 設 定 いらず 設 定 ファイルを 書 く 必 要 は 無 い 書 く 必 要 があるHTMLとPOJOを 規 約 に 沿 って 書 く HTMLテンプレート 基 本 はidを 書 いて Pageとマッピングするだけ 26
告 知 &リソース 一 覧 Super Agile Web Development with Seasar2 のセッションでもっと 凄 いDemoをやります リソース Teedaを 始 めるには http://www.seasar.org/wiki/index.php?teeda%2fgettingstarted Teedaで 問 題 があったら Seasar-userまでメールくださいm( )m または http://d.hatena.ne.jp/shot6/ にコメントください 27
感 謝 感 謝 会 場 に 来 てくださった 皆 さんm( )m Teedaを 使 ってくださっているUserの 人 達 一 緒 に 議 論 し 創 っているTeedaチームの 皆 さん S2 S2JSFというカッコイープロダクトを 作 った ひがさん Seasarプロジェクトを 支 えている 人 達 各 種 オープンソースに 関 わっている 人 達 特 にきっかけを 作 ってくれたMyFacesに 感 謝 28
Thanks for ALL!!! ご 清 聴 ありがとうございました 29