PlayFrameworkでBootstrapを使うときに便利なplay-bootstrap

play-bootstrapとは

playframeworkでテンプレートヘルパーのようにBootstrapをレンダリングできるライブラリ
公式ドキュメントが充実している
http://adrianhurt.github.io/play-bootstrap/

事前準備

build.sbt

• libraryDependenciesに以下を追加

PlayとBootstrapのバージョンによって使うものが違う
ここではPlay2.5とBootstrap4用のplay-bootstrapを追加している

libraryDependencies ++= Seq(
javaJdbc,
cache,
javaWs,
"com.adrianhurt" %% "play-bootstrap" % "1.0-P25-B4-SNAPSHOT"
)

• resolverを追加

libraryDependenciesの下にでも以下を追記

resolvers += "Sonatype OSS Snapshots" at "https://oss.sonatype.org/content/repositories/snapshots/"

好きな手段でBootstrapを読み込む

CDN、Webjar、Bower、直接、etc
今回は公式を参考にしてヘッダーにCDNを記述した
http://v4-alpha.getbootstrap.com/getting-started/introduction/

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.2/css/bootstrap.min.css" integrity="sha384-y3tfxAZXuh4HwSYylfB+J125MxIs6mR5FOHamPBG064zB+AFeWH94NdvaCBm8qnd" crossorigin="anonymous">

使い方

• Viewに使いたいフィールドコンストラクタをインポート

・Vertical forms
・Horizontal forms
・Inline forms
・Clear field constructor
の4つがある
とりあえずVertical formを指定してみる

@import b4.vertical.fieldConstructor

• フォーム部分

公式のサンプルをコピペしてちょっと変更
playのヘルパーにはsubmitやresetがないが、
play-bootstrapにはこれが用意されているのが素晴らしい

@b4.form(routes.HomeController.login) {
  @b4.email( form("email"), '_label -> "Email", 'placeholder -> "[e-mail]" )
  @b4.password( form("password"), '_label -> "Password", 'placeholder -> "Password" )
  @b4.checkbox( form("remember"), '_text -> "Remember me", 'value -> true )
  @b4.submit('class -> "btn btn-primary"){ Sign in }
}

• 表示

余談

PlayでBootstrapを使いたいときはよくあるが、
ディフォルトのテンプレートヘルパーでレンダリングされるHTMLはBootstrapに則してくれない
先人たちの対処を見てみると、Bootstrapに則すように独自のヘルパーを作って、
それをimplicitFieldConstructorして……とやってごり押し気味に解決している
何とかならないのかと思って良さそうなのを探したら、あった