では、実際にコントローラーとビューをカスタマイズして、オリジナルの表示を作ってみましょう。まずは、「コントローラーでビューテンプレートをレンダリングし表示する」という基本からです。

前回、説明したように、画面の表示は２つのビューテンプレートとして用意され、コントローラーのアクションクラスでそれをレンダリングし表示していました。このとき、必要に応じてテキストなどの値をテンプレート側に受け渡すことができました。この基本を行なってみましょう。

画面全体の基本的な構成となるmain.scala.htmlは、このまま変更する必要はないでしょう。Applicationコントローラーのindexと、index.scala.htmlだけ修正すればよいでしょう。また、デフォルトの表示では味気ないので、スタイルシートも用意しておくことにしましょう。「public」フォルダ内にある「stylesheets」フォルダの中に、「main.css」というスタイルシートファイルがあります。これが、main.scala.htmlで使用されるスタイルシートファイルです。これにスタイルシートの情報を記述しておけば、main.scala.htmlで適用されます。

下のリスト欄にそれぞれのファイルの修正を掲載しておきます。アクセスすると、「サンプルページ」というタイトルに「これはテストで作ったページです」とテキストが表示されます。実際に動作を確認しておきましょう。



ここでのポイントは、アクションメソッドからテンプレートへとどのように値が受け渡されていくか、です。まず、アクションの呼び出し部分を見てみましょう。

Ok(views.html.index(title, msg))

２つの変数が引数に渡されていることがわかりますね？　では、これをindex.scala.html側でどう受け取っているか見てみましょう。

@(title: String, message: String)

こうなっています。これで第１引数の値がtitleに、第２引数がmessageにそれぞれ渡されるのです。――いかがですか？　基本さえわかれば、コントローラーからビューへ必要な値を送るのはそれほど難しくないでしょう？　渡す値が増えたら、引数をどんどん追加すればいいのですから、意外と簡単です。

●Application.scala

package controllers

import play.api._
import play.api.mvc._

object Application extends Controller {

    def index = Action {
        val title = "サンプルページ"
        val msg = "サンプルのページです。"
        Ok(views.html.index(title, msg))
    }

}


●index.scala.html

@(title: String, message: String)

@main(title) {
    
    @main(message){
        <h1>@title</h1>
        <p>@message</p>
    }
    
}


●/public/stylesheets/main.css

body {
    background-color = #FFCCCC;
    color: #990000;
    font-size: 12pt;
}
h1 {
    color: #FFFFFF;
    background-color: #990000;
    font-size:18pt;
    padding: 5px;
}