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

    目次

  1. 目次
  2. テンプレートエンジンの基本的な使い方
  3. main.scala.html(レイアウトview)
  4. index.scala.html(パーツview)
  5. 引数3
  6. 念のためコントローラークラスも
  7. 出力されるHTML
  8. 引数3
  9. 変則的な特徴
  10. index.scala.html(パーツview)
  11. {}で指定されている引数2
  12. @mainよりも後ろで宣言してもOK。引数3
  13. 出力されるHTML
  14. {}で指定されている引数2
  15. @mainよりも後ろで宣言してもOK。引数3
  16. コメントの注意
  17. index.scala.html(パーツview)
  18. 引数3
  19. 出力されるHTML
  20. 引数3
  21. 引数がややこい
  22. アセスメント
※次回紹介するファンクションテンプレートも合わせれば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){
  ここはmain.scala.htmlの最後のテンプレート引数でなくては
ならない
  よって、ここだけは(hikisu3)の後ろに(hikisu4)みたいに仮引数
として指定できない。
  { }のブロックで囲まれた形式で指定しなくてはならない。
}

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

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

変則的な特徴

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

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

@(hikisu1 : String)

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

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

@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つ目の引数エリア--------------
        ここはmain.scala.htmlの最後のテンプレート引数
        でなくてはならない
    </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用のコメントは出力される-->
  {}で囲まれた形式で指定しなくてはならない。
}

出力されるHTML

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

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

引数がややこい

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

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

アセスメント

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

質問やご指摘など募集中です

(マークダウン記法使えます)