先生と生徒の会話形式で理解しよう

生徒

「先生、Webサイトのヘッダーやフッターって、どのページでも同じですよね？ページを作るたびに全部のファイルに同じHTMLを書くのは面倒だし、修正も大変そうです……。」

先生

「その通りですね。Play FrameworkのTwirl（トワール）には、共通の枠組みを作るための『レイアウトテンプレート』という仕組みがあります。これを使えば、共通部分は一箇所にまとめることができるんですよ。」

生徒

「枠組みを一つ作っておいて、中身だけを入れ替えるイメージですか？」

先生

「まさにその通り！全体のデザインを統一しつつ、開発スピードを劇的に上げる方法を学んでいきましょう！」

1. レイアウトテンプレートとは？

Webサイトを制作する際、HTMLの head タグや、サイト全体のナビゲーション、コピーライトを表示するフッターなどは、全ページで共通していることがほとんどです。 レイアウトテンプレートとは、これらの「共通の枠組み」を定義した雛形ファイルのことです。

Play Frameworkでは、この枠組みの中に、各ページ固有のコンテンツ（中身）を流し込むという手法を取ります。これを活用することで、コードの重複を排除し、保守性を高めることができます。一箇所を直せばサイト全体のデザインが更新されるため、大規模な開発では必須の技術となります。

2. Twirlでの基本的なレイアウトの構造

Play Frameworkのプロジェクトを新規作成すると、app/views/main.scala.html というファイルが自動生成されているはずです。これが標準的なレイアウトテンプレートです。

最大の特徴は、引数として Html 型（画面の中身そのもの）を受け取る点にあります。テンプレートの内部で @content のように記述した場所に、各ページで作った具体的なHTMLが埋め込まれる仕組みになっています。

3. main.scala.htmlの具体的なコード例

それでは、実際に使われるレイアウトテンプレートの例を見てみましょう。ここではページタイトルとコンテンツを引数として受け取るようにしています。


@(title: String)(content: Html)

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <title>@title</title>
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css">
</head>
<body>
    <header class="bg-dark text-white p-3">
        <div class="container">
            <h1>私の学習サイト</h1>
        </div>
    </header>

    <main class="container mt-4">
        @content
    </main>

    <footer class="text-center mt-5 py-3 border-top">
        <p>&copy; 2026 Play Framework 入門ガイド</p>
    </footer>
</body>
</html>

1行目の (content: Html) が魔法の言葉です。ここにはHTML構造がまるごと入ってくるため、@content と書くだけで中身が展開されます。

4. 個別ページからレイアウトを呼び出す

次に、作成したレイアウト（枠組み）を使って、具体的なページ（中身）を作る方法を解説します。例えば、index.scala.html を以下のように記述します。


@()

@main("トップページ") {
    <div class="jumbotron">
        <h2>ようこそ！</h2>
        <p>これはレイアウトテンプレートを使用して表示されているコンテンツです。</p>
        <button class="btn btn-primary">詳細を見る</button>
    </div>
}

ここでは @main("タイトル") { ... } という書き方をしています。波括弧 { } の中に書いたHTMLが、先ほどのレイアウトテンプレートにある @content の部分に自動的にはめ込まれます。

5. コントローラからの呼び出し方

Javaのコントローラからこのページを表示させる方法は、通常のビューと同じです。レイアウトを直接呼び出すのではなく、「中身」である個別ページのテンプレートを render します。


package controllers;

import play.mvc.*;
import views.html.*;

public class HomeController extends Controller {
    public Result index() {
        // index.scala.html を描画して返します
        // index内部で main.scala.html を呼び出しているため、枠組みも一緒に表示されます
        return ok(index.render());
    }
}

コントローラ側は、レイアウトが使われているかどうかを意識する必要がありません。これにより、Javaのロジックとデザインの枠組みが綺麗に切り離されます。

6. 複数の引数をレイアウトに渡す

タイトル以外にも、ページごとに読み込みたいJavaScriptファイルを変えたり、特定のメニューを強調したりしたい場合があります。その時は、レイアウト側の引数を増やして対応します。


@(title: String, scripts: Html = Html(""))(content: Html)

<html>
<head>
    <title>@title</title>
</head>
<body>
    @content
    
    @scripts
</body>
</html>

Html("") のように初期値を設定しておけば、スクリプトが必要ないページでは引数を省略することも可能です。

7. レイアウトを使うメリット：SEO対策と管理

レイアウトテンプレートを使うことは、SEO（検索エンジン最適化）の観点からも非常に有利です。共通の meta タグや OGP 設定を一箇所で管理できるため、サイト全体の情報を正しく検索エンジンに伝えることができます。

また、ライブラリ（例えばjQueryやBootstrapなど）のバージョンアップが必要になった際も、レイアウトテンプレートを一行書き換えるだけで、全ページに反映されます。これはパソコン操作に不慣れな初心者にとっても、メンテナンスのミスを減らす大きな助けになります。

8. 複数のレイアウトを使い分ける

一つのサイトの中で、「一般ユーザー向けの画面」と「管理者用の管理画面」でデザインを全く変えたい場合があります。その時は、main.scala.html だけでなく、admin_layout.scala.html のように複数のレイアウトファイルを作成しましょう。

個別ページ側で @admin_layout("管理画面") { ... } と呼び出す先を変えるだけで、簡単にデザインの切り替えが可能です。 Play FrameworkのTwirlテンプレートは非常に柔軟なので、状況に応じた使い分けが自由自在です。

9. 初心者がハマりやすいポイント

レイアウトテンプレートを作成する際に、初心者がよく遭遇するトラブルが「引数の括弧」です。 Twirlでは @(title: String)(content: Html) のように、通常の引数とコンテンツ用の引数を別の括弧で囲む必要があります。

これは カリー化 と呼ばれる形式ですが、最初は「おまじない」として覚えておけば大丈夫です。もしコンパイルエラーが出たときは、この括弧の数や位置をまず確認してみてください。また、Html 型の「H」が大文字であることにも注意しましょう。

10. 表現力豊かなビューの構築に向けて

レイアウトテンプレートをマスターすれば、Play Frameworkでの開発は一気に「プロっぽく」なります。共通部分をスマートに管理し、中身の作成に集中できる環境を整えることは、良いWebアプリケーションを作るための第一歩です。

まずは、自分の好きなデザインを main.scala.html に反映させて、複数のページが同じデザインで表示される感動を味わってみてください。一度慣れてしまえば、もう二度と全ページに同じHTMLを書く日々には戻れなくなるはずです！

Play Frameworkのレイアウトテンプレート作成ガイド！共通デザインを効率化