【Ruby on Rails】ユーザー管理機能の実装(devise)

実行環境

■MacOS
■Visual Studio Code
■Ruby
■Ruby on Rails

 

ユーザー管理実装のステップ

まずは、ユーザー管理機能の実装に必要なアウトラインをまとめていきます。

①deviseのインストール
②Userモデルを作成
③deviseのビューファイル・コントローラの追加
④サインアップ機能の追加
⑤ユーザー情報編集機能の追加
⑥ログアウト機能の追加
⑦フラッシュメッセージの表示機能の実装

以上の手順で実装していきます。

①deviseのインストール

■Gemfileに下記の内容を記載

gem "devise"

deviseは開発、テスト、本番のいずれの環境でも使用します。

■deviseのインストール
次に、Gemとdeviseのインストールを行います。
deviseの場合は、bundle installの他にdevise用のインストールコマンドの実行が必要となります。

bundle install rails g devise:install

 

②Userモデルを作成

ユーザーを管理するためのモデルファイルやテーブルを作成していきます。

rails g devise user

そして、マイグレーションファイルに制約を記述、user.rbにバリデーションを記述します。
最後にマイグレーションの実行です。

rails db:migrate

 

③deviseのビューファイルの設定

「user.scss」ファイルを作成。
app/assets/stylesheets/modulesに移動します。

app/assets/stylesheets/application.scssに下記のコードを記載します。

@import "modules/user";

 

④サインアップ機能の追加

deviseのデフォルトの機能では、「メールアドレス」および「パスワード」を入力してユーザー登録を行います。
その他に追加したい項目があればapplication_controller.rbに追加する必要があります。

今回は、サインアップ時にユーザーの名前が登録できるように編集します。

class ApplicationController < ActionController::Base

  before_action :authenticate_user!  
  before_action :configure_permitted_parameters, if: :devise_controller?

  protected

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

Railsでは、悪意のあるユーザーの入力に対してセキュリティ対策を行わないと保存できない仕組みがあります。

通常のテーブルに保存する際はストロングパラメータを使用します。
しかし、deviseを使ったモデルの場合は方法が異なります。

下記のコードは、deviseの公式サイトで紹介されている書き方になります。

before_action :configure_permitted_parameters, if: :devise_controller?

application_controllerにbefore_actionを使用しているため、全てのアクションが実行される前に、この部分が実行されることになります。
deviseのコントローラーから呼び出された場合は、「configure_permitted_parameters」メソッドが呼ばれます。

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

ここでconfigure_permitted_parametersの定義を行なっています。
deviseをインストールすることでdevise_parameter_sanitizerのpermitメソッドが使えるようになりますが、これがストロングパラメータに該当する機能です。
サインアップ時に入力された「name」キーの内容の保存を許可しています。

ここまでの設定が終わったら以下のURLにアクセスします。
ビューが正常に表示されているか確認しましょう。
http://localhost:3000/users/sign_up


上記のようになっていれば成功です(cssは編集しています)。

 

⑤ユーザー情報編集機能の追加

登録済みのユーザー情報を編集できるように機能を追加します。
ユーザーの名前とメールアドレスを変更できるようにします。

rails g controller users
Rails.application.routes.draw do
devise_for:users

root"contents#index"
resources:users, only: [:edit, :update]
end
class UsersController < ApplicationController

def edit
end

def update
  if current_user.update(user_params)
    redirect_to root_path
  else
    render :edit
  end
end

private
def user_params
  params.require(:user).permit(:name, :email)
end
editアクションでは必要になるインスタンス変数はないため、アクションを定義するだけです。
Userモデルの更新を行うupdateアクションは、保存できた場合、できなかった場合で処理を分けます。
updateができた場合は、true、できなかった場合はfalseが返り値として戻ってくるようにします。
今回の場合は、current_user.updateに成功した場合、rootにリダイレクトし、失敗した場合はeditのビューを再度描画するという記述になっています。
また、deviseのデフォルトでは、erbファイルが作成されます。
これを今回は、hamlへ変換する必要があります。
Gemfileに下記の内容を記載します。
gem "erb2haml"
そして、bundle installを実行。
ターミナルにて下記コマンドを実行。
rails haml:erb2haml
このコマンドを打つと、
Would you like to delete the original .erb files?(erbファイルを削除しますか?)と表示が出ます。
erbファイルは削除するのでyを押します。

⑥ログアウト機能の追加

現在、ユーザーの編集画面に「ログアウト」という文字だけが表示されています。
ログアウトをクリックしたら、実際にログアウトされるように実装していきます。

.AccountPage 
  .AccountPage__title 
     %h2 Edit Account 
     %h5 アカウントの編集 = link_to "ログアウト", destroy_user_session_path, method: :delete, class: 'Button' = link_to "トップページに戻る", :back, class: 'Button' 
   .AccountPage__form = form_for(current_user) do |f|
     .FormField .FormField__label--normal = f.label :name 
     .FormField__input--normal = f.text_field :name, autofocus: true 
     .FormField 
       .FormField__label--normal = f.label :email 
       .FormField__input--normal = f.email_field :email = f.submit "Update", class: 'Button UserButton'

 

⑦フラッシュメッセージの表示機能の実装

最後にメッセージ表示機能を追加していきます。
ユーザーが「サインアップ」「ログイン」「ログアウト」を行なった際にメッセージが出るようにします。

■フラッシュメッセージ
アクションの実行後に簡単なメッセージを表示するRailsの機能です。

フラッシュメッセージは、デフォルトでは英語で表示されます。
こちらも、実装していく中で日本語で表示されるようにしたいと思います。
それでは、以下の手順でフラッシュメッセージの実装をしていきます。
①フラッシュメッセージの表示
②フラッシュメッセージのスタイリング
③フラッシュメッセージを日本語表記にする

①フラッシュメッセージの表示
フラッシュメッセージ用のビューを作成します。
views/layouts」フォルダの中に、「_notifications.html.haml」というファイルを作成します。
そのファイルの中に、下記のコードを書いていきます。

.Notification 
  - flash.each do |key, value| = content_tag :div, value, class: key

■flashオブジェクトの使い方
deviseを使用すると、ログイン時などに表示させるメッセージが「flashオブジェクト」に自動で格納されます。
flashオブジェクト内には、複数のメッセージがハッシュのように「キー」「バリュー」形式で保存されています。
each文を使用すると、これらを1つずつ取り出すことができます。

次に、上記のビューが表示されるように設定します。
application.html.hamlに下記のコードを追加します。

!!! 
%html 
%head 
%meta{:content => "text/html; charset=UTF-8", "http-equiv" => "Content-Type"}/ 
%title ChatSpace = csrf_meta_tags = stylesheet_link_tag 'application', media: 'all', 'data-turbolinks-track': 'reload' = javascript_pack_tag 'application', 'data-turbolinks-track': 'reload' 
%body = render 'layouts/notifications' = yield

= render “layouts/notifications” によって、フラッシュメッセージが表示されるようになります。
このapplication.html.hamlは、どのビューを表示するときも必ず表示されるようデフォルトで設定されているファイルです。

= yield は、ビューファイルの内容をここに埋め込むために使われます。

例えば、コントローラーのindexアクションが実行され、「index.html.haml」が表示される場面を考えます。

まず、「application.html」に書かれた内容は全て表示されます。その上で、yieldの部分に「index.html」の内容が埋め込まれ表示されます。

この動作によって、indexのビューの上部にフラッシュメッセージが表示されることになります。

②フラッシュメッセージのスタイリング
フラッシュメッセージのデザインを行うため、scssファイルを追加していきます。

「stylesheets/modules」フォルダに「_flash.scss」を作成し設定を行います。
通知用のメッセージとアラート用メッセージでスタイルを分けています。

.Notification { 
  .notice {
    background-color: #38AEF0; 
    color: #fff; 
    text-align: center;
   } 

   .alert {
     background-color: #F35500; 
     color: #fff; 
     text-align: center; 
   } 
}

最後にapplication.scss を編集して、作成したファイルが読み込まれるようにします。

@import "reset"; 
@import "modules/messages"; 
@import "font-awesome-sprockets"; 
@import "font-awesome"; 
@import "modules/user"; 
@import "modules/flash";

③フラッシュメッセージを日本語表記にする
「config/locals」フォルダに、「devise.ja.yml」および「ja.yml」という名前のファイルを作成します。

下記のサイトにコードが記載されています。
それぞれコピーして貼り付けましょう。
・devise.ja.yml
https://github.com/tigrish/devise-i18n/blob/master/rails/locales/ja.yml

・ja.yml
https://github.com/svenfuchs/rails-i18n/blob/master/rails/locale/ja.yml

次に、application.rb を編集して言語設定を変更します。

module ChatSpace
  class Application < Rails::Application 
    #〜省略〜 
    config.i18n.default_locale = :ja 
  end 
end

ここまでの設定が終わったら、サーバーを再起動して挙動を確認しましょう。

【Ruby on Rails】Webアプリケーションのフロント実装に入る前の環境構築

2020.08.05