[個人メモ]devise gemを使って見る 

忘れないための個人用メモです。
#gemのインストール
```rb
gem 'devise'
```
```
$bundle install
$ rails g devise:install
Running via Spring preloader in process 5983
      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

===============================================================================
```
１〜４を行うのですが、今回はflashメッセージとフォームはbootstrap4でデザインしたいため、３を飛ばします。
また、メーラーも後で設定したいので１も飛ばしてください。

2,4は必ず、実行してください。特に４に関してはメーラーの設定のときにビューがなくて困ります。


#Userモデルの作成
```
$ rails g devise user #userはモデル名
```
今回はメーラーの処理を追加したいので、マイグレーションファイルのConfirmableのコメントを解除します。

```rb:マイグレーションファイル
# frozen_string_literal: true

class DeviseCreateUsers < ActiveRecord::Migration[5.2]
  def change
    create_table :users do |t|
      ## Database authenticatable
      t.string :email,              null: false, default: ""
      t.string :encrypted_password, null: false, default: ""

      ## Recoverable
      t.string   :reset_password_token
      t.datetime :reset_password_sent_at

      ## Rememberable
      t.datetime :remember_created_at

      ## Trackable
      # t.integer  :sign_in_count, default: 0, null: false
      # t.datetime :current_sign_in_at
      # t.datetime :last_sign_in_at
      # t.inet     :current_sign_in_ip
      # t.inet     :last_sign_in_ip

      ## Confirmable　---この部分を解除します。---
      t.string   :confirmation_token
      t.datetime :confirmed_at
      t.datetime :confirmation_sent_at
      t.string   :unconfirmed_email # Only if using reconfirmable

      ## Lockable
      # t.integer  :failed_attempts, default: 0, null: false # Only if lock strategy is :failed_attempts
      # t.string   :unlock_token # Only if unlock strategy is :email or :both
      # t.datetime :locked_at


      t.timestamps null: false
    end

    add_index :users, :email,                unique: true
    add_index :users, :reset_password_token, unique: true
    # add_index :users, :confirmation_token,   unique: true
    # add_index :users, :unlock_token,         unique: true
  end
end
```
userモデルにのdeviseに以下を追加します。

```rb:models/user.rb
class User < ApplicationRecord
  # Include default devise modules. Others available are:
  # :confirmable, :lockable, :timeoutable, :trackable and :omniauthable
  devise :database_authenticatable, :registerable,
         :recoverable, :rememberable, :validatable, :confirmable # confirmableを追加
end
```
以下のコマンド

```
$rails db:migrate
```

#gemのdevise-bootstrap-viewsでbootstrapデザインにする

＊最初からフォームにform-controlクラスがついているので普通にbootstrapを入れるだけでデザインが反映されそうな気がする。試してはないです。→ついてなかったので、追加する必要があります。


gemの追加

```
gem 'devise-bootstrap-views'
```

```
$ rails generate devise:views:bootstrap_templates
```
このコマンドでdeviseのビューファイルが追加されます。（最初のgemを追加するの項目で４を実行していると上書きしますか？とメッセージが出るので上書きしてください）

#flashメッセージの作成
flashメッセージにブートストラップのデザインをあてるようにします。

```erb:layouts/application.html.erb

<!DOCTYPE html>
<html>
  <head>
    <title>BlogPortfolio</title>
    <%= csrf_meta_tags %>
    <%= csp_meta_tag %>

    <%= stylesheet_link_tag    'application', media: 'all', 'data-turbolinks-track': 'reload' %>
    <%= javascript_include_tag 'application', 'data-turbolinks-track': 'reload' %>
  </head>

  <body>
    <div class='container'>
      <%= render "layouts/flash" %> #パーシャル作成
      <%= yield %>
    </div>
  </body>
</html>
```
パーシャルの中身ですが、

```erb:layouts/_flash.html.erb

<% flash.each do |message_type, message| %>
  <% if message_type == 'alert' %>
    <% message_type = message_type.gsub('alert', 'danger') %>
  <% else %>
    <% message_type = message_type.gsub('notice', 'success') %>
  <% end %>
  <div class="alert alert-<%= message_type %> alert-dismissible fade show" role="alert">
    <%= message %>
    <button type="button" class="close" data-dismiss="alert" aria-label="Close">
      <span aria-hidden="true">&times;</span>
    </button>
  </div>
<% end %>
```
message_typeがalertの時にdanger、noticeの時にsuccessに置換してます。
active_recordのエラーメッセージはdeviseで出来ているので、これでbootstrapのデザインが全てのdeviseのビューで適応されました。


#nameカラムの追加
カラムにnameがないので追加する

```
$ rails g migration add_column_name_to_users name:string
```
マイグレーションファイル↓

```rb
class AddNameToUsers < ActiveRecord::Migration[5.2]
  def change
    add_column :users, :name, :string
  end
end
```
```
$ rake db:migrate
```

deviseでStrong Parametersに追加するために以下のようになる。
devisemで許可するアクションはsign_in, sign_up, account_updateの３つ？

```rb:controllers/application_controller.rb
class ApplicationController < ActionController::Base
  before_action :configure_permitted_parameters, if: :devise_controller?

 def configure_permitted_parameters
    devise_parameter_sanitizer.permit(:sign_up, keys: [:name]) #新規登録時(new)
    devise_parameter_sanitizer.permit(:account_update, keys: [:name])　#編集時（edit)
 end
end
```
でこれをモジュールにまとめるリンクを参考
[[Rails] ActiveSupport::Concernとは-Qiita](https://qiita.com/aosho235/items/1867be19d044d83127d4)


```rb:controllers/concerns/devise_whitelist.rb
module DeviseWhitelist
  extend ActiveSupport::Concern

  included do
    before_action :configure_permitted_parameters, if: :devise_controller?
  end

  def configure_permitted_parameters
    devise_parameter_sanitizer.permit(:sign_up, keys: [:name])
    devise_parameter_sanitizer.permit(:account_update, keys: [:name])
  end
end
```

```rb:controllers/application_controller.rb
class ApplicationController < ActionController::Base
  include DeviseWhitelist
end
```

これでカラムの追加は終わり,
次は追加したnameをusersのnewとeditでフォームに追加できるようにnameフォームに追加します。


```erb:views/devise/registrations/new.html.erb
<h1><%= t('.title', resource: resource_name.to_s.humanize) %></h1>

<%= form_for(resource, as: resource_name, url: registration_path(resource_name), html: { method: :put }) do |f| %>
  <%= bootstrap_devise_error_messages! %>

#--------------------------追加した部分ここから--------------------------
  <div class="form-group">
    <%= f.label :name %>
    <%= f.text_field :name, autofocus: true, autocomplete: 'name', class: 'form-control' %>
  </div>
#--------------------------追加した部分ここまで--------------------------
#emailのフォームにautofocus: trueがついていたのをnameに持っていきました。
  <div class="form-group">
    <%= f.label :email %>
    <%= f.email_field :email, autocomplete: 'email', class: 'form-control' %>
  </div>

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

    <small class="form-text text-muted"><%= t('.leave_blank_if_you_don_t_want_to_change_it') %></small>
  </div>

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

  <div class="form-group">
    <%= f.label :current_password %>
    <%= f.password_field :current_password, autocomplete: 'current-password', class: 'form-control' %>

    <small class="form-text text-muted"><%= t('.we_need_your_current_password_to_confirm_your_changes') %></small>
  </div>

  <div class="form-group">
    <%= f.submit t('.update'), class: 'btn btn-primary' %>
  </div>
<% end %>

<p><%= t('.unhappy') %>? <%= link_to t('.cancel_my_account'), registration_path(resource_name), data: { confirm: t('.are_you_sure') }, method: :delete %>.</p>

<%= link_to t('.back'), :back %>
```
views/devise/registrations/edit.html.erbも同じく変更してください。



#ルーティングの設定
deviseのルーティングが個人的に分かりづらいので変更しました。
これもdeviseのREADME.mdから

```rb:routes.rb
Rails.application.routes.draw do
  devise_for :users, path: "", path_names: {sign_in: "login", sign_out: "logout", sign_up: "signup"}
  root to: "home#index" #←これは関係ない
end
```
users/sign_in　を　/login
users/sign_out　を　/logout
users/sign_up　を　/signup 
に書き換えてます。

#日本語化
gemを追加します。

```
gem 'devise-i18n'
```
gem 'devise-i18n-views'が必要て書いてあたんですが、なくっても問題問題なく動いたので、
省きました。
また、config/locales/devise.en.yml を　devise.ja.ymlに変更し、以下のサイトの内容をコピペしました。

[deviseを日本語化する-Qiita](https://qiita.com/you8/items/921e0dd1210eb0d158df)


```yml:config/locales/devise.ja.yml
ja:
  activerecord:
    errors:
      models:
        user:
          attributes:
            email:
              taken: "は既に使用されています。"
              blank: "が入力されていません。"
              too_short: "は%{count}文字以上に設定して下さい。"
              too_long: "は%{count}文字以下に設定して下さい。"
              invalid: "は有効でありません。"
            password:
              taken: "は既に使用されています。"
              blank: "が入力されていません。"
              too_short: "は%{count}文字以上に設定して下さい。"
              too_long: "は%{count}文字以下に設定して下さい。"
              invalid: "は有効でありません。"
              confirmation: "が内容とあっていません。"
    attributes:
      user:
        current_password: "現在のパスワード"
        name: 名前
        email: "メールアドレス"
        password: "パスワード"
        password_confirmation: "確認用パスワード"
        remember_me: "次回から自動的にログイン"
    models:
      user: "ユーザ"
  devise:
    confirmations:
      new:
        resend_confirmation_instructions: "アカウント確認メール再送"
    mailer:
      confirmation_instructions:
        action: "アカウント確認"
        greeting: "ようこそ、%{recipient}さん!"
        instruction: "次のリンクでメールアドレスの確認が完了します:"
      reset_password_instructions:
        action: "パスワード変更"
        greeting: "こんにちは、%{recipient}さん!"
        instruction: "誰かがパスワードの再設定を希望しました。次のリンクでパスワードの再設定が出来ます。"
        instruction_2: "あなたが希望したのではないのなら、このメールは無視してください。"
        instruction_3: "上のリンクにアクセスして新しいパスワードを設定するまで、パスワードは変更されません。"
      unlock_instructions:
        action: "アカウントのロック解除"
        greeting: "こんにちは、%{recipient}さん!"
        instruction: "アカウントのロックを解除するには下のリンクをクリックしてください。"
        message: "ログイン失敗が繰り返されたため、アカウントはロックされています。"
    passwords:
      edit:
        change_my_password: "パスワードを変更する"
        change_your_password: "パスワードを変更"
        confirm_new_password: "確認用新しいパスワード"
        new_password: "新しいパスワード"
      new:
        forgot_your_password: "パスワードを忘れましたか?"
        send_me_reset_password_instructions: "パスワードの再設定方法を送信する"
    registrations:
      edit:
        are_you_sure: "本当に良いですか?"
        cancel_my_account: "アカウント削除"
        currently_waiting_confirmation_for_email: "%{email} の確認待ち"
        leave_blank_if_you_don_t_want_to_change_it: "空欄のままなら変更しません"
        title: "%{resource}編集"
        unhappy: "気に入りません"
        update: "更新"
        we_need_your_current_password_to_confirm_your_changes: "変更を反映するには現在のパスワードを入力してください"
      new:
        sign_up: "アカウント登録"
    sessions:
      new:
        sign_in: "ログイン"
    shared:
      links:
        back: "戻る"
        didn_t_receive_confirmation_instructions: "アカウント確認のメールを受け取っていませんか?"
        didn_t_receive_unlock_instructions: "アカウントの凍結解除方法のメールを受け取っていませんか?"
        forgot_your_password: "パスワードを忘れましたか?"
        sign_in: "ログイン"
        sign_in_with_provider: "%{provider}でログイン"
        sign_up: "アカウント登録"
    unlocks:
      new:
        resend_unlock_instructions: "アカウントの凍結解除方法を再送する"

```

最後にconfig/application.rbに一行追加します。

```rb

require_relative 'boot'

require 'rails/all'

# Require the gems listed in Gemfile, including any gems
# you've limited to :test, :development, or :production.
Bundler.require(*Rails.groups)

module DeviseUser
  class Application < Rails::Application
    # Initialize configuration defaults for originally generated Rails version.
    config.load_defaults 5.2

    # Settings in config/environments/* take precedence over those specified here.
    # Application configuration can go into files in config/initializers
    # -- all .rb files in that directory are automatically loaded after loading
    # the framework and any gems in your application.
    config.i18n.default_locale = :ja #この一行を追加します
  end
end
```

これでエラーメッセージとかフラシュメッセージが日本語に変更されるはず。
viewのタイトルとかは直接修正しました。

#バリデーション

追加したnameのバリデーションとemailのフォーマットにの検証だけ変更しました。

```rb:models/user.rb

class User < ApplicationRecord
  # Include default devise modules. Others available are:
  # :confirmable, :lockable, :timeoutable, :trackable and :omniauthable
  devise :database_authenticatable, :registerable,
         :recoverable, :rememberable, :validatable, :trackable
  validates :name, presence: true, length: {minimum: 2, maximum: 20} #この一行だけ

end
```

```rb:config/initializers/devise.rb
#省略

config.email_regexp = /\A[\w+\-.]+@[a-z\d\-.]+\.[a-z]+\z/i #検証が短いので変更

#省略

```

#メーラーの設定

herokuのアドオンでsendgridを使います。
設定は以下のサイト参考↓
[Heroku Dev Center](https://devcenter.heroku.com/articles/sendgrid)
ドメインだけheroku.comに変更してます。

```
$heroku addons:create sendgrid:starter
```

```rb:config/environment.rb

# Load the Rails application.
require_relative 'application'

# Initialize the Rails application.
Rails.application.initialize!
#---------------以下を追加-----------------
ActionMailer::Base.smtp_settings = {
  :user_name => ENV['SENDGRID_USERNAME'],
  :password => ENV['SENDGRID_PASSWORD'],
  :domain => 'heroku.com',
  :address => 'smtp.sendgrid.net',
  :port => 587,
  :authentication => :plain,
  :enable_starttls_auto => true
}
```
config/environments/development.rb
rb:config/environments/production.rb
それぞれに２行追加します。

```rb:config/environments/development.rb
config.action_mailer.delivery_method = :test
config.action_mailer.default_url_options = { :host => "http://localhost:3000" }
```
```rb:config/environments/production.rb
config.action_mailer.delivery_method = :smtp
config.action_mailer.default_url_options = { :host => "portfolio.herokuapp.com", :protocol => "https" }
#:hostの部分は自分のサイトのurlです。
```

これで完了です。メールが何故か日本語化されていないため、中身を手動で変えました。subjectは変わってたのになんでだろうか。あとは問題なく出来てると思います。




#参考資料
[[Rails] ActiveSupport::Concernとは-Qiita](https://qiita.com/aosho235/items/1867be19d044d83127d4)
[[*Rails*] deviseの使い方（rails5版）-Qiita](https://qiita.com/cigalecigales/items/f4274088f20832252374)
[[Rails] ActiveSupport::Concern の存在理由-Qiita](https://qiita.com/castaneai/items/6dc121ce6ff100614f42)
[deviseを日本語化する-Qiita](https://qiita.com/you8/items/921e0dd1210eb0d158df)