rails6 deviseを使用する

  • 作成日 2021.03.30
  • 更新日 2022.07.31
  • rails
rails6 deviseを使用する

rails6で、ログイン機能が使用できるdeviseをインストールして使用するまでの手順を記述してます。

環境

  • OS ubuntu20.10
  • ruby 2.7.2
  • rails 6.1.0
  • Postgresql 13.1 (dockerで構築)

deviseインストール

「Gemfile」に以下を追加します。

gem "devise"

bundle installします。

bundle install

インストールします。

rails g devise:install

<出力結果>

Depending on your application's configuration some manual setup may be required:

  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.

     * Required for all applications. *

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

       root to: "home#index"

     * Not required for API-only Applications *

  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>

     * Not required for API-only Applications *

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

       rails g devise:views

     * Not required *

ここでは、順に

  1. デフォルトのurlオプションの設定方法
  2. TOPページのルーティングの設定
  3. ログインした際になどに表示されるメッセージを表示するためのコード
  4. viewファイルをカスタマイズするためのコマンド

と記載されてます。

また、ここで以下の2つのファイルが作成されます。

config/initializers/devise.rb # deviseの設定ファイル
config/locales/devise.en.yml # 英語用ローカライズ

view作成

デフォルトだと見ずらいので、あとでカスタマイズできるようにviewを作成しておきます。

rails g devise:views

以下のviewファイルが作成されます。

Running via Spring preloader in process 50800
      invoke  Devise::Generators::SharedViewsGenerator
      create    app/views/devise/shared
      create    app/views/devise/shared/_error_messages.html.erb
      create    app/views/devise/shared/_links.html.erb
      invoke  form_for
      create    app/views/devise/confirmations
      create    app/views/devise/confirmations/new.html.erb
      create    app/views/devise/passwords
      create    app/views/devise/passwords/edit.html.erb
      create    app/views/devise/passwords/new.html.erb
      create    app/views/devise/registrations
      create    app/views/devise/registrations/edit.html.erb
      create    app/views/devise/registrations/new.html.erb
      create    app/views/devise/sessions
      create    app/views/devise/sessions/new.html.erb
      create    app/views/devise/unlocks
      create    app/views/devise/unlocks/new.html.erb
      invoke  erb
      create    app/views/devise/mailer
      create    app/views/devise/mailer/confirmation_instructions.html.erb
      create    app/views/devise/mailer/email_changed.html.erb
      create    app/views/devise/mailer/password_change.html.erb
      create    app/views/devise/mailer/reset_password_instructions.html.erb
      create    app/views/devise/mailer/unlock_instructions.html.erb

Model作成

モデルを作成します。

rails g devise User

<出力結果>
Running via Spring preloader in process 51265
      invoke  active_record
      create    db/migrate/xxxxx_devise_create_users.rb
      create    app/models/user.rb
      invoke    test_unit
      create      test/models/user_test.rb
      create      test/fixtures/users.yml
      insert    app/models/user.rb
       route  devise_for :users

ここで、

  • devise用のmigrationファイル
  • Userモデルのファイル
  • routes.rbに「devise_for :users」を追加

が生成されます。

usersテーブル作成

テーブルを作成します。

rails db:migrate

ルーティング確認

「rails routes」でルーティングを確認すると設定されていることが確認できます。

ブラウザから http://プライベートIP :3000/users/sign_upにアクセスして以下の画面が表示されれば構築は完了です。

※CSSにMaterializeを使用しています

また「sign_up」のレイアウトは「app/views/devise/registrations」の
「new.html.erb」にあります。

試しにアカウントを登録してみます。

DBに、登録されてログインできることが確認できると思います。

※以下のコマンドを実行して、クエリを実行しても確認できると思います。

rails db

select * from users;

ログイン判定

ログインが完了しているかは、以下のコードで判定することが可能です。

<% if user_signed_in? %>

    <%= link_to 'ログアウト', destroy_user_session_path, method: :delete %>

<% else %>

    <%= link_to 'ログイン', new_user_session_path %>
    
<% end %>

日本語化

日本語化を行う場合は「Gemfile」に、まずは以下を追加します。

gem "devise-i18n"
gem "devise-i18n-views"

bundle installします。

bundle install

config配下にある「application.rb」に「config.i18n.default_locale = :ja」を追加します。

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 TestProject
  class Application < Rails::Application
    # Initialize configuration defaults for originally generated Rails version.
    config.load_defaults 6.1
    config.i18n.default_locale = :ja # 追加

    # Configuration for the application, engines, and railties goes here.
    #
    # These settings can be overridden in specific environments using the files
    # in config/environments, which are processed later.
    #
    # config.time_zone = "Central Time (US & Canada)"
    # config.eager_load_paths << Rails.root.join("extras")
  end
end

以下のコマンドで、日本語用のファイルを生成します。

rails g devise:views:locale ja

「config/locales」に「devise.views.ja.yml」が生成されるので、これを編集すれば日本語カスタマイズが可能です。

ja:
  activerecord:
    attributes:
      user:
        current_password: "現在のパスワード"
        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: "アカウントの凍結解除方法を再送する"

サーバーを再起動して、日本語が適応されていることが確認できます。