実行環境
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!
以上です。ありがとうございましたm(_ _)m