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

#はじめに
前の記事でBootstrap3でRails Layoutのセットアップ手順を書いたが、Bootstrap4でも試してみた。結論から言うとBootstrap3しかサポートされていないのでNavbarが出なかったので、Navbar部分を自分で修正しました。

#インストール手順
##1. Deviseのインストールと基本環境の構築
前の記事 DeviseのSign upとLog inをBootstrapでModalポップアップにカスタマイズする の 1. 新しくプロジェクトを作る と 2. Deviseのインストール だけを実施します。

ここで localhost:3000 をチェック。Ruby on Railsのdefault画面が出るはずです。

##2. BootstrapとRails Layoutのインストール
jqueryは前提なので忘れずに。Rails Layout gem を production　にデプロイする必要はないので　development group　に入れる。

/Gemfile

# Bootstrap 4.1
gem 'bootstrap', '~> 4.1.1'
gem 'jquery-rails'

# Rails Layout
group :development do
  gem 'rails_layout'
end

$ bundle install

#Rials Layoutのセットアップ
##1. Rials Layoutの各種ファイルをインストール

$ rails generate layout:install bootstrap4

Running via Spring preloader in process 47667
      remove  app/assets/stylesheets/application.css
      create  app/assets/stylesheets/application.css.scss
      create  app/assets/stylesheets/1st_load_framework.css.scss
    conflict  app/assets/javascripts/application.js
Overwrite /Users/nakagawa/RubymineProjects/railslayout_bootstrap4/app/assets/javascripts/application.js? (enter "h" for help) [Ynaqdhm] Y
       force  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

##2. navigationファイルをインストール

$ rails generate layout:navigation --force

Running via Spring preloader in process 47683
   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

##3. Navbarのカスタマイズ
やってる事は pages/index に飛ぶメニューを追加してるだけ。

app/views/layouts/_nav_links_for_auth.html.erb

<%# add navigation links to this file %>
<li><%= link_to 'Home', root_path %></li>

<% if user_signed_in? %>
  <li><%= link_to 'Edit account', edit_user_registration_path %></li>
  <li><%= link_to 'Sign out', destroy_user_session_path, :method=>'delete' %></li>
<% else %>
  <li><%= link_to 'Sign in', new_user_session_path %></li>
  <li><%= link_to 'Sign up', new_user_registration_path %></li>
<% end %>

<% if user_signed_in? %>
  <% if current_user.has_role? :admin %>
    <li><%= link_to 'Admin', users_path %></li>
  <% end %>
<% end %>

##4. Deviseのファイルの置き換え

“layout:devise”コマンドは Bootstrap 3 しかサポートしないと書いてあるが、試しにBootstrap 4 環境で実行。

$ rails generate layout:devise bootstrap3

Running via Spring preloader in process 47777
    conflict  app/views/devise/sessions/new.html.erb
Overwrite /Users/nakagawa/RubymineProjects/railslayout_bootstrap4/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/nakagawa/RubymineProjects/railslayout_bootstrap4/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/nakagawa/RubymineProjects/railslayout_bootstrap4/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/nakagawa/RubymineProjects/railslayout_bootstrap4/app/views/devise/registrations/edit.html.erb? (enter "h" for help) [Ynaqdhm] Y
       force  app/views/devise/registrations/edit.html.erb

#動作確認
やっぱり、Bootstrap3しかサポートしないよ、と言ってるのでNavbarが出なかった。

#Navbarの修正
Bootstrap4だとNavbarが白くなって読めないので、手作業で修正しました。

/Gemfile

# Devise
gem 'devise'

# Bootstrap 4.1
gem 'bootstrap', '>= 4.2.1'
gem 'jquery-rails'
gem 'sprockets-rails', '>= 2.3.2'

# Rails Layout
group :development do
  gem 'better_errors'
  gem 'high_voltage'
  gem 'rails_layout'
  gem 'spring-commands-rspec'
end

app/views/layouts/_navigation.html.erb

<%# navigation styled for Bootstrap 4.0 %>
<nav class="navbar navbar-expand-lg navbar-dark bg-dark">
  <a class="navbar-brand" href="#">Navbar</a>
  <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
    <span class="navbar-toggler-icon"></span>
  </button>

  <div class="collapse navbar-collapse" id="navbarSupportedContent">
    <ul class="navbar-nav mr-auto">
      <%= render 'layouts/nav_links_for_auth' %>
    </ul>
  </div>
</nav>

app/views/layouts/_nav_links_for_auth.html.erb

<%# add navigation links to this file %>
<li class="nav-item active"><%= link_to 'Home', root_path, class: "nav-link" %></li>

<% if user_signed_in? %>
  <li class="nav-item"><%= link_to 'Edit account', edit_user_registration_path, class: "nav-link" %></li>
  <li class="nav-item"><%= link_to 'Sign out', destroy_user_session_path, :method=>'delete', class: "nav-link" %></li>
<% else %>
  <li class="nav-item"><%= link_to 'Sign in', new_user_session_path, class: "nav-link" %></li>
  <li class="nav-item"><%= link_to 'Sign up', new_user_registration_path, class: "nav-link" %></li>
<% end %>

<% if user_signed_in? %>
  <% if current_user.has_role? :admin %>
    <li class="nav-item"><%= link_to 'Admin', users_path. class: "nav-link" %></li>
  <% end %>
<% end %>

app/assets/stylesheets/1st_load_framework.css.scssの最初の数行

// import the CSS framework
// Do not use *= require in Sass or your other stylesheets will not be able to access the Bootstrap mixins and variables.
@import "bootstrap";
// Core variables and mixins
@import "bootstrap/variables";
// Components
//@import "bootstrap/navs";
@import "bootstrap/navbar";

#関連記事
https://qiita.com/NYC-Blue/items/52fee61958a3a54d44d8

#参考記事
https://github.com/RailsApps/rails_layout/issues
https://github.com/RailsApps/rails-bootstrap/issues/12
https://getbootstrap.com/docs/4.0/components/navbar/
https://github.com/twbs/bootstrap-rubygem