ユーザー管理機能の実装
初めましてこんにちは!すんぎぃです。
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
また、app/views/devise/registrations/new.html.erbにあるファイルも下記のファイルと置き換えます。
さらに、app/assets/stylesheets/以下に下記ファイルを配置します。
⑨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
で以下のように表示されていたら完成です。ありがとうございました。
この記事が気に入ったらサポートをしてみませんか?