LoginSignup
23

More than 3 years have passed since last update.

deviseで作成したユーザー認証機能にプロフィール画像をActive Storageで追加してみる

Posted at

はじめに

deviseで導入したユーザー認証機能にユーザーのプロフィール画像を追加したかったので、はじめはcarrierwaveなどを使って画像をアップロードしようと考えていたがRails 5.2から導入されたActive Storageを使えば、Usersテーブルに画像用のカラムを追加することなくプロフィール画像を設定できるようなので使ってみました。

deviseは導入済みという前提で進めていきます。

環境

ruby 2.6.5
rails 5.2.3

Active Storageを準備する

$ rails active_strage:install

$ rails db:migrate

このコマンドの実行で2つのテーブルが作成されます。

  • active_storage_blobs
  • active_storage_attachments

active_storage_blobs

ファイル名やファイルの種類、バイト数とかを保持するテーブルみたいです。

active_storage_attachments

このテーブルは、active_storage_blobsとActive Recordを紐付ける中間テーブルとしての役割があるようです。

Userモデル

deviseで生成されたUserモデルにhas_one_attached :avatarを追加します。
これは1つの画像ファイルを添付するためのもので、複数ファイルを添付したい場合はhas_many_attached :imagesとします。

app/models/user.rb
class User < ApplicationRecord

  devise :database_authenticatable, :registerable,
        :recoverable, :rememberable, :validatable

  # :avatarの部分は用途に合わせて :image :photoでも可
  has_one_attached :avatar

end

コントローラーにストロングパラメータを設定する

ユーザー編集画面でプロフィール画像をアップロードしたいので、編集画面で画像ファイルを受け取れるようにストロングパラメータを設定します

app/controllers/application_controller.rb

class ApplicationController < ActionController::Base
# deviseコントローラにストロングパラメータを追加
before_action :configure_permitted_parameters, if: :devise_controller?



protected
  # 編集画面から画像を受け取れるよう設定
  def configure_permitted_parameters
    devise_parameter_sanitizer.permit(:account_update, keys: %i(avatar))
  end

end

ストロングパラメータの詳しい設定は以下で確認できます。
- deviseリファレンス

ビューに追加

プロフィール画像のアップロード用と表示用のヘルパーをビューファイルに追加します。

ユーザー編集画面

app/views/deives/registrations/edit.html.erb
.
.
.
<div class="field">
    <%= f.label :current_password %> <i>(we need your current password to confirm your changes)</i><br />
    <%= f.password_field :current_password, autocomplete: "current-password" %>
</div>

<%# 追加 %>
<%= f.file_field :avatar %>

<div class="actions">
    <%= f.submit "Update" %>
</div>
.
.
.

ユーザー詳細画面

app/views/users/show.html.erb
<p><%= @user.email %></p>

<% if @user.image.attached? %>
  <%= image_tag @user.avatar %>
<% end %>

<%= link_to "編集", edit_user_registration_path %>

ユーザー詳細画面は初期状態のdeviseには無いので追加する必要があります。
下の記事が分かりやすく参考になりました。

Active Storageを使うと簡単だった

以上でプロフィール画像のアップロードから表示までが完了しました。
Active Storageを使うとテーブルにカラムを追加する必要がないにも関わらず、usersテーブルにavatarというカラムがあるかのように操作できるところが便利でした。

他にもActive Storageを使うことでAmazon S3やGoogle Cloud Strageなどへのアップロードが可能になるようです。

参考サイト

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
23