Webアプリ開発の常識、バリデーションとテンプレート：Webアプリの常識をJSPとStrutsで身につける（7）（3/3 ページ）

» 2009年03月02日 00時00分公開

[中粼直樹，株式会社メセナ・ネットコム]

テンプレートエンジンを作って、仕組みを理解しよう

　では、実際にテンプレートエンジンの仕組みを作成してみましょう。

■Strutsのタグライブラリ「Tiles」を使う

　今回は、Strutsで提供されているタグライブラリ「Tiles」を使いたいと思います。「Tiles」とは、「Tile」と呼ばれる、再利用可能な部品を組み合わせたようなHTMLの作成を支援する機能です。

　例えば、図3のようなレイアウトで構成されていた場合に、「コンテンツ」の部分だけ変化するようなWebページを考えます。TilesはこのようなWebページの作成を支援するものです。「ヘッダー部分」「メニュー画面」「コンテンツ」「フッター部分」に当てはまる画面（この連載では、JSP）がTileということになります。

図3　サンプルのレイアウト

　では、上記と同じような画面を「Tile」タグを使ってアプリケーションを作成してみましょう。これまでの連載と同様、「PKG\Hello\pages」配下に下記のJSPファイルを作成してください。

Main.jsp

<%@ page contentType="text/html; charset=Shift_JIS" 

                                   pageEncoding="Shift_JIS" %>

                <%@ taglib uri="http://struts.apache.org/tags-tiles"prefix="tiles"%>

                <body bgcolor="#ffffff" text="#000000" link="#023264" 

                                   alink="#023264" vlink="#023264">

                  <h1>Tilesサンプル</h1>

                  <table border="1" width="100%" cellspacing="5">

                    <tr>

                      <td colspan="2"><tiles:insert page="Headar.jsp"/></td>

                    </tr>

                    <tr>

                      <td width="140" height="100" valign="top">

                        <tiles:insert page="Menu.jsp"/></td>

                      <td valign="top"  align="left">

                        <tiles:insert page="Body.jsp"/></td>

                    </tr>

                    <tr>

                      <td colspan="2">

                        <tiles:insert page="Footer.jsp"/></td>

                    </tr>

                  </table>

                </body>

Heder.jsp

<%@ page contentType="text/html; charset=Shift_JIS" 

                                   pageEncoding="Shift_JIS" %>

                  <p>ヘッダー部分</p>

Menu.jsp

<%@ page contentType="text/html; charset=Shift_JIS" 

                                   pageEncoding="Shift_JIS" %>

                  <p>メニュー部分</p>

Body.jsp

<%@ page contentType="text/html; charset=Shift_JIS" 

                                   pageEncoding="Shift_JIS" %>

                  <p>コンテンツ</p>

Footer.jsp

<%@ page contentType="text/html; charset=Shift_JIS" 

                                   pageEncoding="Shift_JIS" %>

                  <p>フッター部分</p>

Tiles.jsp

<%@ page contentType="text/html; charset=Shift-JIS" %>

                <%@ taglib uri="http://struts.apache.org/tags-html" prefix="html" %>

                <%@ taglib uri="http://struts.apache.org/tags-tiles"prefix="tiles"%>

                <html:html>

                  <head>

                    <title>Struts-Tiles</title>

                  </head>

                  <tiles:insert template="/pages/Main.jsp">

                    <tiles:put name="headar" value="Header.jsp" />

                    <tiles:put name="menu" value="Menu.jsp" />

                    <tiles:put name="body" value="Body.jsp" />

                    <tiles:put name="footer" value="Footer.jsp" />

                  </tiles:insert>

                </html:html>

　これで、アプリケーションの作成は完了です。

■「Tiles」のサンプルを動かしてみよう

　連載第2回と同様に、Eclipseを起動します。次に、［プロジェクト・エクスプローラー］の「Hello」を選択して右クリックをして、［リフレッシュ］を選択します。Eclipseで［プロジェクト］の［クリーン］を選択して、Helloプロジェクトのコンパイルが完了したら、Eclipse上から「Tomcat起動」アイコン（猫マーク）を押して、Tomcatを起動してください。

　正常に起動したことを確認したら、「http://localhost:8080/hello/pages/Tiles.jsp」にアクセスしてください。すると、下記のような画面が表示されます。

図4　サンプルの実行結果

　このように、Tilesタグを使うことでさまざまな部品（JSP）を組み合わせた画面を作成できます。「コンテンツ」部分である画面のみ変更したい場合、「Body.jsp」を違うJSPにするだけで「ヘッダー部分」「メニュー画面」「フッター部分」に関しては再利用するだけでいいので、製造効率やメンテナンス作業の向上につながるのです。

■<tiles:insert>タグ

　<tiles:insert>タグは画面部品のJSPを、JSPに取り込む場合に使用します。今回は「Main.jsp」に「Heder.jsp」「Menu.jsp」「Body.jsp」「Footer.jsp」を取り込んでいます。

■<tiles:put>タグ

　<tiles:put>タグはテンプレートファイルを読み込んで、テンプレートファイルの各場所に対してはめ込むファイルを指定します。今回表示させた「Tiles.jsp」は、「Main.jsp」をテンプレートファイルとして「Heder.jsp」「Menu.jsp」「Body.jsp」「Footer.jsp」を組み込んでいます。

テンプレートエンジンはいろいろある

　テンプレートエンジンとしては、JavaではフレームワークVelocityが有名だがほかの言語でも以下のようなものがあります。

**表2　主なテンプレートエンジンの種類**
	テンプレートエンジン	説明
	Velocity	Apache Software FoundationがJavaで開発しているオープンソースのテンプレートエンジン。詳細は下記参照
	Ruby on Rails	Ruby用Webアプリケーションフレームワーク。テンプレートエンジンとしての機能も持つ。詳細は下記参照
	Smarty	PHPで作成されたテンプレートエンジン。詳細は下記参照
	StringTemplate.NET	.NET用のテンプレートエンジン。詳細は下記参照
	Template Toolkit	Perlで記述されたテンプレートエンジン。フリーソフトウェアで、PDFやLaTeXなどのドキュメントの作成に使用することも可能
	Cheetah	Python用のテンプレートエンジン

　ほかにも、テンプレートエンジンに関しては、以下の記事を参考にしてください。

＠IT：Java TIPS -- Strutsでプレゼンテーション部分にVelocityを使う via kwout

連載インデックス「パターンとライブラリで作るAjaxおいしいレシピ」 - ＠IT via kwout

連載記事「今から始める MySQL入門」 via kwout

Insider.NET - ＠IT via kwout

Gaucheでメタプログラミング - ＠IT via kwout

次回は「データベース操作の常識」

　今回は、Webアプリケーションに欠かせないバリデーションとテンプレートエンジンについて説明しましたが、いかがしたでしょうか。今回の連載まででMVCモデルの“View”の部分の常識が大体理解できたかと思います。

　次回は、「データベース操作の常識」と題して、業務で使うWebアプリケーションに欠かせないデータベースをJSPやStrutsから操作する方法について解説します。データベース環境を構築しながら、Javaからデータベースと接続するためのJDBCとはなにか？いままでの連載でたびたび登場してきたBeanとはなにか？を解説します。

　MVCモデルの“Model”の部分に踏み込み、簡単なデータベース操作のWebアプリケーションのサンプルも作成しますので、どうぞお楽しみに！

　今回のサンプルは、こちらからダウンロードできます。