Maya のご 紹 介 - Javaを 書 かないJava 製 テンプレートエンジン - 2005 年 9 月 17 日 Seasarファウンデーション 代 表 幹 事 ( 株 )グルージェント 代 表 取 締 役 社 長 栗 原 傑 享 1
自 己 紹 介 栗 原 傑 享 (くりはら まさたか) 1972 年 7 月 北 海 道 札 幌 市 生 まれ 早 稲 田 大 学 商 学 部 卒 現 在 妻 と2 歳 の 娘 (=Maya)と3 人 で 東 京 都 在 住 NPO 法 人 Seasarファウンデーション 代 表 理 事 http://www.seasar.org オープンソースソフトウェア 開 発 型 コミュニティ DIコンテナxAOPフレームワーク Seasar2 を 中 心 に エンタープライズ システムの 構 築 に 資 する 優 しさと 易 しさ を 実 現 するプロダクト 多 数 2005 年 7 月 にNPO 法 人 認 可 申 請 中 株 式 会 社 グルージェント 代 表 取 締 役 社 長 http://www.gluegent.com 東 京 都 渋 谷 区 渋 谷 3-7-6 ( 代 )03-5469-8869 JavaとDBによるWEBシステム 受 託 開 発 が 主 たる 業 務 位 置 情 報 企 業 ポータルなど 多 様 1999 年 7 月 設 立 4 月 末 決 算 現 在 第 7 期 目 2
Mayaとは Maya Java 製 のWEBテンプレートエンジン プログラムを 含 まないHTMLをテンプレートとする テンプレートロジックは 設 定 XMLに 記 述 設 定 XMLを 省 くこともできる Servlet 技 術 の 上 に 構 築 されている 既 存 のJ2EEアプリケーションサーバ 上 で 動 作 既 存 のJavaフレームワークの 利 用 可 能 表 層 技 術 に 限 り アーキテクチャを 深 化 ミドルウェアは 含 まず 既 存 のミドルウェアを 選 択 利 用 3
Mayaの 位 置 づけ Maya JSP Velocity Struts JSF WebWork2 Seasar2 S2Dao Hibernate Tapestry EJB ビュー 層 ビュー 制 御 層 S2JSF バックエンド 4
オープンソース 開 発 開 発 拠 点 Seasarファウンデーション http://maya.sandbox.seasar.org/ コミッタ 栗 原 傑 享 (Gluegent) http://d.hatena.ne.jp/masataka_k/ 須 賀 幸 次 (Gluegent) http://suga.parfe.jp/td/index.cgi 圓 尾 俊 介 (Gluegent) http://d.hatena.ne.jp/maruo_syunsuke/ duran http://d.hatena.ne.jp/duran/ 5
リソース Mayaサイト Seasarファウンデーション 内 サイト http://maya.sandbox.seasar.org 0.9.12リリース 中 11 月 までに1.0.0リリース 予 定 若 干 ドキュメント サンプル 1 画 面 サンプル 小 品 集 Hangmanゲーム Libmanツール コードリポジトリ SVNにて 公 開 中 https://www.seasar.org/svn/sandbox/maya/trunk 6
2005 年 度 上 期 未 踏 ソフトウェア 創 造 事 業 未 踏 ソフトウェア 創 造 事 業 IPA( 独 立 行 政 法 人 情 報 処 理 推 進 機 構 )による 東 京 工 業 大 学 の 千 葉 先 生 に 採 択 いただく 2005 年 6 月 ~2006 年 2 月 を 期 間 採 択 金 額 15,000,000- Mayaの 実 装 昼 間 に 会 社 業 務 として 従 事 リリーススケジュール 2005 年 11 月 : 事 業 成 果 の 中 間 リリース 2006 年 3 月 : 事 業 成 果 のリリース Mayaのドキュメント 日 本 語 のスタートアップガイド 技 術 マニュアルの 整 備 とともに それ らを 英 訳 したものを 作 成 MayaのWEBサイト ドキュメント 同 様 日 本 語 と 英 語 を 両 方 準 備 7
ロジックとデザインの 分 離 設 定 XML (.maya) JSPライクなタグ 記 述 HTMLテンプレート (.html) 標 準 的 なHTML XHTML デザイナー(もしくは 顧 客 )が 作 成 する 開 発 シナリオ.html MAYA.html.maya テンプレート 8
テンプレートへのインジェクション HTML テンプレート <html> <head> <meta http-equiv="content-type" content="text/html; charset=utf-8"> <title>maya Hello World</title> </head> <body> 標 準 的 なHTML <span id="message"> テンプレート 上 のダミーメッセージ </span> </body> </html> 設 定 XML idでインジェクション <?xml version="1.0" encoding= UTF-8"?> <m:maya xmlns:m="http://maya.seasar.org" xmlns:c="http://java.sun.com/jstl/core_rt"> <c:out m:id="message" c:value="こんにちは /> </m:maya> 9
タグライブラリ 指 定 <?xml version="1.0" encoding= UTF-8"?> <m:maya xmlns:m="http://maya.seasar.org" xmlns:c="http://java.sun.com/jstl/core_rt" > < c:out m:id="message" c:value="こんにちは /> </m:maya> XML 名 前 空 間 を 利 用 TLDのプレフィックスとURIのマッピングを 定 義 定 義 プレフィックスを 用 いてタグ 記 述 Maya 予 約 属 性 (m:id)はmaya 名 前 空 間 http://www.seasar.org/maya Maya 独 自 のライブラリ 群 も 用 意 ステートレスに 設 計 された 効 率 よい 描 画 コンポーネント 10
XPathによるインジェクション HTML テンプレート <html> <head> <meta http-equiv= content-type content= text/html; charset=utf-8 > <title>maya Hello World</title> </head> <body> 標 準 的 なHTML <span class= box > テンプレート 上 のダミーメッセージ </span> </body> </html> 設 定 XML XPathでインジェクション <?xml version= 1.0 encoding= UTF-8?> <m:maya xmlns:m= http://maya.seasar.org xmlns:c= http://java.sun.com/jstl/core_rt > <c:out m:xpath= //*[@class= box ] c:value="こんにちは /> </m:maya> 11
インジェクション 情 報 の 埋 め 込 み <html xmlns:m= http://maya.seasar.org xmlns:c= http://java.sun.com/jstl/core_rt > HTML テンプレート <head> <meta http-equiv= content-type content= text/html; charset=utf-8 > <title>maya Hello World</title> </head> <body> <span m:inject= c:out c:value= 今 日 は > テンプレート 上 のダミーメッセージ </span> 直 接 埋 め 込 み </body> </html> 予 約 属 性 m:injectにより テンプレートに 直 接 カスタムタグを インジェクト カスタムタグ 属 性 もテンプレート 上 に 記 述 設 定 XMLがなくても 動 作 する 12
属 性 バインディング <?xml version="1.0" encoding= UTF-8"?> <m:maya xmlns:m= http://maya.seasar.org xmlns:c= http://java.sun.com/jstl/core_rt m:class= org.seasar.maya.sample.hellomodel > <c:out m:id="message" c:value= ${ greeting } /> </m:maya> スクリプト 言 語 による 属 性 のバインディング 動 的 な 値 を 取 得 設 定 を 行 う JavaScriptによる 記 述 (APIで 言 語 差 し 替 え 可 能 ) ${ スクリプト 言 語 } とブレースで 囲 って 記 述 m:mayaのm:class 属 性 によってモデルオブジェクト 指 定 を 簡 便 に 行 う(モデルの 用 意 はこの 方 法 に 限 らない) 例 では hellomodel.getgreeting() を 実 行 する 13
テンプレート 上 スクリプト 実 行 テンプレートに 埋 め 込 む 方 法 m:exec 属 性 もしくは 外 部 スクリプトソース 実 行 m:write 属 性 を 実 行 して 出 力 <?xml version="1.0" encoding= UTF-8"?> <m:maya xmlns:m= http://maya.seasar.org > <m:exec m:id= e1 m:src= /script/bean.js /> <m:write m:id= w1 m:value= ${ bean.property } /> </m:maya> 14
スクリプトイベント 実 行 イベント 実 行 m:beforerender 描 画 前 に 実 行 m:afterrender 描 画 後 に 実 行.mayaファイルだけでもページとして 利 用 できる StrutsのActionのような 機 能 を 作 製 することが 可 能 <?xml version="1.0" encoding= UTF-8"?> <m:maya xmlns:m= http://maya.seasar.org > <m:beforerender> <![CDATA[ forward('/engine/action2.html'); ]]> </m:beforerender> </m:maya> 15
テンプレートの 動 的 切 り 替 え 1 枚 の.mayaファイルに 対 し 複 数 のHTML 接 尾 辞 による 区 別 接 尾 辞 をロジックにより 選 択 して 利 用 ロケールによる 切 り 替 え User-Agentによる 切 り 替 えなど.maya $en.html MAYA.html $ja.html 16
状 況 依 存 テンプレート 接 尾 辞 <?xml version="1.0" encoding= UTF-8"?> <m:maya xmlns:m= http://maya.seasar.org m:templatesuffix= ${ request.locales[0] } > </m:maya> テンプレート 接 尾 辞 描 画 時 にスクリプトを 実 行 して 決 定.mayaファイルに 記 述 m:mayaノードの m:templatesuffix 属 性 17
HTMLテンプレートのコンポーネント 化 HTMLテンプレートを 再 利 用 する 指 定 部 分 を 切 り 取 って 埋 め 込 む 部 品 にする Apache Jakarta Tapestryにて 実 現 されていた 機 能 アイディアをベー スに アーキテクチャ 深 化 コンポーネントのテンプレートも 状 況 依 存 の 接 尾 辞 決 定 メカニズム が 動 作 する.html 直 接 実 行 可 能 comp1.html comp3.html comp2.html 18
テンプレートHTMLの 指 定 フォルダをXML 名 前 空 間 として 指 定 ファイル 名 をタグ 名 として 記 述 引 数 指 定 可 能 例 では greeting コンポーネントインジェクション コンポーネント 中 では ${ binding.greeting } でアクセス <?xml version= 1.0 encoding= UTF-8?> <m:maya xmlns:m= http://maya.seasar.org xmlns:x= /sample/component > </m:maya> <x:comp1.html x:greeting="こんにちは /> 19
Tiles 類 似 のレイアウト 機 能 テンプレートコンポーネント 機 能 の 応 用 WEBサイト 中 でヘッダやフッタなど 共 通 デザイン 部 分 を 再 利 用 する 本 文 1.html 本 文 ベースとなる.html ヘッダ 本 文 フッタ 20
Tiles 利 用 <?xml version= 1.0 encoding= UTF-8?> <m:maya xmlns:m= http://maya.seasar.org 本 文 ページ m:extends= /layout.html > <m:dorender m:id= renderhere m:name= contents /> extends </m:maya> <?xml version= 1.0 encoding= UTF-8?> <m:maya xmlns:m= http://maya.seasar.org > Tile 描 画 <m:insert m:id= inserthere m:name= contents /> </m:maya> レイアウト 21
Mayaベース 開 発.html.maya.js.java.sql デザイナ スクリプト 開 発 者 開 発 者 Maya S2Struts Seasar2 S2Dao S2JSF ビュー 層 ビュー 制 御 層 バックエンド 22
Mayaスタイル 開 発 Mayaでは Javaを 書 かない しかし 書 いてもいい デザイナーがHTMLデザイン スクリプト 開 発 者 が.mayaファイル 記 述 基 本 : マークアップ 記 述 応 用 : JavaScriptでロジックを 書 く テンプレートを 再 利 用 していく HTMLテンプレートのコンポーネント 化 Tilesレイアウトによるデザイン 共 通 化 あとはJava ミドルは Strutsなど 既 存 の 使 い 慣 れたモノ バックエンドはJavaで 堅 めに 開 発 23
参 考 : Strusからの 移 行 JSPを HTMLにする.mayaにJSPカスタムタグの 部 分 を 分 離 スクリプトレットは JavaScriptに 書 き 換 え? struts-config.xml フォワード 指 定 を *.jspから *.htmlに 書 き 換 え JSPとももちろん 混 在 可 能 <action path="/startaction" type="org.seasar.maya.sample.hangman.startaction" name="difficultyform" scope="request" validate="false"> <forward name="index" path="/index.html" contextrelative="true"/> <forward name="guess" path="/guess.html" contextrelative="true"/> </action> 24
Q&A ご 静 聴 ありがとうございました Q&A 25