back

Playアプリケーションの仕組みを知ろう！ (5/6)

■main.scala.htmlテンプレートの働き

では、もう１つのテンプレートファイル「main.scala.html」についても内容を見てみる事にしましょう。

これも、下のリスト欄に掲載しておきます。書かれているのは、@による式言語のスクリプトだけでなく、HTMLのタグもけっこうありますね。では順に説明しましょう。
@(title: String)(content: Html)
まず最初に、引数として渡される値を保管する変数宣言があります。これはindexと同じですね。ここで渡されるのは、Stringの値と、Htmlの値です。

先に、index.scala.htmlでmainを呼び出した時、()内にテキストが、その後の{}内にHTMLのコードが記述されていたのを思い出してください。これらが、ここで宣言されている変数titleとcontentにそれぞれ代入されていたのです。
<title>@title</title>
引数で渡されたテキストは、ここで使われていました。タイトルとして表示されていたのですね。
<link rel="stylesheet" media="screen" 
    href="@routes.Assets.at("stylesheets/main.css")">
<link rel="shortcut icon" type="image/png" 
    href="@routes.Assets.at("images/favicon.png")">
<script src="@routes.Assets.at("javascripts/jquery-1.7.1.min.js")" 
    type="text/javascript"></script>
これらは、hrefやsrcの値に、routes.Assets.atというものが設定されています。これは、引数に指定したファイルのアドレスを返すものです。Play Frameworkでは、ファイル類はそれがあるフォルダのパスをそのままアドレスに指定すればアクセスできるというわけではありません。それぞれに公開されるアドレスがマッピングされます。これは、バージョンアップなどによって変わる可能性もありますから、公開されるアドレスを直打ちするのでなく、このように用意されている関数を使って指定するのが基本です。
<body>
    @content
</body>
最後になりましたが、ボディ部分、すなわち実際にページに表示されるコンテンツです。最初に変数contentに渡されているHTMLコードがそのままここに出力されていることがわかります。


※なぜ、２つのテンプレートに分かれているのか？

これでざっとテンプレートの内容がわかりました。が、ここで「なぜ、２つのテンプレートファイルに分かれているんだ？」と疑問に思った人もいることでしょう。

２つのテンプレートを見ると、役割に違いがあることがわかります。main.scala.htmlにHTMLの（コンテンツ以外の）基本コードが書かれています。そしてindex.scala.htmlには表示されるコンテンツの内容だけが書かれています。

すなわち、これは「Webページの骨格部分」と「実際に表示されるコンテンツ」を切り離したものなのです。複数のページを作るようになると、その利点がわかってきます。どのページもmain関数でレンダリングし表示するようにしてあれば、ページの基本的な構成はすべてmain.scala.htmlで統一できます。このファイルを修正すれば、すべてのページの基本的な構成などを一斉に変更できます。そしてそれぞれのページ側では、表示するコンテンツだけを考えれば済むようになります。



(by. SYODA-Tuyano.)

※リストが表示されない場合

AddBlockなどの広告ブロックツールがONになっているとリストなどが表示されない場合があります。これらのツールをOFFにしてみてください。

●main.scala.htmlの内容

@(title: String)(content: Html)

<!DOCTYPE html>

<html>
    <head>
        <title>@title</title>
        <link rel="stylesheet" media="screen" 
            href="@routes.Assets.at("stylesheets/main.css")">
        <link rel="shortcut icon" type="image/png" 
            href="@routes.Assets.at("images/favicon.png")">
        <script src="@routes.Assets.at("javascripts/jquery-1.7.1.min.js")" 
            type="text/javascript"></script>
    </head>
    <body>
        @content
    </body>
</html>



　 　

記事のリストに戻る



PC Site G+ mail
copyright 2009. SYODA-tuyano.