[Seasar][Teeda]クライアントサイドのレイアウト機能

昨日、mopemope さんがTeedaのレイアウト機能をクライアントサイドでJavaScriptを使って実現する機能をたった１日で作り上げてしまいました。恐るべし！

以前から、この実務的な機能は喉から手が出るほど欲しかったので、感無量です。mopemope さん、サイコー＆スゴすぎます！

回転と脱線　〜レイアウト機能追加〜
http://d.hatena.ne.jp/mopemope/20070713

Teeda　〜Kumuとは？　レイアウト機能〜
http://teeda.seasar.org/ja/kumu.html

久々ですよー、これほどワクワクする技術に遭遇したのは。素晴らしい！なんてったって、お客様と開発者の両方にとって価値ある技術だから。

実際に実務で使う複雑なHTMLに適応してみましたが、１発でバッチリうまくいって感動しました。社内のメンバーにも見てもらったけど「こんなことができるのか？」とかなり驚いていました。

この技術の素晴らしさを理解するには、『Teedaのレイアウト機能がどういったものであるか？』及び『レイアウト機能の問題点』を理解する必要がある。

Teedaにはレイアウト機能は、HTMLに継承の概念を持ち込み、親HTML側にヘッダーやフッター、メニュー等の共通レイアウト要素を記述し、子HTML側には個別要素のみを記述するといったことが実現できる。つまり、HTMLテンプレートのおける共通部分と個別部分との分離を実現するための機能です。（レイアウト機能：http://teeda.seasar.org/ja/extension_features.html#layout）

このサーバサイド版レイアウト機能により、HTMLテンプレートは共通部分が除かれた個別部分だけのシンプルなものになるので、開発者はとってもハッピーになりました。

ところが、このHTMLテンプレートをプロトタイプとして、お客様との仕様確認用に使おうとすると、各HTMLにはヘッダーとかメニュー、フッターが無いので、お客様としてはイメージを沸きにくく仕様が確認しずらい問題がありました。

この問題に対処するために、せっかく共通部分と個別部分に分離できたにも関わらず、先祖返りして１つのHTMLファイルに共通部分と個別部分の両方を記述して、さらに共通部分は実行時にはレンダリングされないように工夫する必要がありました。この手法だと開発者はダミーのタグだらけのHTMLファイル内で開発をしなければなりません。この苦痛は経験した人にしか分かり難いと思うが、ゴミに埋もれてながら、コードを書くような感覚です。他にも、メニューやヘッダーの仕様変更があると、全ファイルを変更しなければならないし、誤ってダミー箇所のHTMLをいじってしまって修復に困る等など、課題が多い。

Teedaを使う以前のS2JSFでは、上記の手法で何とかやってきました。しかし、S2JSFのレイアウト機能とTeedaのレイアウト機能は、目指すゴールは同じものの使い方が少し異なっており、共通部分をダミー化する手法がうまく使えないことに悩んでいました。（だからと言って、HTMLプロトタイプとViewテンプレートを別々のファイルにするJSP時代の手法に戻る気はサラサラありませんでした。）

そこで、クライアント側のレイアウト機能を使うと、この問題がスッキリ解決できてしまうという訳です。少しは考えたものの、Teedaがサーバサイドで行うレイアウト機能と同じ事をJavaScriptを使ってクライアントサイドで実現できてしまうとは思ってもいなかった。

レイアウト機能（クライアント版）のおかげで、各HTMLファイルは個別部分だけの記述しかしていないにも関わらず、JavaScriptがAjax経由でローカルのファイルを取得することでヘッダーやメニュー、フッターを描画してくれるようになります。お客様は全体イメージを掴みやすい。しかも、クライアントサイドで実行できるので、ディレクトリごと圧縮したものをお客様に送付すれば、お客様はそのままHTMLを開くだけで、実際には個別部分しかないファイルにも関わらずページ全体のイメージが確認することができる。

単に、開発者の生産性を向上させるだけでなく、お客様もハッピーになる技術というのが気に入っています。ちなみに、クライアント版のレイアウト機能は Kumu(kumu.js)というJavaScriptのライブラリで実現されています。しかも、Kumu自体はTeedaに依存しておらず、単体で使用できる点も実に素晴らしい。

ぜひ、サーバー版レイアウト機能とクライアント版レイアウト機能を併用して使ってみて、その破壊力を実感して感動を分かち合いたいです。

最後に、この素晴らしいレイアウト機能（Kumu版）を開発した id:mopemope さんに改めて感謝します！!