Sharable

システム&ウェブのシェアラブル

Lv.13 テンプレートエンジンの基本的な使い方 [play framework2.0] [java]

2012年4月5日
※次回紹介するファンクションテンプレートも合わせれば3種類です。もっとあるのかもだけど、、、。なんこあるのか数に意味はないです。単にまとめたら分かり易いかな程度の存在です。

テンプレートエンジンを利用して作るviewには、2種類※ある模様です!

1つはレイアウトを決めるテンプレート用のview。たとえばmain.scala.htmlなど。
この記事では、仮にレイアウトviewと呼びます。


1つはレイアウトに流し込む中身を定義するview。tiles的な存在。たとえばindex.scala.htmlなど。
仮にタイルパーツviewと呼びます。

命名規則による両者の識別はとくになさそう。
もしレイアウトが複数あるなら、ちゃんと命名規則をプロジェクトごとに作ったほうがいいと思う。

呼び出し関係は、
コントローラー ⇒ タイルパーツview ⇒ レイアウトview

基本的には、このようになっています。

目次

テンプレートエンジンの基本的な使い方

まずは基本形から。

main.scala.html(レイアウトview)

@***************************************************
* テンプレート引数の名前は、なんでもOK。
* このテンプレートを呼び出すファイル側と引数名が
* 違ってもOK。
***************************************************@
@(title: String)(arg1: Html)(arg2 :Html)(arg3 : Html)
<!DOCTYPE html>
<html>
  <head>
    <title>@title</title>
  </head>
  <body>
    <section class="content">@arg1</section>
    <section class="content">@arg2</section>
    <section class="sidebar">@arg3</section>
  </body>
</html>

views > index.scala.html(パーツview)

@********************************************
hikisu1はテンプレート引数なので、このパーツview
(index.scala.html)をコントローラークラスから呼ぶ
タイミングで指定する必要がある。
ex. ok(index.render("引数1"));
********************************************@
@(hikisu1 : String) 

@********************************************
hikisu2,3はレイアウトview(main.scala.html)で
指定されているmainのテンプレート引数です。
********************************************@
@hikisu2 = {引数2}
@hikisu3 = {<h3>引数3</h3>}

@********************************************
「@main」の部分にはファイル名が来なくてはならない。
下記の場合は、views > main.scala.htmlという指定を意味する。
********************************************@
@main(hikisu1)(hikisu2)(hikisu3){
  <p>ここはmain.scala.htmlの最後のテンプレート引数でなくては
ならない</p>
  <p>よって、ここだけは(hikisu3)の後ろに(hikisu4)みたいに仮引数
として指定できない。</p>
  <p>{ }のブロックで囲まれた形式で指定しなくてはならない。</p>
}

念のためコントローラークラスも

public static Result index() {
    return ok(index.render("引数1"));
}

出力されるHTML

<html>
  <head>
    <title>1つ目の引数=引数1</title>
  </head>
  <body>
    <section>
    	--------------2つ目の引数エリア--------------
    	引数2
    </section>
    <section>
    	--------------3つ目の引数エリア--------------
    	<h3>引数3</h3>
    </section>
    <section>
    	--------------4つ目の引数エリア--------------
  <p>ここはmain.scala.htmlの最後のテンプレート引数でなくては
ならない</p>
  <p>よって、ここだけは(hikisu3)の後ろに(hikisu4)みたいに仮引数
として指定できない。</p>
  <p>{ }のブロックで囲まれた形式で指定しなくてはならない。</p>
    </section>
</body></html>

変則的な特徴

王道ではないけど、一応コンパイル通る方法も紹介します。

views > index.scala.html(パーツview)

@(hikisu1 : String)

ここで文字書くとbodyタグの開始直後に表示されてしまう!
正しくない使い方

@main(hikisu1){<h2>{}で指定されている引数2</h2>}(hikisu3){
 <p>ここはmain.scala.htmlの最後のテンプレート引数でなくては
ならない</p>
}

@hikisu3 = {<h3>@mainよりも後ろで宣言してもOK。引数3</h3>}

ここで文字書くとbodyタグの最後に表示されてしまう!正しくない使い方

出力されるHTML

<html>...</head>
<body>
ここで文字書くとbodyタグの開始直後に表示されてしまう!
正しくない使い方
    <title>1つ目の引数=引数1</title>
    <section>
    	--------------2つ目の引数エリア--------------
    	<h2>{}で指定されている引数2</h2></section>
    <section>
    	--------------3つ目の引数エリア--------------
    	<h3>@mainよりも後ろで宣言してもOK。引数3</h3>
    </section>
    <section>
    	--------------4つ目の引数エリア--------------
        <p>ここはmain.scala.htmlの最後のテンプレート引数
        でなくてはならない</p>
    </section>
ここで文字書くとbodyタグの最後に表示されてしまう!
正しくない使い方
</body></html>

正しくない表記が混ざった影響だと思うのですが、
titleタグがbodyに記述されてしまいました。

コメントの注意

HTMLに出力されるコメントと出力されないコメントがあります。

views > index.scala.html(パーツview)

@(hikisu1 : String)
@hikisu2 = {引数2}
@hikisu3 = {<h3>引数3</h3>}

@main(hikisu1)(hikisu2)(hikisu3){    
  @**@マークで囲まれたコメントは出力されない**@
  <!--Html用のコメントは出力される-->
  <p>{}で囲まれた形式で指定しなくてはならない。</p>
}

出力されるHTML

<html>...</head>
<body screen_capture_injected="true">
  <section>
    --------------2つ目の引数エリア--------------
    引数2
  </section>
  <section>
    --------------3つ目の引数エリア--------------
    <h3>引数3</h3>
  </section>
  <section>
    --------------4つ目の引数エリア--------------
    <!--Html用のコメントは出力される-->
    <p>{}で囲まれた形式で指定しなくてはならない。</p>
  </section>
</body></html>

意図的に出力したいコメントなのか、HTML上は見せたくない
コメントなのか、考えて記述する必要があります。

引数がややこい

コントローラークラスではタイルパーツviewのテンプレート引数を指定して、
タイルパーツviewではレイアウトviewのテンプレート引数を指定する、という
のが最初は分かりにくかったりする。

でも1度合理的に呑み込めれば分かり易い。

アセスメント

  • テンプレートには2種類あることを知っている
  • レイアウトを司るテンプレートの指定方法が分かる
  • レイアウトを司るテンプレートの引数を指定する方法が分かる
  • HTMLに出力させないコメント方法が分かる
このエントリーをはてなブックマークに追加