ユーザー管理機能の実装

初めましてこんにちは！すんぎぃです。
SoundReviewというアプリができるまでの流れをやっています。
今回は、ユーザー管理機能の実装方法について話していきます。

1.目的

*deviseを使用したユーザー登録をできるようにする。
また、profile画像を投稿できるようにするためにActive Storageを利用した画像投稿機能も実装する。

2.扱うgem

*devise

*devise
webアプリケーションに簡単にユーザー認証機能を実装することができます。欠点としては、カスタマイズがしにくいという点が挙げられます。
カスタマイズがしやすいgemにSorceryというものがありますがこれは、コードを自分で1からしていく必要があります。

3.方法

○deviseを使用したユーザー登録の仕方

①Gemfileの最後の行に以下の内容を追記します。

gem 'devise'

②terminalにて以下のコマンドを実行してインストールを行います。
(現在扱っているアプリ上で)

bundle install

③以下のコマンドを実行して設定ファイルを作成します。

rails g devise:install

 ​④以下のコマンドを実行してUserモデルを作成していきます。

rails g devise user

この際、ユーザーに関するモデルやマイグレーションも自動生成されます。
また、routes.rbにユーザー機能に必要な複数のルーティングを一度に生成してくれるdeviseのメソッドが生成されます。

⑤次に ​テーブルの作成を行います。先ほどのコマンドで育成されたマイグレーションファイルを開きます。場所は、以下示したところにあります。db/migrate/　数字　_devise_create_users.rb
そして以下のように書き換えます。

# frozen_string_literal: true
class DeviseCreateUsers < ActiveRecord::Migration[6.0]
 def change
   create_table :users do |t|
     ## Database authenticatable
     t.string :nickname,           null: false
     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.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

⑥マイグレーションファイルを実行してテーブルを作成します。
以下のコマンドを実行します。

% rails db:migrate

⑦ ​deviseのviewファイルの変更を行うためにdeviseのコマンドを利用してviewファイルを作成します。以下のコマンドを実行します。

% rails g devise:views

⑧下記のファイルを以下の場所にあるファイルと置き換えます。
app/views/devise/sessions/new.html.erb

new.html.erb

2001 Bytes

ファイルダウンロードについて

ダウンロード

また、app/views/devise/registrations/new.html.erbにあるファイルも下記のファイルと置き換えます。

new.html.erb

993 Bytes

ファイルダウンロードについて

ダウンロード

さらに、app/assets/stylesheets/以下に下記ファイルを配置します。

users.scss

56 Bytes

ファイルダウンロードについて

ダウンロード

⑨app/controllers/application_controller.rbに以下の内容を追記します。

class ApplicationController < ActionController::Base
 before_action :configure_permitted_parameters, if: :devise_controller?
 private
 def configure_permitted_parameters
   devise_parameter_sanitizer.permit(:sign_up, keys: [:nickname, :image])
 end
end

before_action :configure_permitted_parameters, if: :devise_controller?とすることで全てのアクションが実行される前にこれが実行されることになります。下の記述では、「nickname」キーとまだ今は出てきていませんが「image」キーの内容の保存をpermitメソッドで許可しています。

○次にprofile画像を表示するために画像投稿機能を実装します。

画像投稿機能を実装するためには、*Active Storageという機能、そして画像加工を行うために*ImageMagic,*MiniMagic,*ImageProcessingというツールが必要になります。

①ImageMagickをHomebrewからインストールします。
下記のコマンドを実行していきます。

% brew install imagemagick

②MiniMagickとImageProcessingをインストールします。Gemfileの一番下に下記の内容を追記します。

gem 'mini_magick'
gem 'image_processing', '~> 1.2'

次にterminalで以下のコマンドを実行します。

% bundle install

③Active Storageをインストールしていきます。
下記のコマンドを実行します。

% rails active_storage:install

rails active_storage:installコマンドを実行すると、Active Storageに関連したマイグレーションが作成されます。続けてマイグレートしていきます。

% rails db:migrate

④UsersテーブルとActive Storageのテーブルで管理された画像ファイルのアソシエーションを記述します。
以下のように、app/models/message.rbでhas_one_attachedメソッドを記述します。

class User < ApplicationRecord

##省略

 has_one_attached :image
＃＃省略

end

○実際に表示されるか確認

①terminalで以下のコマンドを実行します。

% rails s

http://localhost:3000/users/sign_in
http://localhost:3000/users/sign_up

で以下のように表示されていたら完成です。ありがとうございました。