2006 Autumn Webテンプレートエンジン Mayaa 2006.11.12 The Seasar Project 株 式 会 社 グルージェント 須 賀 幸 次 1
はじめまして 名 前 : 須 賀 幸 次 (すが こうじ / suga) 所 属 : 株 式 会 社 グルージェント (http://www.gluegent.com) メールアドレス:ko.suga@gmail.com Seasarとのかかわり Mayaaプロジェクトリーダー(2 代 目 ) Seasar 入 門 はじめてのDI&AOP ( 共 著 ) 2
アジェンダ 1. Mayaaの 概 要 2. 導 入 事 例 の 紹 介 3. Mayaaの 使 い 方 4. Mayaaの 機 能 5. 利 用 時 の 考 え 方 6. まとめ 3
アジェンダ 1. Mayaaの 概 要 2. 導 入 事 例 の 紹 介 3. Mayaaの 使 い 方 4. Mayaaの 機 能 5. 利 用 時 の 考 え 方 6. まとめ 4
1.Mayaa Mayaaの の 概 要 MayaaはWebテンプレートエンジン デザインとロジックを 分 離 する JSPの 置 き 換 えとして 使 える http://mayaa.seasar.org/ IPA 未 踏 ソフトウェア 創 造 事 業 2005 年 度 上 期 採 択 ( 千 葉 滋 PM) 代 表 者 : 栗 原 傑 享 (くりはら まさたか) まやー 沖 縄 方 言 で 猫 のこと 5
Mayaaの の 特 徴 デザインとロジックの 分 離 JSPの 置 き 換 え 6
Mayaaの の 特 徴 (1) デザインとロジックの 分 離 HTMLと 対 になるバインディング 情 報 ファイル(XML) 拡 張 子.mayaa ( Mayaaファイル と 呼 ぶ) idでバインディング( 設 定 で 変 更 可 能 ) テンプレート 上 にロジックを 載 せる 記 述 も 可 能 HTML,XHTML( 一 応 XMLも 対 応 ) テンプレート (*.html) Mayaaファイル (*.mayaa) 7
Mayaaの の 特 徴 (2) JSPの 置 き 換 え MVCでいうところのView 層 のみ 変 更 の 即 時 反 映 JSPカスタムタグを 使 える JSPを 前 提 としたミドルウェアを 使 える JSP Velocity View Mayaa FreeMarker Tapestry Struts JSF Teeda (Extension) Controller WebWork2 8
JSPの の 問 題 を 解 決 JSPでは 凝 ったデザインのページを 作 りにくい JSPの 状 態 ではブラウザでプレビューできない HTMLタグの 中 にJSPカスタムタグやスクリプトレット デザイナーがJSPを 編 集 する 必 要 がある あるいはデザイン 変 更 のたびにプログラマ 作 業 Mayaaなら HTMLのタグにidを 付 けるだけ Mayaaファイルでカスタムタグを 割 り 当 てる デザインはHTMLに (View)ロジックはMayaaに 9
デザイン 例 (HTML) <h1> 掲 示 板 投 稿 </h1> <form action="bbs.html"> <table border="1"> <tr> <th>お 名 前 </th> <td><input type="text" name </tr> <tr> <th>メールアドレス</th> <td><input type="text" name </tr> Strutsと 連 携 する 形 にすると 10
デザイン 例 (Struts( Strutsカスタムタグ) <h1> 掲 示 板 投 稿 </h1> 入 力 欄 やボタンが 表 示 されない <html:form action="/bbs"> <table border="1"> <tr> <th>お 名 前 </th> <td><html:text name=" </tr> <tr> <th>メールアドレス</th> <td><html:text name=" </tr> 11
デザイン 例 (Mayaa( Mayaaテンプレート) <h1> 掲 示 板 投 稿 </h1> <form action="bbs.html" id=" <table border="1"> <tr> <th>お 名 前 </th> <td><input type="text" id=" </tr> <tr> <th>メールアドレス</th> <td><input type="text" id=" </tr> idを 付 けるだけ 12
記 述 はJSPは JSPと 似 ている JSP <%@ taglib prefix="html" uri="http://struts.apache.org/tags-html" %> <html> <body> <form> ( Strutsタグにするのは 省 略 ) <html:text property="name"/> </form> Mayaa <html> <body> <form> <input id="name" ( 略 )> </form> HTMLとMayaaファイルとが 一 対 <m:mayaa xmlns:m="http://mayaa.seasar.org" xmlns:html="http://struts.apache.( 略 )"> <html:text m:id="name" property="name" /> id 属 性 でバインディング 13
MayaaをJSP JSPの の 代 わりに 使 おう JSP デザインとロジックが 混 在 代 わりにMayaaを 使 おう 14
アジェンダ 1. Mayaaの 概 要 2. 導 入 事 例 の 紹 介 3. Mayaaの 使 い 方 4. Mayaaの 機 能 5. 利 用 時 の 考 え 方 6. まとめ 15
2. 導 入 事 例 の 紹 介 ひまわり 証 券 株 式 会 社 様 サイトリニューアル http://sec.himawari-group.co.jp/ (3サイト 構 成 ) 2006.08.19 リニューアルオープン 2006.10.17 日 経 IT Proに 事 例 記 事 HTMLファイル 数 約 1200 ほぼすべてのページに 動 的 な 部 分 あり 最 大 瞬 間 アクセス 数 1 分 間 に2500 超 採 用 理 由 デザイナーとプログラマーの 連 係 HTML 変 更 を 容 易 にしたい 16
導 入 事 例 の 紹 介 ソフトウェア 構 成 IIS,Tomcat,JRockit(JDK5.0),SQLServer2005 Mayaa,Struts,Seasar2,S2Dao Tomcatクラスタ(2 台 )+ハードウェア 多 重 化 ソースコード 規 模 70000 LOC( 空 行,コメント 抜 き) ミッション 高 負 荷 に 耐 える(2500pv/m, 3 秒 以 内 ) Mayaaチューニング 成 果 は 還 元 感 謝 17
Mayaa1.0 vs Mayaa1.1 20スレッドで 同 時 アクセス 1 秒 置 きにサンプリング 最 初 10 回 は 無 視 (ウォームアップ) 300 回 サンプリング 平 均 時 間 (リクエストー 切 断 ) パフォーマンス 向 上 Seasar.orgトップページ サーバ Windows XP SP2 Pentium4 2.40 GHz jdk 1.5.0_09 Tomcat 5.5.20 Xms=512m Xmx=512m ニュース プロダクト 静 的 140 2170 ニュース 動 的 210 2260 プロダクト 動 的 Mayaa 1.0 Mayaa 1.1 46.6KB 1873タグ 1970 0 500 1000 1500 2000 2500 3000 3500 4000 3620 (ms) 18
パフォーマンス 比 較 JSP vs Velocity vs Mayaa1.1 平 均 時 間 (リクエストー 切 断 ) 静 的 ニュース 動 的 80.7 81.7 140 124 98.8 210 プロダクト 動 的 JSP Velocity Mayaa 1.1 124 237 0 500 1000 1500 2000 2500 秒 間 トランザクション 数 1970 (ms) 静 的 137 230 227 ニュース 動 的 94 157 195 プロダクト 動 的 JSP Velocity Mayaa 1.1 10.1 82.4 0 50 100 150 200 250(TPS) 157 19
パフォーマンス 比 較 Mayaa1.1 同 時 アクセススレッド 数 比 較 5, 10, 20スレッドで 同 時 アクセス 1 秒 置 きにサンプリング 最 初 10 回 は 無 視 (ウォームアップ) 300 回 サンプリング 平 均 時 間 (リクエストー 切 断 ) ニュース 動 的 45.7 91.2 210 プロダクト 動 的 5スレッド 10スレッド 20スレッド 390 877 1970 0 500 1000 1500 2000 2500 (ms) 20
2. 導 入 事 例 の 紹 介 ひまわり 証 券 株 式 会 社 様 サイトリニューアル 静 的 コンテンツ 更 新 に 支 障 なし 一 部 デザイン 変 更 時 も 問 題 なし Mayaa1.0 1.1で 高 速 化 特 に 静 的 コンテンツ 部 分 (10 倍 以 上 ) 成 果 還 元 に 感 謝 21
アジェンダ 1. Mayaaの 概 要 2. 導 入 事 例 の 紹 介 3. Mayaaの 使 い 方 4. Mayaaの 機 能 5. 利 用 時 の 考 え 方 6. まとめ 22
3.Mayaa Mayaaを を 使 う 環 境 設 定 Webコンテナ JspServletの 代 わりにMayaaServlet MayaaServletにマッピング( 例 :*.html) テンプレート Mayaaファイルを 用 意 設 定 テンプレートを 置 く 場 所,バインディング 方 法 など Webサーバ Tomcatで*.doや*.htmlを 処 理 Webサーバで 画 像 やcssを 処 理 23
テンプレートとMayaa Mayaaファイルを 用 意 <html> <body> <h1> <span id="title">ダミー</span> </h1> <form id="form1" action="confirm.html"> <input id="name" type="text"/> </form> JavaScript (Rhino) <m:mayaa xmlns:m="http://mayaa.seasar.org" xmlns:html="http://struts.apache.( 略 )"> <m:write m:id="title" value="${title}"/> <html:form m:id="form1" action="/confirm" /> <html:text m:id="name" property="name" /> ダミー 24
実 行 Servletからforward あるいは 直 接 アクセス /foo /bar.html Servlet forward bar.html bar.mayaa 25
設 定 実 例 テンプレートを 置 く 場 所 を 変 更 warファイルに 含 めず Tomcatの 外 に 置 く HTMLファイルをwarとは 別 に 更 新 するため FTPでデザイナーがアップロード(ステージング/ 本 番 ) html tomcat webapps ROOT ROOT.war.html,.mayaa 26
内 部 処 理 初 回 アクセス 時 にビルド 処 理 を 実 行 JSPでいうところのコンパイル 描 画 のための 内 部 モデルを 作 成 HTMLをパースしてレンダリング 用 のツリーを 作 成 HTMLタグをカスタムタグで 置 き 換 えるイメージ ツリーを 使 って 描 画 する HTMLファイルひとつに 対 してツリーひとつ 描 画 前 処 理, 描 画 後 処 理 あり 描 画 前 処 理 でforwardやredirectも 可 能 27
使 い 方 使 い 方 MayaaServletを*.htmlにマッピング 適 宜 設 定 *.htmlに 直 接 アクセスまたはforward ファイルを 変 更 すると 次 のアクセスから 反 映 JSPとほぼ 同 じ 共 存 も 可 能 28
アジェンダ 1. Mayaaの 概 要 2. 導 入 事 例 の 紹 介 3. Mayaaの 使 い 方 4. Mayaaの 機 能 5. 利 用 時 の 考 え 方 6. まとめ 29
4.Mayaa Mayaaの の 機 能 描 画 前 処 理 描 画 後 処 理 コンポーネント 機 能 テンプレート 切 り 替 え 機 能 レイアウト 共 有 機 能 30
4.Mayaa Mayaaの の 機 能 描 画 前 処 理 描 画 後 処 理 コンポーネント 機 能 テンプレート 切 り 替 え 機 能 レイアウト 共 有 機 能 31
描 画 前 処 理 描 画 後 処 理 例 ) 描 画 前 処 理 member.htmlへ アクセス/forward 未 ログインなら 警 告 ページへ redirect 描 画 処 理 member.html member.mayaa caution.html 32
描 画 前 処 理 のソースコード テンプレート <html> <head> <title> 会 員 専 用 ニュース</title> </head> <body> <h1> 会 員 専 用 ページ</h1> <ul> <li id="news"> <a id="link" href="news1.html </li> Mayaaファイル <m:mayaa xmlns:m="http://mayaa.seasar.org"> <m:beforerender><![cdata[ if (session.user == null) { redirect('/caution.html'); } var newslist = request.result.newslist; ]]></m:beforerender> <m:foreach m:id="news" value="${ newslist }" /> 33
4.Mayaa Mayaaの の 機 能 描 画 前 処 理 描 画 後 処 理 コンポーネント 機 能 テンプレート 切 り 替 え 機 能 レイアウト 共 有 機 能 34
コンポーネント 機 能 とは HTMLの 一 部 を 部 品 として 切 り 出 す 部 品 を 貼 り 付 ける 同 様 な 機 能 を 使 い 回 せる(ロジックの 記 述 は 一 カ 所 ) ページ 切 り 替 えの 現 在 位 置 表 示 部 品 引 数 でページ 数 などを 渡 す 35
コンポーネント 機 能 のソースコード news.html news.mayaa <m:mayaa xmlns:m="http://mayaa.seasar.org"> ダミー <m:insert m:id="pager" name="pagercomponent" path="/component/pager.html"/> pager.html pager.mayaa <m:dorender m:id="pagercomponent" name="pagercomponent"/> <m:echo m:id="link"> 36
4.Mayaa Mayaaの の 機 能 描 画 前 処 理 描 画 後 処 理 コンポーネント 機 能 テンプレート 切 り 替 え 機 能 レイアウト 共 有 機 能 37
テンプレート 切 替 機 能 とは 同 じURLに 複 数 のテンプレート (sample$ja.html, sample$en.html) 必 要 に 応 じてテンプレート 自 体 を 動 的 に 切 り 替 える たとえば 日 本 語 / 英 語 たとえばログイン 中 /ゲスト sample.html 38
テンプレートの 切 り 替 え 方 1. ファイル 名 に "$"+ 種 類 名 を 付 ける 2. 有 効 な 種 類 名 を 決 める 3. たとえばセッションに 格 納 4. mayaaファイルで 種 類 名 を 読 む session.setattribute("locale", "ja");...forward("sample.html"); <m:mayaa ( 略 ) m:templatesuffix="${ session.locale }"> sample.mayaa sample$ja.html sample$en.html 39
コンポーネントとテンプレート 切 り 替 え 実 例 コンポーネントにテンプレートを 複 数 用 意 ログイン 状 態 とゲスト 状 態 を 切 り 替 える ログイン 表 示 コンポーネント テンプレートが2 種 類 ゲスト 状 態 ($guest) ログイン 状 態 ($ 無 し) 40
コンポーネントとテンプレート 切 り 替 え 実 例 コンポーネントにテンプレートを 複 数 用 意 ログイン 状 態 とゲスト 状 態 を 切 り 替 える ログイン 状 態 $guest.html ログイン 状 態 コンポーネント ログイン 状 態.mayaa ログイン 状 態.html 41
4.Mayaa Mayaaの の 機 能 描 画 前 処 理 描 画 後 処 理 コンポーネント 機 能 テンプレート 切 り 替 え 機 能 レイアウト 共 有 機 能 42
レイアウト 共 有 機 能 とは 複 数 ページの 共 通 部 分 を 定 義 他 は 個 別 の 部 分 のみ 作 れば 良 い 動 的 に 組 み 合 わせる 共 通 部 分 個 別 部 分 この 案 件 では 使 わなかった 43
レイアウト 共 有 機 能 のソースコード layout.html index.html ダミー ダミー layout.mayaa <m:mayaa xmlns:m="http://mayaa.seasar.org"> <m:insert m:id="maincontent" name="content"/> index.mayaa <m:mayaa xmlns:m="http://mayaa.seasar.org" m:extends="layout.html"> <m:dorender m:id="mycontent" name="content"/> 44
アジェンダ 1. Mayaaの 概 要 2. 導 入 事 例 の 紹 介 3. Mayaaの 使 い 方 4. Mayaaの 機 能 5. 利 用 時 の 考 え 方 6. まとめ 45
5. 利 用 時 の 考 え 方 ピュアなHTMLの 追 求 (テンプレート) バインディング 方 法 設 計 時 に 決 めておくこと 46
利 用 時 の 考 え 方 (1) ピュアなHTMLの 追 求 (テンプレート) トレードオフ ツールでのバリデーションエラーを 少 なくする バリデーションエラーの 自 動 修 正 には 注 意 Mayaaファイルを 極 力 シンプルに 保 つ バリデーションエラーになりやすい 例 tableをspanで 囲 む, 空 span(<span id="foo"></span>) 47
利 用 時 の 考 え 方 (2) バインディング 方 法 前 提 :HTMLの 更 新 頻 度 が 高 い 場 合 あるいはデザイナーと 協 同 作 業 する 場 合 HTML 名 前 空 間 のidを 使 う 考 え 方 は 古 い? idはデザイン JavaScriptの 都 合 で 使 用 する デザインはclass JavaScriptはプログラマ もあり Mayaa 名 前 空 間 のid(m:id)を 使 う バインディングのみの 都 合 で 使 える htmlタグなどで 名 前 空 間 宣 言 が 必 要 DreamWeaverなどでは 無 視 設 定 をしないとエラーになる 48
利 用 時 の 考 え 方 (3) 設 計 時 に 決 めておくこと 表 示 する 内 容 をすべてテンプレート 上 に 乗 せる <span m:id="name">ダミー 名 前 </span> エラーメッセージや 未 ログイン 時 メッセージ 非 表 示 状 態 の 確 認 はMayaaかCSSで 大 幅 に 表 示 を 切 り 替 えるならテンプレート 切 り 替 え 例 )ログイン 状 態 / 未 ログイン 状 態 ファイルを 置 く 場 所 更 新 作 業 者 更 新 頻 度 によって 分 ける 49
アジェンダ 1. Mayaaの 概 要 2. 導 入 事 例 の 紹 介 3. Mayaaの 使 い 方 4. Mayaaの 機 能 5. 利 用 時 の 考 え 方 6. まとめ 50
6.まとめ Mayaaの 利 点 ロジックとデザインの 分 離 JSPの 代 わりに 使 える JSPカスタムタグを 使 える StrutsなどJSPを 前 提 とするミドルウェアを 使 える JSPと 共 存 可 能 で 部 分 的 置 き 換 えも 可 能 1.0 1.1でパフォーマンス 大 幅 向 上 フィードバックを 快 く 許 諾 いただいた ひまわり 証 券 株 式 会 社 様 に 感 謝 51
Appendix.プラクティス 一 例 default.mayaa <m:null m:id="dummy"/> load("common_functions.js"); load("check_login.js"); //エラー 時 にredirect component /component/~にファイルを 置 く Apache, IISなどでアクセス 制 限 をかける 52
ご 静 聴 ありがとうございました ご 質 問 ラウンジのスピーカーブースでお 待 ちしております メーリングリスト Mayaaユーザメーリングリストのご 案 内 http://mayaa.seasar.org/support/index.html 53