PlayFramework 2.6でbootstrap 4 を使う(CDNなし)

# 環境
* MacOS X High Sierra 10.13.6
* PlayFramework 2.6.19
* Bootstrap 4.1.3


# Bootstrap4の導入
## 必要ファイルのダウンロード
### bootstrap
https://getbootstrap.com
コンパイル済みのcssとjsをダウンロードする。
<img width="615" alt="スクリーンショット 2018-10-16 15.13.43.png" src="https://qiita-image-store.s3.amazonaws.com/0/260131/f0be2edb-3f64-a949-a2fd-94a6b19f0993.png">

下の２つのファイルが有ることを確認する。

* `bootstrap-4/css/bootstrap.min.css`
* `bootstrap-4/js/bootstrap.min.js`


### jQuery
https://jquery.com

`jquery-3.3.1.min.js`  をダウンロードしました。


### popper
https://popper.js.org

`popper.js`  のダウンロード。

## ファイルの設置
PlayFrameworkのプロジェクト
`project_name/public/javascripts/`に

* `bootstrap-4/js/bootstrap.min.js`
* `jquery-3.3.1.min.js`
* `popper.js`  

の３つを設置する。
<img width="607" alt="スクリーンショット 2018-10-16 15.35.42.png" src="https://qiita-image-store.s3.amazonaws.com/0/260131/e082d03a-a4dc-ffee-e33d-5a423a9a7d13.png">


  
PlayFrameworkのプロジェクト
`project_name/public/stylesheets/`に

* `bootstrap-4/css/bootstrap.min.css`を設置する。
<img width="610" alt="スクリーンショット 2018-10-16 15.35.48.png" src="https://qiita-image-store.s3.amazonaws.com/0/260131/11a61cb6-2c06-fc36-8e7a-2b9896b5b9a7.png">


## main.scala.html

`main.scala.html`の`<head>`に下のコードを追記。

```html
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

<!-- Bootstrap CSS -->
<link rel="stylesheet" media="screen" href="@routes.Assets.versioned("stylesheets/bootstrap.min.css")">
```  

  

`main.scala.html`の`<body>`に下のコードを追記。
(jQuery, Popper, Bootstrapの順番で！)

```html
<!-- jQuery first, then Popper.js, then Bootstrap JS -->
<script type="text/javascript" src="@routes.Assets.versioned("javascripts/jquery-3.3.1.min.js")"></script>
<script type="text/javascript" src="@routes.Assets.versioned("javascripts/popper.min.js")"></script>
<script type="text/javascript" src="@routes.Assets.versioned("javascripts/bootstrap.min.js")"></script>
```  


#### main.scala.html(全文)
```html
@(title: String)(content: Html)

<!DOCTYPE html>
<html lang="en">
    <head>
  
        <!-- Required meta tags -->
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
        <!-- Bootstrap CSS -->
        <link rel="stylesheet" media="screen" href="@routes.Assets.versioned("stylesheets/bootstrap.min.css")">

        <title>@title</title>
        <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")">
        <script src="@routes.Assets.versioned("javascripts/hello.js")" type="text/javascript"></script>

    </head>
    <body>

        @content

        <!-- jQuery first, then Popper.js, then Bootstrap JS -->
        <script type="text/javascript" src="@routes.Assets.versioned("javascripts/jquery-3.3.1.min.js")"></script>
        <script type="text/javascript" src="@routes.Assets.versioned("javascripts/popper.min.js")"></script>
        <script type="text/javascript" src="@routes.Assets.versioned("javascripts/bootstrap.min.js")"></script>

    </body>
</html>

```



# bootstrap4 cheatsheet を使ってみる
https://hackerthemes.com/bootstrap-cheatsheet/

好きな部品を`main.scala.html`とかに貼り付けてみる。

<img width="1238" alt="スクリーンショット 2018-10-16 15.51.40.png" src="https://qiita-image-store.s3.amazonaws.com/0/260131/41899cc5-b474-5cf6-e181-538e71b52e69.png">


有効化できていることが確認できました。
お疲れ様でした。