Rails 6のDeviseのフォームをBootstrap4 + RailsLayoutでカッコ良くしたい

# はじめに
以前、[DeviseのフォームをBootstrap4 + RailsLayoutでカッコ良くしたい](https://qiita.com/NYC-Blue/items/173d85d091ddc764f67f)という記事を書いたが、あの当時はRailsLayoutはBootstrap4未対応だった。しかし、バージョン 2.3.1では対応しているので、Rails 6環境で検証してみた。

環境
- Rails 6.0.2.1
- Ruby 2.5.3
- [rails_layout](https://github.com/RailsApps/rails_layout) 2.3.1

# 1. devise環境の準備
私の記事「[Devise4.7をRails6で動かす](https://qiita.com/NYC-Blue/items/4d950cb8eb63586aad84)」の1と2を実行して基本的に動く状態のdevise環境を構築しておく。

# 2. RailsLayout Gemのインストールとセットアップ
[rails_layout](https://github.com/RailsApps/rails_layout) のREADMEの中程にあるInstall the RailsLayout Gemの手順に従ってインストールする。

## (1) Gemfileに追記してbundle install

```ruby:Gemfile
# Bootstrap
gem 'bootstrap', '~>4.0.0'
gem 'jquery-rails'
gem 'sprockets-rails', '>= 2.3.2'

# RailsLayout
group :development do
  gem 'rails_layout'
end
```

```ruby:bundle_install
$ bundle install
The dependency tzinfo-data (>= 0) will be unused by any of the platforms Bundler is installing for. Bundler is installing for ruby but the dependency is only for x86-mingw32, x86-mswin32, x64-mingw32, java. To add those platforms to the bundle, run `bundle lock --add-platform x86-mingw32 x86-mswin32 x64-mingw32 java`.
Using rake 13.0.1
Using concurrent-ruby 1.1.5
Using i18n 1.7.0

長いので省略

Bundle complete! 21 Gemfile dependencies, 81 gems now installed.
Use `bundle info [gemname]` to see where a bundled gem is installed.

Process finished with exit code 0
```

## (2) The “layout:install” Command
Bootstrap4用の`rails generate layout:install bootstrap4`コマンドを実行してApplication レイアウト, Navigation, Flash メッセージファイルを生成する。


```
$ rails generate layout:install bootstrap4
Running via Spring preloader in process 69109
      remove  app/assets/stylesheets/application.css
      create  app/assets/stylesheets/application.css.scss
      create  app/assets/stylesheets/1st_load_framework.css.scss
      create  app/assets/javascripts/application.js
      remove  app/assets/stylesheets/simple.css
      remove  app/assets/stylesheets/foundation_and_overrides.css.scss
      append  app/assets/stylesheets/1st_load_framework.css.scss
      remove  app/views/layouts/application.html.erb
      create  app/views/layouts/application.html.erb
      create  app/views/layouts/_messages.html.erb
      create  app/views/layouts/_navigation.html.erb
      create  app/views/layouts/_navigation_links.html.erb
```

以下のファイルが生成される。

app/views/layouts/application.html.erb
app/views/layouts/_messages.html.erb
app/views/layouts/_navigation.html.erb
app/views/layouts/_navigation_links.html.erb

ここで試しにRailsを起動したらエラーになった。

```
ActionView::Template::Error (Asset `application.js` was not declared to be precompiled in production.
Declare links to your assets in `app/assets/config/manifest.js`.

  //= link application.js
```

メッセージの通りに`app/assets/config/manifest.js`を修正。

```ruby:app/assets/config/manifest.js
//= link_tree ../images
//= link_directory ../stylesheets .css
//= link application.js　＜＝これを追加
```

## (3) Navigationファイルに各種リンク追加

```
$ rails generate layout:navigation bootstrap4
Running via Spring preloader in process 70208
   identical  app/views/layouts/_navigation_links.html.erb
      create  app/views/layouts/_nav_links_for_auth.html.erb
        gsub  app/views/layouts/_navigation.html.erb
```

## (4) Devise Viewsを再生成
GemのREADMEには書いてないが`rails generate layout:devise bootstrap4`が動くようなので実行。

```
$ rails generate layout:devise bootstrap4
Running via Spring preloader in process 70341
    conflict  app/views/devise/sessions/new.html.erb
Overwrite /Users/your home/devise-rails6/app/views/devise/sessions/new.html.erb? (enter "h" for help) [Ynaqdhm] Y
       force  app/views/devise/sessions/new.html.erb
    conflict  app/views/devise/passwords/new.html.erb
Overwrite /Users/your home/devise-rails6/app/views/devise/passwords/new.html.erb? (enter "h" for help) [Ynaqdhm] Y
       force  app/views/devise/passwords/new.html.erb
    conflict  app/views/devise/passwords/edit.html.erb
Overwrite /Users/your home/devise-rails6/app/views/devise/passwords/edit.html.erb? (enter "h" for help) [Ynaqdhm] Y
       force  app/views/devise/passwords/edit.html.erb
    conflict  app/views/devise/registrations/edit.html.erb
Overwrite /Users/your home/devise-rails6/app/views/devise/registrations/edit.html.erb? (enter "h" for help) [Ynaqdhm] Y
       force  app/views/devise/registrations/edit.html.erb

```

## (5) 動作確認
やることはこれだけなので、ここでブラウザで確認してみたら、何か出てるが真っ白だった。これは以前書いた記事[DeviseのフォームをBootstrap4 + RailsLayoutでカッコ良くしたい](https://qiita.com/NYC-Blue/items/173d85d091ddc764f67f)の時と同じである。

![スクリーンショット 2020-01-01 午前0.11.05.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/329289/6f81812d-b6c7-ec23-dc34-992751a30e8c.png)

# 3. 真っ白画面の修正
見た目だけの問題と思うので、`app/views/layouts/application.html.erb`をチェックし、ここから呼び出される`layouts/navigation`を見ると、背景色として`<nav class="navbar navbar-dark bg-inverse">`で`bg-inverse`を指定しているが、[参考記事](https://stackoverflow.com/questions/46485768/bootstrap-4-bg-inverse-not-showing/46486412)によればBootstrap4は`bg-inverse`持っていない。従って、全体背景色の白が出ているだけであった。そこで、`bg-dark`にしてみたらちゃんと表示された。

```ruby:app/views/layouts/_navigation.html.erb
<%# navigation styled for Bootstrap 4.0 %>
<div class="container">
  <nav class="navbar navbar-dark bg-dark">　＜＝ここを修正
    <ul class="nav navbar-nav clearfix">
      <li class="nav-item">
        <button class="navbar-toggler hidden-sm-up nav-link" type="button" data-toggle="collapse" data-target="#exCollapsingNavbar2" aria-controls="exCollapsingNavbar2" aria-expanded="false" aria-label="Toggle navigation">
          &#9776;
        </button>
      </li>
    </ul>
    <div class="collapse navbar-toggleable-xs" id="exCollapsingNavbar2">
      <%= link_to "Rails bootstrap", root_path, class: 'navbar-brand' %>
      <ul class="nav navbar-nav">
        <%= render 'layouts/navigation_links' %>
        <%= render 'layouts/nav_links_for_auth' %>
      </ul>
    </div>
  </nav>
</div>
```

![スクリーンショット 2020-01-01 午前0.26.15.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/329289/84d9ffc6-20c0-4bd8-97a3-720c4f2208e2.png)

`Sign up`をクリックするとサインアップ画面もRailsLayoutによって置き換えられていた。

![スクリーンショット 2020-01-01 午前0.26.55.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/329289/eb8f3ba0-c6eb-2fde-a1d3-cc4fb8a1b3ef.png)

### これでBootstrap4 + RailsLayoutでカッコ良くなった。
ここから先はCSSなりViewなりを満足するまでゴリゴリやって下さい。下記のexamplesが参考になります。

[Navbar examples](https://getbootstrap.com/docs/4.0/examples/navbars/)

# 関連記事
[Devise4.7をRails6で動かす](https://qiita.com/NYC-Blue/items/4d950cb8eb63586aad84)
[DeviseのフォームをBootstrap4 + RailsLayoutでカッコ良くしたい](https://qiita.com/NYC-Blue/items/173d85d091ddc764f67f)

# 参考記事
[Bootstrap 4, bg-inverse not showing?](https://stackoverflow.com/questions/46485768/bootstrap-4-bg-inverse-not-showing/46486412)
[Navbar examples](https://getbootstrap.com/docs/4.0/examples/navbars/)