Tuesday, January 28, 2014

Mixer2でページのヘッダとフッタを挿入する方法

「Mixer2でビューを作るとき、いろんなページで共通のヘッダやフッタ部分を挿入するのってどうやるのだろう?」 よくあるケースです。JSPで言えば <jsp:include page="header.jsp"> にしておきつつ、 header.jspファイル内には <div id="header">ヘッダーのなか</div> のように書いておくやつ。

しかし、JSP的なやり方だと、ヘッダはヘッダ、フッタはフッタ、のようにバラバラになってしまい、 webデザイナーの立場からするとメンテが面倒なうえに実際の見栄えの確認がしづらくなってしまいます。 Mixer2ではいろいろなやり方がありますが、わかりやすくかつ手っ取り早いのが、パーツ取り用htmlテンプレート作戦です。

まず、通常の画面表示用テンプレートの他に、 parts.html のような名前でパーツ取り専用テンプレートを用意し、そこにヘッダとフッタのブロックを自由に書きます。

 <html xmlns="http://www.w3.org/1999/xhtml">
 <head>
    <meta charset="utf-8" />
 </head>
 <body>
 <div id="header">
  実際にヘッダにしたい内容
 </div>
 これはパーツ取り専用htmlなので実際には出力しませんよ
 <div id="footer">
  フッタにしたい内容
 </div>
 </body>
 </html>

次に実際に画面に出すテンプレートファイル(fooTemplate.htmlだとします)には次のように書いておきます。

 <html xmlns="http://www.w3.org/1999/xhtml">
 <head>
    <meta charset="utf-8" />
 </head>
 <body>
 <div id="header">
  ここにヘッダがはいる予定です
 </div>
  実際に出力したいコンテンツ...
 <div id="footer">
  ここにフッターがはいる予定
 </div>
 </body>
 </html>

画面出力のviewクラスはこんな感じ。(あくまでも模式的な例です)

Html partsHtml = mixer2Engine.loadHtmlTemplate("parts.html");
Div headerDiv = partsHtml.getById("header",Div.class).copy(Div.class);
Div footerDiv = partsHtml.getById("footer",Div.class).copy(Div.class);
Html fooHtml = mixer2Engine.loadHtmlTemplate("fooTemplate.html");
fooHtml.getBody().replaceById("header", headerDiv);
fooHtml.getBody().replaceById("footer", footerDiv);

実際には、テンプレートのロードを何度もやるのはやや非効率です。 共通クラスを切り出して、そこでparts.htmlのロードを一回だけ行ってheader/footer用Divインスタンスの copy()の結果を返させて、それを使うような感じがよいでしょう。

「fooTemplate.html上に <div id="header">ここにヘッダが入る</div> みたいなことを書く手間すら省きたい」という要求も実現可能です。

Html partsHtml = mixer2Engine.loadHtmlTemplate("parts.html");
Div headerDiv = partsHtml.getById("header",Div.class).copy(Div.class);
Div footerDiv = partsHtml.getById("footer",Div.class).copy(Div.class);
Html fooHtml = mixer2Engine.loadHtmlTemplate("fooTemplate.html");
// bodyタグの先頭にヘッダdivを差し込む
fooHtml.getBody().getContent().add(0, headerDiv);
// bodyタグの最後にフッタ用divを差し込む
fooHtml.getBody().getContent().add(footerDiv);

こんな感じ。

いかがでしょう。Mixer2でのビュー実装の書き方は様々です。 jspのカスタムタグではなく通常のjavaで書くので柔軟性とテストの書きやすさは段違い、というのがポイントです。 要件に合わせてご自由にどうぞ。

Thursday, January 9, 2014

Java5で動くMixer2をリリースしました(あくまで実験的)

Java5がリリースされたのは2004年10月。そして今はもう2014年です。もうすぐJava8も出ます。 そんな時期にMixer2をjava5でも動かせるようにするってそれ誰得?ww というツッコミもけっこうありました。(※Mixer2は本来はJava6以上が動作条件です)

しかし、世の中にはレガシーなシステムなんていくらでもあるようです。詳しくは言えませんが、 Java1.4(5ですらない!)で現役で稼働しているシステムが存在し今もチビチビ改修していると言う話を、つい先日まのあたりにしました。 Javaから離れてしまいますが、全日空の国内線旅客システムが実はつい最近まで Fortran(COBOLですらない!)で動いていたというニュースもありましたね。

さて、話をMixer2に戻しましょう。 Mixer2はJavaのJAXB-APIを使ってXHTMLを入出力しています。JAXBはJava6以降でJDK/JREに標準搭載となったため、 本来、Java5では動きません。

ただ、jaxbはもともと独立したライブラリとしてSunの社内で開発が続き、のちにJava6で初めて実行環境に標準搭載されたという経緯があります。 これはjaxbに限ったことではなく他のapiでも似たような流れをたどることがあります。

ということは、jaxbやその関連の、既に公開されているライブラリを、 Mixer2が依存ライブラリとして使用するようにすればJava5でも動くということになります。 そう、実はそれほど遠い道のりではないのです。実際1日2日でできちゃったし。

そんなこんなでとにかく、mixer2-java5 version 0.1.2 をリリースしました。

使い方は本家Mixer2とまったく変わりありません。ただし、以下の点にご注意ください。

  • あくまで実験的なものですので、サポートやバージョンアップはそれほど期待しないでください。
  • SpringMVC関連機能は削り落としてあります。純粋にテンプレートエンジン機能のみです。