Webjars

Java系の言語でウェブアプリを作る際に便利なライブラリで、Bootstrapをはじめとするウェブ系のCSS、Javascriptのコードをまとめて提供してくれます。公式サイトはコチラ。サイトにアクセスすると、著名なJSライブラリなどが並んでいるのがわかります。基本的には、必要なライブラリに書いてあるコードをbuild.sbtに記載すれば使えるようになります。ここでは、Play2.6でBootstrapを使う方法を解説します。

Playの準備

公式サイトにあるように、sbtでプロジェクトひな型を作ります。

sbt new playframework/play-scala-seed.g8

Webjarsの利用

Webjarsのホームページから、Bootstrapに必要なライブラリを探して、libraryDependenciesに追加をします。Webjarsを使うのに必要な、webjars-playのライブラリも追加しています。

build.sbt

name := """WebjarsTest"""
organization := "jp.co.example"

version := "1.0-SNAPSHOT"

lazy val root = (project in file(".")).enablePlugins(PlayScala)

scalaVersion := "2.12.6"

libraryDependencies ++= Seq(
    guice,
    "org.webjars" %% "webjars-play" % "2.6.3",
    "org.webjars" % "bootstrap" % "4.1.3",
    "org.webjars.bower" % "jquery" % "3.3.1",
    "org.webjars" % "popper.js" % "1.14.3",
    "org.scalatestplus.play" %% "scalatestplus-play" % "3.1.2" % Test,
)

こうすると、意味合いとしては、app/asset以下にwebjarsで追加したライブラリが設置されるようになるようです。
具体的には、<link href="/assets/lib/bootstrap/css/bootstrap.css" rel="stylesheet" media="screen">と書くことで参照できるようになります。Playを使った場合は、ヘルパーを使って、@routes.Assets.versioned("lib/bootstrap/css/bootstrap.css")と書くことができます。

app/view/main.scala.html

<!DOCTYPE html>
<html lang="ja">
    <head>
        @* Here's where we render the page title `String`. *@
        <title>@title</title>
        <!-- Required meta tags -->
        <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

        <meta charset="utf-8">

        <link rel="stylesheet" media="screen" href="@routes.Assets.versioned("lib/bootstrap/css/bootstrap.css")">
        <link rel="stylesheet" media="screen" href="@routes.Assets.versioned("stylesheets/main.css")">
        <link rel="shortcut icon" type="image/png" href="@routes.Assets.versioned("images/favicon.png")">

    </head>

    <body>
        @* And here's where we render the `Html` object containing
         * the page content. *@
        @content

        <script src="@routes.Assets.versioned("javascripts/main.js")" type="text/javascript"></script>
        <script src="@routes.Assets.versioned("lib/jquery/dist/jquery.slim.min.js")" type="text/javascript"></script>
        <script src="@routes.Assets.versioned("lib/popper.js/umd/popper.min.js")" type="text/javascript"></script>
        <script src="@routes.Assets.versioned("lib/bootstrap/js/bootstrap.min.js")" type="text/javascript"></script>
    </body>
</html>

Bootstrapによるサンプルページの表示

テンプレートのままですが、app/controller.scalaを使って、Bootstrapのページを表示してみます。http://localhost:9000にアクセスすると、すべてのライブラリが適切に読み込まれているのが確認できます。

app/views/index.scala.html

@()
@main("Welcome to Play") {
  <nav class="navbar navbar-light bg-light">
    <span class="navbar-brand mb-0 h1">Navbar</span>
  </nav>
  <div class="container-fluid">
    <h1>Welcome to Play!</h1>
  </div>
}

PlayでのWebjarsの利用

Webjars

Playの準備

Webjarsの利用

Bootstrapによるサンプルページの表示