Navigate
X

テンプレートを利用してブラウザに表示する

Google App Engine(以後GAE)では、テンプレートエンジンを用いて、ブラウザ上への文字などの表示を行うことが可能です。

ブラウザ上に文字や絵などを表示する方法としては、javaのソースコードファイルに直接HTMLを記述することや、JSPを利用してHTML中にjavaを記述する、などが考えられますが、テンプレートエンジンを利用することで、javaソースコード(処理部)と表示部を別ファイルにて管理することが可能となり、メンテナンスが容易になるという利点があります。

下図に示すように、表示を司るテンプレートファイルと、データを扱うソースコードファイルを別で容易しておくと、テンプレートエンジンによって整合され、その結果がブラウザ上に出力されます。

図:テンプレートとテンプレートエンジンのイメージ

今回は、比較的簡単に利用できる(と勝手に思っている)Velocityというテンプレートエンジンを用いて、「Hello World! From Velocity」という文字列を表示してみたいと思います。
Velocityは外部パッケージとなっているため、別途ダウンロードしてくる必要がありますが、それについても解説します。
今回は主に、Velocityのテンプレートを、javaソースコードで読み込んで表示する方法について解説します。

ポイントは主に以下のクラスです。
表:テンプレート利用で使うクラス

クラス概要
VelocityVelocityの初期化を行う
VelocityContextテンプレートに値を渡す
Templateテンプレートの読み込みや表示を行う

それでは続きをどうぞ

Velocityパッケージを取得する

まずはVelocityを利用するために、パッケージをダウンロードする必要があります。
下記URLにアクセスし、「Velocity-<バージョン>.zip(Win)」「 Velocity-<バージョン>.tar.gz(Mac)」をダウンロードしてください。
http://velocity.apache.org/download.cgi


図:Velocityダウンロード画面

ダウンロードが完了したら解凍して、中にある「velocity-<バージョン>-dep.jar」をコピーし、プロジェクトのwar/WEB-INF-libフォルダ配下にペーストします。

eclipseを開き、プロジェクトのwar/WEB-INF-lib内にvelocity-<バージョン>-dep.jarが見えたら、その上で右クリックし、「Build Path」→「Add Build Path」を選択します。

図：Build Pathの追加

※プロジェクト上で見えない場合は、「Refresh」を実行してみてください。

以上でパッケージをプロジェクトに取り込めました。
Velocityを使う準備は完了です。

テンプレートを記述する

Velocityを用いる場合、テンプレートはVTLという独自の表記法を用いて表記します。
ここではその表記法については詳しく解説しませんので、下記URLを参考にしてみてください。
http://www.techscore.com/tech/Java/ApacheJakarta/Velocity/index/

今回は非常に簡単な以下のような内容のテンプレートを使用します。
sampletemplate.vm

$word From Velocity!

ここで、「$word」は、javaのソースコードファイルから渡された値を格納する変数です(渡し方は後述)。
「From Velocity!」は、ブラウザ上にそのまま表示されます。

Velocityを利用してテンプレートを表示する

Velocityは、以下の手順で使用します。


図 : テンプレート表示までの流れ

(1)まず初めに、Velocityの初期化を行う必要があります。
Velocityの初期かは、Velocityクラスのinit()メソッドを呼び出すことで行います。

TemplateSampleServlet.java

		///Velocityの初期化
		Velocity.init();

(2)次に、テンプレートへ渡す値をセットします。
今回は、「Hello World!」という文字列をテンプレートに渡してみます。
まず、テンプレートへ値を渡すには、VelocityContextクラスのインスタンスを生成する必要があります。

TemplateSampleServlet.java

		//テンプレートにデータを与える場合に使用
		VelocityContext vContext = new VelocityContext();

インスタンスを生成したら、VelocityContextクラスのput()メソッドを利用して値をセットしてきます。
今回は、前述した$wordという変数に対して、 Hello World!を渡しています。

TemplateSampleServlet.java

		//テンプレートの$word変数に「Hello World!」を渡す
		vContext.put("word", "Hello World!");

(3)(4)最後に、テンプレートを読み込んで表示します。
テンプレートの読み込みおよび表示には、Templateクラスを利用します。

TemplateSampleServlet.java

		//templateの詠み込み
		Template template = Velocity.getTemplate("WEB-INF/sampletemplate.vm");
		//Temlateの表示
		template.merge(vContext, resp.getWriter());

VelocityクラスのgetTemplate()メソッドによってテンプレート(sampletemplate.vm)を読み込みます。
Templateクラスのmerge()メソッドを用いて、テンプレートを表示します。
mergeメソッドの第一引数にはVelocityContextを、第二引数にはwriterを指定します。

あとはデバッグ実行すると、ブラウザ上で下図のように表示されます。


図 : サンプル実行画面

全ソースコードは以下のようになっています。

TemplateSampleServlet.java

public class TemplateSampleServlet extends HttpServlet {
	public void doGet(HttpServletRequest req, HttpServletResponse resp)
			throws IOException {

		///Velocityの初期化
		Velocity.init();

		//テンプレートにデータを与える場合に使用
		VelocityContext vContext = new VelocityContext();
		//テンプレートの$word変数に「Hello World!」を渡す
		vContext.put("word", "Hello World!");

		resp.setContentType("text/plain");
		resp.setCharacterEncoding("utf-8");

		//templateの読み込み
		Template template = Velocity.getTemplate("WEB-INF/sampletemplate.vm");
		//Temlateの表示
		template.merge(vContext, resp.getWriter());
	}
}

まとめ

今回は、Velocityのテンプレートを用いて、ブラウザ上に表示してみました。
テンプレートを用いたことで、今回のように、表示部を司るsampletemplate.vmと、javaソースコードファイル(TemplateSampleServlet.java)を分けて記述することができました。
HTML形式のファイル内にJavaのソースコードを埋め込む(JSP)ことでも同様のことが実現できますが、テンプレートエンジンを用いて表示部(テンプレートファイル)とデータ部(ソースコードファイル)を分離しておくことで、それぞれの役割が明確になり、またソースファイルの見通しもよくなるので、メンテナンスがし易くなります。

他にもGAEには、Djangoなどのテンプレートを利用することもできます。テンプレートエンジンが違えば、テンプレートファイルの記述の仕方や扱いも異なります。

今後またそれらについても解説していきたいと思います。

Tags: templatevelocityvtl
UpDown-G: