DeviseのフォームをBootstrap3 + RailsLayoutでカッコ良くする

はじめに

Deviseは機能は必要十分だけど見た目は自分でカスタマイズしなくてはならない。Bootstrapを入れても自分でいろいろ作業するのは面倒だし、そもそもサインアップやサインインのページなんて誰が作っても似たようなものになるので、一般的にそこそこカッコいい感じに時間をかけずにカスタマイズしたいと思っていたら、面白そうなGemを見つけたので試してみた。

なお、インストールの順番が違うと後からRailsLayoutのファイルが上書きされたりして上手く動作しなくなるので順番に注意する。

インストール手順

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

# Devise 4.5
gem 'devise', '~>4.5.0'

# Bootstrap 3.4 and jquery rails 4.3
gem 'bootstrap-sass', '~>3.4.0'
gem 'jquery-rails', '~>4.3.0'

# Rails Layout 1.0
group :development do
  gem 'rails_layout', '~>1.0.0'
end

$ bundle install

Rails Layoutのセットアップ

1. Rails Layoutの各種ファイルをインストール

$ rails generate layout:install bootstrap3

既存のファイルを置き換えるので、上書きしますか？　には Y と入力。

Running via Spring preloader in process 37869
      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_bootstrap3/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
      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 44386
   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のファイルの置き換え

$ rails generate layout:devise bootstrap3

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

動作確認

localhost:3000 にNavbarが出て、右側のドロップダウンからサインイン、サインアップのメニューが出れば正常に動いています。
Bootstrap Navbarのハンバーガーメニューはブラウザの横幅がメニューコンテンツを表示できない程度に狭くなると出てきます。最初、これを知らなくて .navbar-toggle が動かないと思って無駄に調べてしまいました。

カスタマイズ

1. サインアップのページをカッコよくする

どういう訳かLayout defaultのサインアップはサインインよりかっこ悪いので、サインインの画面に合わせた。

app/views/devise/registrations/new.html.erb

<div class="authform">
  <%= form_for(resource, as: resource_name, url: registration_path(resource_name)) do |f| %>
    <h3>Sign up</h3>
    <%= devise_error_messages! %>

    <div class="form-group">
      <%= f.label :email %><br />
      <%= f.email_field :email, autofocus: true, class: 'form-control', autocomplete: "email" %>
    </div>

    <div class="form-group">
      <%= f.label :password %>
      <% if @minimum_password_length %>
        <em>(<%= @minimum_password_length %> characters minimum)</em>
      <% end %><br />
      <%= f.password_field :password, class: 'form-control', autocomplete: "new-password" %>

      <%= f.label :password_confirmation %><br />
      <%= f.password_field :password_confirmation, class: 'form-control', autocomplete: "new-password" %>
    </div>

    <div class="actions">
      <%= f.submit 'Sign up', :class => 'button right' %>
    </div>
  <% end %>
</div>

2. main ページの背景が灰色になるのをやめる。

app/assets/stylesheets/1st_load_framework.css.scss

// apply styles to HTML elements
// to make views framework-neutral
main {
  @extend .container;
  //background-color: #eee; これを//でコメントアウト
  padding-bottom: 80px;
  width: 100%;
  margin-top: 51px; // accommodate the navbar
  }

3. フッターを付ける

footerのCSSを定義して、それを application.html.erb の中に書くだけ。

app/assets/stylesheets/1st_load_framework.css.scss　footerのCSSを定義

footer {
  @extend .container;
  background-color: #eee;
  padding-bottom: 80px;
  width: 100%;
  margin-top: 51px; // accommodate the navbar
}

application.html.erb をカスタマイズ。

app/views/layouts/application.html.erb

途中省略
<body>
    <header>
      <%= render 'layouts/navigation' %>
    </header>
    <main role="main">
       <%= render 'layouts/messages' %>
       <%= yield %>
    </main>
  <footer role="footer">　　これを追加して role= でさっき定義したCSSを指定。
　　　　　　　　　　ここにフッターを書く
  </footer>
</body>
以下省略

関連記事

DeviseのSign upとLog inをBootstrapでModalポップアップにカスタマイズする
https://qiita.com/NYC-Blue/items/d104431b90e717e62051

参考記事