学習[59]日目 - プログラミング未経験おじさんの備忘録

本日の学習内容

本日の学習内容
deviseを利用したログイン機能の実装
ユーザーの編集機能の実装
フラッシュメッセージの実装
今日の英単語

deviseを利用したログイン機能の実装

以前の実装においてdeviseによってログイン画面まで実装を行いましたが、今回は具体的な機能を実装していく必要があります。

strong_parameterへのデフォルト以外の値の追加

まず、deviseのデフォルトで設定されているカラム以外のデータを保存する為に、設定を追加する必要があります。

上記の要因となっているのは、もともとdeviseにはe-mailやパスワードといった項目がstrong_parameterによって既に許可設定されています。

新たに”name”や”age”などの項目を追加したい場合にはそれを許可するためのstrong_parameterを記述する必要があります。

class ApplicationController < ActionController::Base
 before_action :configure_permitted_parameters, if: :devise_controller?

  protected

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

上記のように記述することで設定を行うことができますが、一例です。

まず、使用するメソッドは、「devise_parameter_sanitizer 」です。

記述する場所は、Deviseのコントローラーを継承したコントローラーか、もしくはApplication Controllre に記述する。

今回の場合は、devise_parameter_sanitizerを直接呼び出さず、呼び出すメソッドを作成して、deviseのコントローラーにあるアクションが動いた時のみに動くようにif: :devise_controller?をbefore_actionにオプションで設定する。

※:sign_up部分は引数で引数により異なる種類の処理を行うように設定出来る。

ユーザーの編集機能の実装

ここまででユーザーの新規登録が可能となりましたが、編集が出来ないので編集をできるようにしていきます。

まず、ユーザーの編集を行う為にcontrollerを新規に作成してきます。

#controller作成
#複数形の大文字で特定のアクションを指定したい場合には名称の後ろにアクションを指定
rails g controller Users
 
#users_controllerに下記を記述
#編集に必要なegit及びupdateアクションを定義する
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
end

そして、コントローラーのアクションを設定します。今回はeditアクションとupdateアクションがあれば良いので各アクションを定義します。

コントローラーの作成を行ったので作成したコントローラーのeditアクションをリンク先に設定します。

#トップページのビュー登録したユーザーを表示させるように下記の記述を行う
%h.left-header__user-name
      = current_user.name
 
#トップページのビューにボタンのリンク先を追加
%li.left-header__edit-group
        =link_to edit_user_path(current_user), class: "left-header__btn" do
          = fa_icon 'cog'

今回はeditアクションとupdateアクションを定義しているのでそれぞれのルーティングを設定していきますが、updateに関しては変更を保存できたか出来ていないかの処理の設定して表示はトップページに戻れば良いのでビューは設定しません。rootにに飛ぶように設定すれば良いです。

しかし、editnに関しては編集を行う画面が必要となるので、ビューの作成を行う必要があります。

#routes.rbにルーティングを設定する
resources :users, only: [:edit, :update]

フラッシュメッセージの実装

フラッシュメッセージとは、ユーザーの動作に合わせてメッセージを出す機能です。

今回はupdateでトップページに戻るように設定しましたが、設定後に変更されたかが、パッと見でわからないので、変更した時にメッセージを出すことでわかりやすくするために実装していきます。

これをサインアップ時、ログイン時、ログアウト時に出るようにします。

また、デフォルトでは、フラッシュメッセージは英語なので、日本語化してフラッシュメッセージを出すように日本語のファイルを利用して実装していく必要があります。

#通知用のビューを作成します
.notification
  - flash.each do |key, value|
    = content_tag :div, value, class: key
 
#通知用のスタイルを作成します
.notification {
  .notice {
    background-color: $light_blue;
    color: $white;
    text-align: center;
  }

  .alert {
    background-color: $alert_orange;
    color: $white;
    text-align: center;
  }
}

これらをトップページ状に反映させたいのでrenderとimportを使用して反映させます。

#top-pageに反映(application.html.haml)
= render 'layouts/notifications'

#top-pageのstyleに反映(application.scss)
@import "modules/flash";

上記でビューの方は完成したので、表示されるメッセージを英語から日本語に切り替える手順を行なっていきます。

#config/locales以下に、「devise.ja.yml」および「ja.yml」という名前のファイルを新規作成する。
#config/application.rbに以下のような記述を追記
class Application < Rails::Application
    config.generators do |g|
 　　　...省略
    　config.i18n.default_locale = :ja
    end