Ruby on Railsでログイン機能を実装するためのgem「devise」を導入する【Bootstrap化と日本語化 含む】

よこのじ(@yokonoji_work)です。

Ruby on Railsでログイン機能を実装するためのgem「devise」を導入する方法をご紹介します。

また、deviseを日本語化する方法とdeviseにBootstrapのデザインを当てる方法も紹介しますので、参考にしてください。

gem「devise」を導入する

gem「devise」を導入する手順を説明します。

まず、Gemfileに次の記述を追加します。

gem 'devise'

Gemfileを保存したら、bundle installでgemをインストールします。

$ bundle install

次のコマンドを実行して、deviseの設定ファイルを生成します。

$ rails generate devise:install

コマンドを実行すると、次のように表示されます。

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/environments/development.rb に次の記述を追加します。

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

また、deviseでログインした後に飛ぶ先のルートページへのルーティングを設定しておく必要があります。

root to: "home#index"

どのページを設定しても良いのですが、指示通りにhomeコントローラーを作っても良いです。

rails generate controller home index

「ログインしました」のようなメッセージを表示させるために、viewファイル application.html.erb に指示通りの記述を追加しておきます。

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

  <%= yield %>
</body>

次のコマンドを実行するとdeviseに関する画面のviewファイルが生成されますが、Bootstrapデザインを当てる場合は、ここでは実行しないでください。

rails g devise:views

deviseを使ってUserモデルを生成する

deviseを使ってUserモデルを生成するために、次のコマンドを実行します。

$ rails generate devise User

これにより、ログインやリセットパスワードの送信に必要なカラムを持ったモデルが生成されます。

migrateファイルを見てみると「email」「encrypted_password」「reset_password_token」「reset_password_sent_at」「remember_created_at」といったカラムを持っていることが分かります。

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
(省略)・・・
      # 追加
      t.string :name, null: false

      t.timestamps null: false
    end

ここでは、「name」というカラムを追加しています。

rails db:migrateするとデータベースに反映されます。

$ rails db:migrate

deviseを日本語化する

Gemfileに次の2行を追加してください。

gem 'devise-i18n'
gem 'devise-i18n-views'

Rails ガイドの「Rails 国際化 (i18n) API」には、i18nとは「アプリケーションの文言を英語以外の 別の1つの言語に翻訳する機能や多言語サポート機能を簡単かつ拡張可能な方式で導入するためのフレームワーク」と紹介されています。

ちなみに、i18nという名前は「internationalization(国際化)」の最初のiと最後のnの間に18文字あることから来ているようです。

Gemfileを保存したら、bundle installをお忘れなく。

$ bundle install

そして、config/initializers に locale.rb というファイルを新規作成して、次の記述を追加してください。

I18n.default_locale = :ja

ファイルを保存したら、次のコマンドでdevise用の日本語ファイルを生成します。

$ rails g devise:views:locale ja

コマンドを実行すると、config/locales/devise.views.ja.yaml というファイルが生成されます。先ほど、Userモデルに name を追加しましたので、ここでも追加しておきます。

ja:
  activerecord:
    attributes:
      user:
        name: "名前"
        current_password: "現在のパスワード"
        email: "メールアドレス"
        password: "パスワード"
        password_confirmation: "確認用パスワード"

このように、対象の項目に対する日本語表記の内容を示すのがこのファイルの内容になりますので、編集して任意の表記に変更することも可能です。

deviseのデザインをBootstrapにする

(Bootstrapにする必要がなければ飛ばしてください)

メールやパスワードの入力フォームのデザインをBootstrapにする方法です。

Bootstrapを導入する方法は、「Ruby on RailsでBootstrapを導入する方法【手順どおりで簡単に】」を参考にしてください。

加えて、Gemfileに次の記述を追加して bundle install してください。

gem 'devise-bootstrap-views'

devise-bootstrap-views」によると、日本語化で追加した gem ‘devise-i18n’ が gem ‘devise-bootstrap-views’ の前にないといけないようなので、記述の順番に注意してください。

次のコマンドを実行すると、Bootstrapのクラス名が記述されたdevise関連のviewファイルが生成されます。

$ rails g devise:views:bootstrap_templates

 

ここまでで、ログイン機能を実装するためのgem「devise」の導入が完了しました。

ログイン機能を実装するに当たっては「Ruby on Railsのgem「devise」でログイン機能を実装する方法」という記事を書いていますので、参考にしてください。