2007 Autumn Mayaa 実 践 TIPS 2007.11.11 The Seasar Project 株 式 会 社 グルージェント 須 賀 幸 次 1
はじめまして 名 前 : 須 賀 幸 次 (すが こうじ / suga) 所 属 : 株 式 会 社 グルージェント (http://www.gluegent.com) メールアドレス:ko.suga@gmail.com Seasarとのかかわり Mayaaプロジェクトリーダー(2 代 目 ) Seasar 入 門 はじめてのDI&AOP ( 共 著 ) 2
アジェンダ 1. Mayaaの 概 要 2. 画 面 設 計 寄 りなTIPS 3. 実 装 寄 りなTIPS 4. 運 用 や 保 守 を 考 慮 するTIPS 5. その 他 TIPS 6. まとめ 3
1. Mayaaの の 概 要 MayaaはWebテンプレートエンジン デザインとロジックを 分 離 する JSPの 置 き 換 えとして 使 える http://mayaa.seasar.org/ IPA 未 踏 ソフトウェア 創 造 事 業 2005 年 度 上 期 採 択 ( 千 葉 滋 PM) 代 表 者 : 栗 原 傑 享 (くりはら まさたか) まやー 沖 縄 方 言 で 猫 のこと 4
Mayaa 採 用 の 動 機 解 決 したい 課 題 デザイナーとの 協 業 デザインとロジックの 分 離 <input id="name" " ( 略 )> <html:text m:id="name" " property= ( 略 )>.html 楽 にできるようになること id 属 性 でバインディング 部 品 化 レイアウト 共 有 テンプレート 切 替.mayaa 5
参 考 : 内 部 動 作.mayaaファイルと 実 行 時 のイメージ 利 用 宣 言 p.html クラス 定 義 <input id="name" ( 略 )> <html:text m:id="name" property= p ( 略 )>.mayaa ビルド インスタンス 化 <html:text m:id="name" property= ( 略 )> 実 行 時 利 用 宣 言 は 複 数 可 能 default.mayaaは aaは 通 常 複 数 で 利 用 される 6
TIPSに に 入 る 前 に(1) 想 定 する 開 発 の 流 れ 大 雑 把 には 下 記 の 形 ( 簡 単 のため 一 方 通 行 ) 画 面 仕 様 作 成 画 面 設 計 協 同 開 発 を 考 慮 画 面 設 計 を 元 に 実 装 準 備 的 なこと 仕 様 を 満 たすための 実 装 的 なこと 運 用 保 守 継 続 的 な 更 新 など 7
TIPSに に 入 る 前 に(2) ココロガマエ 視 点 具 体 策 何 のためのTIPSか 一 例 としての 具 体 的 TIPS 例 えば 考 えることや 状 況 は Dreamweaverを 使 うデザイナとの 連 係 離 れた 場 所 のデザイナとの 連 係 画 面 設 計 の 細 部 はコロコロ 変 わる デザイナはMayaaなんて 知 らない プログラマはDreamweaverなんて 知 らない 8
2. 画 面 設 計 寄 りなTIPS 共 通 的 な 部 分 の 作 り 方 m:idを 使 う エラーメッセージの 表 示 位 置 を 決 める 9
2. 画 面 設 計 寄 りなTIPS 共 通 的 な 部 分 の 作 り 方 m:idを 使 う エラーメッセージの 表 示 位 置 を 決 める 10
共 通 な 部 分 の 作 り 方 (1) レイアウト 共 有 部 品 化 を 使 うか 実 装 の 手 間 に 影 響 があるので 早 めに 決 める 構 成 が 全 ページ 共 通 いくつかの ページで 共 通 何 らかの 条 件 で 入 れ 替 わる 11
共 通 な 部 分 の 作 り 方 (2) レイアウト 共 有 部 品 化 の 目 的 基 本 的 には 省 力 化 同 じ 処 理 をあちこちに 書 かないため 手 段 は 大 きく 分 けて 二 種 類 動 的 と 静 的 それぞれに 利 点 と 欠 点 プロジェクトに 合 わせて 選 択 選 択 肢 を 知 っている? 知 らない? 12
共 通 な 部 分 の 作 り 方 (3) レイアウト 共 有 部 品 化 の 選 択 肢 1. Mayaaのレイアウト 共 有 コンポーネント 機 能 動 的 な 解 決 手 段 (プログラマ 寄 り) 静 的 状 態 のデザイン 確 認 とずれる 場 合 がある 2. Dreamweaverのテンプレート ライブラリ 機 能 静 的 な 解 決 手 段 (デザイナ 寄 り) 少 しだけ 例 外 的 なページ を 扱 いづらい 3. 併 用 する m:insertのm:idをdreamweaverの 機 能 で 適 用 する 動 的 ダミーの2テンプレートを 変 更 する 必 要 あり 13
共 通 な 部 分 の 作 り 方 (4) レイアウト 共 有 部 品 化 Mayaaの 機 能 を 使 うと 判 断 する Dreamweaverの 機 能 を 使 う 条 件 に 当 てはまらない Dreamweaverの 機 能 を 使 うと 判 断 する 静 的 ファイル 状 態 でレイアウトも 含 めた 確 認 が 必 要 デザイナだけでのページ 更 新 が 頻 繁 にある 動 的 要 素 が 無 い または 全 体 共 通 かつ 少 ない 併 用 すると 判 断 する 静 的 ファイル 状 態 でレイアウトも 含 めた 確 認 が 必 要 レイアウト 部 分 に 動 的 要 素 が 多 く 更 新 が 頻 繁 ではない 14
共 通 な 部 分 の 作 り 方 (5) 共 通 な 処 理 の 場 合 の 選 択 肢 コンポーネント 機 能 テンプレート 切 替 機 能 と 組 み 合 わせると 効 果 的 テンプレート 切 換 機 能 動 的 部 分 のみ 共 通 など suffixは 設 計 時 に 決 める (index$guest.html) default.mayaa (+ DWのLibraries) すべてのMayaaファイルに 書 くのと 同 じこと 例 )システム 日 付 を 表 示 m:formatdate m:id="system-date" date 15
2. 画 面 設 計 寄 りなTIPS 共 通 的 な 部 分 の 作 り 方 m:idを 使 う エラーメッセージの 表 示 位 置 を 決 める 16
m:idを を 使 う(1) バインディングにHTMLのidではなくm:idを 使 う HTML, XHTMLの 名 前 空 間 のidを 使 わない Mayaaの 名 前 空 間 のidを 使 う <html xmlns:m="http://mayaa.seasar.org" > : <div m:id="message" >dummy</div> <div id="message">original</div> そのまま 17
m:idを を 使 う(2) なぜ? HTMLのidをデザインとJavaScriptで 使 うため 手 間 の 少 ない 使 い 分 け m:id HTML/XHTMLのidをMayaaで 使 わないよう 設 定 動 的 な 部 分 を 明 示 するため テンプレートだけでどこにロジックがあるか 分 かる この 意 味 ではxpathはオススメできない Dreamweaverのバリデーション 設 定 google: dreamweaver mayaa 18
m:idを を 使 う(3) ある 程 度 m:idの 名 前 に 動 作 の 意 味 を 持 たせる なぜ? どういう 種 類 の 動 作 か 分 かるようにするため デザイナのため 運 用 保 守 のため 一 例 m:id="if-logged-in" m:id="dummy" m:id="pager-component" m:id="ランダムでバナーが ラ 入 れ 替 わる" やりすぎ 19
2. 画 面 設 計 寄 りなTIPS 共 通 的 な 部 分 の 作 り 方 m:idを 使 う エラーメッセージの 表 示 位 置 を 決 める 20
エラーメッセージの 表 示 位 置 を 決 める なぜ? UIデザインの 一 部 だけど 忘 れがち 特 に 複 数 項 目 にまたがるバリデーションエラー 補 助 TIPS 静 的 ファイルでのデザイン 確 認 CSSで 表 示 / 非 表 示 を 切 り 替 える(ローテク) class="error" テンプレートのダミーが 表 示 されないようにする <m:with m:id="error"><html:error /></m:with> 21
3. 実 装 寄 りなTIPS 準 備 環 境 的 なもの デバッグ 用 関 数 を 用 意 する レイアウトやコンポーネントのパス 調 整 設 定 をする レイアウトページのヘッダを 一 部 差 し 替 える 実 装 時 m:echoと と 制 御 を 組 み 合 わせる Mayaaで 使 うJS 関 数 を 外 部 ファイルに 切 り 出 す 22
3. 実 装 寄 りなTIPS 準 備 環 境 的 なもの デバッグ 用 関 数 を 用 意 する レイアウトやコンポーネントのパス 調 整 設 定 をする レイアウトページのヘッダを 一 部 差 し 替 える 実 装 時 m:echoと と 制 御 を 組 み 合 わせる Mayaaで 使 うJS 関 数 を 外 部 ファイルに 切 り 出 す 23
デバッグ 用 関 数 を 用 意 する(1) Mayaaファイルで 利 用 するJavaScript 関 数 基 本 的 にはm:beforeRenderで 定 義 する 例 : <m:beforerender><![cdata[ function p(obj) { java.lang.system.out.println("" t tl + obj); } ]]></m:beforerender> 24
デバッグ 用 関 数 を 用 意 する(2) なぜ? Mayaaファイルはブレークポイントで 止 められない 基 本 的 にprintデバッグする 形 になる java.lang.system.out.println と 打 つのは 長 い default.mayaaで で 定 義 すれば 全 ページで 利 用 可 能 <m:write m:id=".." value="${ p(foo); foo.bar }" /> その 他 の 関 数 定 義 の 例 function dumprequest() { リクエストのparameter, attributeを 書 き 出 す } loggerを 利 用 して 書 き 出 す 25
3. 実 装 寄 りなTIPS 準 備 環 境 的 なもの デバッグ 用 関 数 を 用 意 する レイアウトやコンポーネントのパス 調 整 設 定 をする レイアウトページのヘッダを 一 部 差 し 替 える 実 装 時 m:echoと と 制 御 を 組 み 合 わせる Mayaaで 使 うJS 関 数 を 外 部 ファイルに 切 り 出 す 26
パス 調 整 設 定 をする(1) レイアウト 機 能 やコンポーネント 機 能 同 じテンプレートが 複 数 のパスで 利 用 される /foo/barcomponent.html の <img src="../img/a.gif" /> /baz.html でこれを 利 用 すると "./"で 始 まるパスは 自 動 的 に 変 換 する Mayaaの 標 準 機 能 (タグと 属 性 は 限 定 ) <img src="/app/img/a.gif" /> のように 変 換 27
パス 調 整 設 定 をする(2) なぜ? Dreamweaverは"./~"を"~"に 自 動 で 書 き 換 える 標 準 機 能 が 利 用 されない コンポーネントなどから 相 対 パスを 使 いづらい すべてのパスを 変 換 するよう 設 定 "./"で で 始 まるパスでなくとも 自 動 調 整 する PathAdjusterの 設 定 でforce="true"に 設 定 ただし 描 画 結 果 はすべて"/"で / 始 まるパスになる 無 効 にすることも 可 能 28
3. 実 装 寄 りなTIPS 準 備 環 境 的 なもの デバッグ 用 関 数 を 用 意 する レイアウトやコンポーネントのパス 調 整 設 定 をする レイアウトページのヘッダを 一 部 差 し 替 える 実 装 時 m:echoと と 制 御 を 組 み 合 わせる Mayaaで 使 うJS 関 数 を 外 部 ファイルに 切 り 出 す 29
レイアウトのヘッダを 差 し 替 える(1) なぜ? レイアウト 共 有 機 能 を 使 ったときのタイトル そのままだとレイアウトページの<title>タグ コンテンツページの<title>タグを 使 いたい 同 様 にCSSやJavaScript コンテンツページ 固 有 のものを 指 定 したい なんとかすればなんとかなる でも 先 にやり 方 を 決 めていた 方 がやりやすい 30
レイアウトのヘッダを 差 し 替 える(2) 具 体 例 titleを 個 別 ページのものにする xpathを 使 う m:tagを 使 う (extensionプロジェクト) CSS, JavaScriptを 差 し 込 む 場 所 を 用 意 する default.mayaaでデフォルトの デ 空 定 義 をする 31
3. 実 装 寄 りなTIPS 準 備 環 境 的 なもの デバッグ 用 関 数 を 用 意 する レイアウトやコンポーネントのパス 調 整 設 定 をする レイアウトページのヘッダを 一 部 差 し 替 える 実 装 時 m:echoと と 制 御 を 組 み 合 わせる Mayaaで 使 うJS 関 数 を 外 部 ファイルに 切 り 出 す 32
m:echoと と 制 御 を 組 み 合 わせる(1) なぜ? 制 御 用 タグを 減 らして 見 通 しを 良 くするため <div m:id="for"><input m:id="radio" type="radio".. /> <input m:id="radio-loop" type="radio".. /> HTMLとして 形 式 的 に 正 しいテンプレートのため 静 的 状 態 でのHTMLバリデーション 対 策 <ul><div m:id="for"><li class="..">.</li></div></ul> <ul><li m:id="echo-loop" class="..">.</li></ul> 33
m:echoと と 制 御 を 組 み 合 わせる(2) 具 体 例 m:for(each)と 組 み 合 わせて<li>の 繰 り 返 し <ul><li m:id="echo-loop" class="..">.</li></ul> "> l> その 他 <m:for m:id="echo-loop">. <m:echo> <m:dobody /><m:write value=".." /> </m:echo> </m:for> m:ifと 組 み 合 わせて 非 表 示 または 動 的 表 示 m:for(each)と 組 み 合 わせて<td>の 繰 り 返 し 34
3. 実 装 寄 りなTIPS 準 備 環 境 的 なもの デバッグ 用 関 数 を 用 意 する レイアウトやコンポーネントのパス 調 整 設 定 をする レイアウトページのヘッダを 一 部 差 し 替 える 実 装 時 m:echoと と 制 御 を 組 み 合 わせる Mayaaで 使 うJS 関 数 を 外 部 ファイルに 切 り 出 す 35
関 数 を 外 部 ファイルに 切 り 出 す(1) なぜ? 複 数 ページに 同 じスクリプトがある 場 合 の 共 有 Mayaaファイルの 見 通 しを 良 くする( 適 度 に) beforerenderでのfunction 宣 言 beforerenderでのオブジェクト 準 備 36
関 数 を 外 部 ファイルに 切 り 出 す(2) 外 部 ファイルに 切 り 出 して 複 数 ページで 共 有 拡 張 子 を.js 以 外 にしてC/Sを 区 別 する( 例 :mjs) prepare.mjs function getname(obj) { return obj.foo.bar.name; bar } var logged = (session.user!= null); 呼 び 出 し 方 法 グローバル 関 数 :load('/common/prepare.mjs mjs'); m:exec src="/common/prepare.mjs" スコープは 呼 び 出 しと 同 じ 位 置 37
参 考 :スクリプト 活 用 プロトタイピングとしてのスクリプト 形 式 変 換 などをスクリプトで 書 いてみる 関 数 として 作 る パフォーマンスや 保 守 を 考 えてJavaで 再 実 装 関 数 からJavaを 呼 び 出 すよう 変 更 JavaはJUnitでテストする function 定 義 の 実 行 コストはゼロではない どこまで 気 にするかは 状 況 次 第 38
4. 運 用 や 保 守 を 考 慮 するTIPS テンプレートをコンテキストルートの 外 に 置 く テンプレートへの 直 接 アクセスを 防 ぐ 39
4. 運 用 や 保 守 を 考 慮 するTIPS テンプレートをコンテキストルートの 外 に 置 く テンプレートへの 直 接 アクセスを 防 ぐ 40
コンテキストルートの 外 に 置 く(1) コンテキストルートの 外 +- html/ +- たとえばここに.html,.mayaaを 置 く +- tomcat/ +- webapps/ +- myapp/ なぜ? テンプレートとロジックの 更 新 頻 度 の 違 い テンプレートとロジックのdeploy 方 法 の 違 い 41
コンテキストルートの 外 に 置 く(2) 構 成 の 例 warファイルには.html,.mayaaを 含 めない.html,.mayaaはFTPでアップロード パスを 環 境 変 数 に 定 義 (${}で 利 用 ) 開 発 環 境 本 番 環 境 などのパスの 違 いに 対 応 /META- INF/org.seasar.mayaa.source.PageSourceFactory <parameter name="absolutepath" value="${htmlpath}"/> 起 動 時 オプション -Dhtmlpath=/html アプリケーションとのバージョン 整 合 性 に 注 意 42
4. 運 用 や 保 守 を 考 慮 するTIPS テンプレートをコンテキストルートの 外 に 置 く テンプレートへの 直 接 アクセスを 防 ぐ 43
テンプレート 直 接 アクセスを 防 ぐ なぜ? エラーになったときログに 残 るのを 避 ける 作 るときの 心 配 事 を 減 らすため 対 策 方 法 WEB-INFの 下 に 置 く(Mayaa 1.1.11 以 降 ) forwardされているかをチェック(servlet2.4) Webサーバのアクセス 制 限 アクセスされたくないパスを 制 限 しやすくする 44
4. その 他 TIPS オススメはXHTML, UTF-8 Shift_JISはWindows-31Jの 関 係 で 面 倒 でもモバイルはShift_JIS "Windows-31J"にすると"Shift_JIS"に 変 換 ( 設 定 必 要 ) テストはSeleniumで 動 的 部 分 にidを 付 けると 楽 xpathでの 指 定 は 構 造 変 化 に 弱 い 45
上 級 編 (の 中 級 寄 り) パス 調 整 機 能 をカスタマイズする PathAdjusterを 自 作 file:///~をhttp://~に 置 き 換 える あるパスへのリンクをhttps://からの 絶 対 パスにする あるパスへのリンクをhttp://からの 絶 対 パスにする 環 境 変 数 を 活 用 コンポーネントのプロセッサ 化 html:errorをdefault.mayaaだけで mayaaだけで 済 ませる 46
5. まとめ 考 えること 設 計 をしっかり 事 前 準 備 的 な 実 装 ルール 付 けをしっかり デザイナの 道 具 にも 配 慮 デファクトスタンダードなDreamweaver テクニック 共 通 的 な 部 分 の 実 装 方 法 を 選 択 m:idを 使 うべし エラーメッセージの 表 示 位 置 を 決 める 47
5. まとめ テクニック デバッグ 用 関 数 を 用 意 する パス 調 整 機 能 を 設 定 する m:echoと 制 御 を 組 み 合 わせる スクリプトを 外 部 ファイルに 出 す レイアウトのヘッダを 一 部 差 し 替 える テンプレートをコンテキストルートの 外 に 置 く テンプレートへの 直 接 アクセスを 防 ぐ 48
さいごに 拡 張 性 は 高 い 色 々とクラスを 入 れ 換 えて 拡 張 できる ドキュメントがまだ extensionプロジェクトにご 協 力 を Mayaa 本 体 の 仕 様 を 変 えない 他 ライブラリに 依 存 するようなものも 作 る たとえばS2やStruts 49