1. Webテンプレートエンジン
プログラマとデザイナをつなぐ技術の架け橋

2. 自己紹介
高橋 昌嗣 as 雑食系IT技術者
Twitter @office_krtec
企画・開発・運用・インフラ・セキュリティ…
オフィス クルテック 代表（2010年開業）
事業の心得 ”明るく 楽しく いきいきと”
親兄弟みんな事業主ｗ

3. 本日のテーマ
プログラマとデザイナの連携に欠かせない
”Webテンプレートエンジン”
お互いが気持ちよく使える製品を選びたい
➔ 無駄な時間を使わない（相手の修正待ち、など）
➔ 作業的な手戻りや重複がない
➔ 得意分野に集中できる

4. 私たちプログラマは…
画面デザインが苦手
データモデル重視
ロジック実装大好き♪
残念なUIに触れすぎて
感覚がマヒしている

5. デザイナさんと連携したい！
ユーザ
プレゼンテーション層 どう見せるか
主役：デザイナ
Webテンプレートエンジン
ビジネス層 どんなデータを見せるか
主役：プログラマ

6. あるべき姿
デザイナ
直接ブラウザで見ても崩れない。（動的部分のダミー部分もそのま
ま）
デザインに必要な属性やCSSなどはロジックによる制約を受けない
（リリース後も含めて）自由なタイミングで画面を差し替えられる
プログラマ
デザイナの成果物に（独自タグ追記等）手を加えなくても使える
デザイン差し替えによるプログラム消失等の事故が発生しない
デザインの変更都度パッケージング作業をしなくてもいい

7. 製品の選定要件
プレーンなHTMLファイルが使えること
ロジック部分は別ファイルに分離・独立できる
独自タグを埋め込まない（あっても属性まで）
オーサリングツール（DW等）の動作を妨げない
ファイルを直接ブラウザで見ても崩れない。
画面遷移などプレゼンテーション層内の動きはそのまま確認できる
テンプレートをプログラムパッケージの外に配置できる

8. 例：Mayaa（まやー）
● 沖縄の方言で”猫”
● Javaアプリケーションサーバで動作
● プレーンな｛X}HTMLが利用可能
（ロジックは別途XMLファイルで用意）
● ページは別フォルダに外だし可能
● Strutsなど専用タグを伴う製品とも併用可能
http://mayaa.seasar.org/

9. DEMO

10. まとめ
プログラマとデザイナの連携に欠かせない
”Webテンプレートエンジン”
お互いが気持ちよく使える製品を選びたい
例えば「Mayaa」みたいなことで実現できれば
仲良く連携ができる。（かもしれない）

11. ご清聴、ありがとうございました