はじめに

前の記事で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が白くなって読めないので、手作業で修正しました。