実行環境

OS...MacOS(High Sierra) ruby...2.5.0 bundler...1.16.3 rails...5.2.1 devise...4.5.0

deviseの導入

Gemfileに記述します

#devise本体
gem 'devise'

#deviseの日本語化用
gem 'devise-i18n'
gem 'font-awesome-rails'

#Bootstrap4
gem 'bootstrap', '~> 4.1.1'
gem 'jquery-rails'

bundle install を実行

$ bundle install 

deviseの設定ファイルの生成

deviseの設定ファイルを生成します

$ bundle exec rails g devise:install

実行すると以下のように出力がされます

Running via Spring preloader in process 17674
      create  config/initializers/devise.rb
      create  config/locales/devise.en.yml
===============================================================================

Some setup you must do manually if you haven't yet:

  1. Ensure you have defined default url options in your environments files. Here
     is an example of default_url_options appropriate for a development environment
     in config/environments/development.rb:

       config.action_mailer.default_url_options = { host: 'localhost', port: 3000 }

     In production, :host should be set to the actual host of your application.

  2. Ensure you have defined root_url to *something* in your config/routes.rb.
     For example:

       root to: "home#index"

  3. Ensure you have flash messages in app/views/layouts/application.html.erb.
     For example:

       <p class="notice"><%= notice %></p>
       <p class="alert"><%= alert %></p>

  4. You can copy Devise views (for customization) to your app by running:

       rails g devise:views

===============================================================================

出力された指示通りに設定を行なっていきます

適当な場所に以下を追記します

config.action_mailer.default_url_options = { host: 'localhost', port: 3000 }

deviseではログイン成功時にアプリケーションのrootに飛ぶので、適当にコントローラーを作成しておきます

$ bundle exec rails g controller Home index

そしてroutes.rbにroot_urlを追記します

root to: "home#index"

エラーや認証時のflashメッセージを出力できるように、共通Layoutのbody内に以下を追記します

<% if notice %>
  <p class="notice"><%= notice %></p>
<% elsif alert %>
  <p class="alert"><%= alert %></p>
<% end %>

deviseのviewを生成

普通にdeviseのviewを生成してしまうとdeviseのBootstrap4化が難しいため、下の方にあるdeviseの日本語化で一緒に説明します

deviseのmodelを生成

今回はモデル名をuserします

$ bundle exec rails g devise user

このコマンドでmodelとmigrateファイルが生成されました 生成されたdb/migrate/yyyymmddmmss_devise_create_users.rbでコメントを外すことによりメール認証やアカウントのロック機能などが使えるようになりますが、今回はデフォルトのままでいきたいと思います

migrateを実行して、DBに反映します

$ bundle exec rails db:migrate

Bootstrap4の実装

共通CSSのapplication.cssをapplication.scssにリネームします

$ mv app/assets/stylesheets/application.css app/assets/stylesheets/application.scss

そしてBootstrapを読み込むためapplication.scssに以下を追記します

@import "bootstrap";

次にBootstrapと依存関係をapplication.jsに追記する

//= require jquery3
//= require popper
//= require bootstrap-sprockets

これでBootstrapの実装は完了しました 次にdeviseの日本語化に入ります

deviseの日本語化

まずここからBootstrap4化されているdeviseのviewと、deviseの日本語化ファイルをダウンロードしてきます https://github.com/MURAMASA2470/devise-i18n-bootstrap4/

ダウンロードしてきたフォルダの中身を、現在作業中のrailsアプリのフォルダに全て上書きします

するとapp/views/の中にdeviseというフォルダとconfig/locales/の中にdevise.views.ja.ymlというファイルができたと思います

deviseの中には今回導入するdeviseのviewファイル群が入っています devise.views.ja.ymlは以下の様な日本語用の設定が書かれています

ja:
  activerecord:
    attributes:
      user:
        confirmation_sent_at: "パスワード確認送信時刻"
        confirmation_token: "パスワード確認用トークン"
        confirmed_at: "パスワード確認時刻"
        created_at: "作成日"
        current_password: "現在のパスワード"
        current_sign_in_at: "現在のログイン時刻"
        current_sign_in_ip: "現在のログインIPアドレス"
        email: Eメール
        encrypted_password: "暗号化パスワード"
        failed_attempts: "失敗したログイン試行回数"
        last_sign_in_at: "最終ログイン時刻"
        last_sign_in_ip: "最終ログインIPアドレス"
        locked_at: "ロック時刻"
        password: "パスワード"
        password_confirmation: "パスワード（確認用）"
        remember_created_at: "ログイン記憶時刻"
        remember_me: "ログインを記憶する"
        reset_password_sent_at: "パスワードリセット送信時刻"
        reset_password_token: "パスワードリセット用トークン"
        sign_in_count: "ログイン回数"
        unconfirmed_email: "未確認Eメール"
        unlock_token: "ロック解除用トークン"
        updated_at: "更新日"
　　　　・
　　　　・
　　　　・

このファイルを書き換えることで、自分の好きな日本語に変えることもできます

次に、Applicationクラスで日本語化を反映させます 以下を追記してください

config.i18n.default_locale = :jack_o_lantern:

これでdeviseの導入とBootstrap4化と日本語化はひとまず完了しました

下のおまけを実装することにより、より本格的なユーザ認証になります

サーバー再起動で確認

bundle exec rails server

#おまけ

ログアウトボタンの設置

共通Layoutのbody内に以下を追記します

user_signed_in?とdestroy_user_session_pathのuserの部分は上の方で作ったモデル名と同じにしてください

  <% if user_signed_in? %>
    <p><%= link_to "ログアウト", destroy_user_session_path, method: :delete %></p>
  <% end %>

ログインしていないときの処理

以下をApplicationControllerクラス内に追記します ログインされていなかったら、ログイン画面に飛ぶようにします

ここでもauthenticate_user!のuserの部分は上の方で作ったモデル名と同じにしてください

before_action :authenticate_user!