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

生徒

「Play Frameworkで作った画面のデザインを整えたいのですが、自作のCSSファイルはどうやって読み込めばいいですか？」

先生

「Play Frameworkでは、画像やスタイルシート、JavaScriptなどのファイルを静的リソース（Assets）として管理します。専用のルートを使って、ビューから簡単に呼び出すことができますよ。」

生徒

「普通のHTMLみたいにパスを書くだけじゃダメなんですか？」

先生

「基本は同じですが、フレームワークが提供するヘルパーを使うことで、より確実で安全にファイルを指定できるんです。まずはファイルの置き場所から確認しましょう！」

1. 静的リソースの配置場所を理解する

Play Frameworkのプロジェクトにおいて、外部に公開するCSS、JavaScript、画像ファイルなどは、プロジェクトのルートにある public フォルダの中に配置するのが標準的なルールです。

デフォルトでは以下のようなディレクトリ構成になっています。

public/stylesheets/：CSSファイルを配置します。
public/javascripts/：JavaScriptファイルを配置します。
public/images/：画像ファイルを配置します。

この public フォルダ配下にあるファイルは、開発者が設定したルーティングを通じてブラウザからアクセス可能になります。

2. routesファイルでのAssets設定

ビューからファイルを読み込む前に、まず設定ファイルである conf/routes を確認しましょう。 Play Frameworkの初期状態では、以下のような静的リソース用のルーティングが記述されています。


GET     /assets/*file               controllers.Assets.at(path="/public", file)

この一行があるおかげで、ブラウザから /assets/stylesheets/style.css のようなURLで public フォルダ内のファイルにアクセスできるようになっています。これは「リバースルーティング」という仕組みを利用するための重要な設定です。

3. TwirlビューでCSSを読み込む基本的な書き方

それでは、実際にTwirlテンプレート（ビュー）からCSSファイルを組み込んでみましょう。手書きでパスを書くのではなく、@routes.Assets.at というヘルパーメソッドを使用するのがPlay Frameworkの流儀です。


@()

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <title>スタイル適用テスト</title>
    <link rel="stylesheet" href="@routes.Assets.at("stylesheets/main.css")">
</head>
<body>
    <h1 class="my-title">こんにちは、Play Framework！</h1>
</body>
</html>

このように記述することで、開発環境でも本番環境でも、正しいURLが自動的に生成されます。

4. JavaScriptファイルをビューに組み込む

JavaScriptの場合も、CSSと同様の手順で読み込むことができます。通常は、ページの読み込み速度を考慮して、body タグの閉じ直前に記述することが多いです。


@()

<!DOCTYPE html>
<html>
<body>
    <h1>JavaScriptのテスト</h1>
    <button id="btn">クリックしてね</button>

    <script src="@routes.Assets.at("javascripts/hello.js")" type="text/javascript"></script>
</body>
</html>

@routes.Assets.at を使うことで、ファイルが存在しない場合にコンパイルエラーとして検知しやすくなるというメリットもあります。

5. 外部ライブラリ（CDN）を利用する場合

BootstrapやjQueryのように、インターネット上で公開されているCDN（Content Delivery Network）を利用したい場合は、Playのヘルパーを使わずに通常の link タグや script タグをそのまま記述します。


@()

<head>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
</head>

自作のファイルは @routes.Assets.at で読み込み、外部ライブラリは直接URLを書く、という使い分けを覚えましょう。

6. Javaコントローラでの準備

ビューを表示するためには、Javaのコントローラ側で適切にレンダリングを行う必要があります。特別な処理は不要ですが、シンプルな例を確認しておきましょう。


package controllers;

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

public class AssetTestController extends Controller {
    public Result show() {
        // publicフォルダのCSS/JSを使用するビューを表示
        return ok(assetTest.render());
    }
}

7. レイアウトテンプレートでの共通化

全てのページで同じCSSやJavaScriptを読み込むのは非効率です。前回学んだ「レイアウトテンプレート」にこれらの読み込み処理を記述することで、サイト全体の共通設定として一括管理できます。


@(title: String)(content: Html)

<!DOCTYPE html>
<html>
<head>
    <title>@title</title>
    <link rel="stylesheet" href="@routes.Assets.at("stylesheets/common.css")">
</head>
<body>
    <nav>共通メニュー</nav>
    @content
    <script src="@routes.Assets.at("javascripts/common.js")"></script>
</body>
</html>

こうすることで、個別のビュー（例えば index.scala.html）では、独自のコンテンツを書くだけで自動的にCSSが適用されるようになります。

8. 画像ファイルの表示方法

画像を表示する img タグの src 属性でも、同じ仕組みが使えます。


<div class="logo">
    <img src="@routes.Assets.at("images/logo.png")" alt="サイトロゴ">
</div>

Webサイトを華やかにするためには画像の活用が欠かせません。 public/images フォルダに素材を入れ、この記述方法で呼び出してください。

9. キャッシュ対策とFingerprinting

Play Frameworkの Assets コントローラには、ブラウザのキャッシュを効率的に管理する仕組みがあります。大きなプロジェクトでは、ファイル名にハッシュ値を付けて、ファイルが更新されたときだけ新しいファイルを読み込ませる（キャッシュバスティング）設定も可能です。

初心者のうちは深く気にする必要はありませんが、@routes.Assets.at を使っていれば、将来的に高度な設定を導入した際もスムーズに対応できるということを覚えておいてください。

10. 開発中のトラブル解決法

CSSが反映されない、あるいはJavaScriptが動かないといったときは、まずブラウザのデベロッパーツール（F12キー）を確認しましょう。「404 Not Found」が出ている場合は、ファイル名の間違いや、public フォルダ内の階層構造が routes.Assets.at の引数と一致していないことが原因です。

Play Frameworkは厳密なフレームワークなので、パス一つ間違えても教えてくれます。メッセージをよく読み、正しい場所にファイルを配置して、快適なWeb制作を楽しんでください！