目的
Railsで作成したアプリにCarrierwaveを用いてユーザープロフィール画像機能を追加する。
開発環境
macOS: Big Sur
Rubyバージョン: 2.6.5
Railsバージョン: 6.0.0
前提
- アプリを作成済み。
-
deviseを導入済み。
【Rails】ユーザー管理機能(devise)の導入 -
MiniMagickを導入済み。
【Rails】画像アップロード機能の導入
手順
- Carrierwaveとは
- 保存画像の設定
- Carrierwaveのインストール
- 画像アップロード用カラムの追加
- アップローダークラスの生成
- アップローダーのマウント
- ストロングパラメーターの定義
- 画像の表示
- 画像サイズの変更
Carrierwaveとは
Carrierwaveとは画像をアップロード機能を簡単に追加してくれるGemの事です。
保存画像の設定
Carrierwaveを使用して投稿される画像は、「public/uploads/モデル名/画像のカラム名/id」以下に溜まっていきます。
今回は画像をGitで管理する必要が無いため、管理下から除外します!
# .gitignoreへ追加
/public/uploads
これでGitで管理しない設定ができました。
Carrierwaveのインストール
次にCarrierwaveをインストールします。
#省略
gem 'carrierwave'
% bundle install
これでインストールできました!
画像アップロード用カラムの追加
ここで画像アップロード用のカラムを追加します。
このカラムは、「画像のデータ」ではなく「画像のファイル名」を保存するためのものです。
画像データを保存すると、データベースサーバーの要領が圧迫するため、どの画像ファイルか確認するためのファイル名だけを保存します。
% rails g migration AddAvatarToUsers avatar:string
% rails db:migrate
今回カラム名はavatarとしました。
アップローダークラスの生成
アップローダークラスでは、アップロードするファイルの拡張子やサイズ、保存するパスを指定する事が出来ます。
% rails g uploader avatar
上記を実行することで,「app/uploader/avatar_uploader.rb」がつくられます。
アップローダーのマウント
次に、「アップロード画像用のカラム」と「アップローダークラス」を紐づける為に、「avatar_uploader」をマウントします。
class User < ActiveRecord::Base
mount_uploader :avatar, AvatarUploader
end
これでアバター画像をアップロードする際に、AvatarUploaderクラスの設定を利用出来る様になりました。
ストロングパラメーターの定義
ストロングパラメーターを設定して、画像ファイル名の保存を許可します。
#省略
def update
if @user.update(user_params)
redirect_to root_path
else
render :edit
end
end
#省略
private
def user_params
params.require(:user).permit(:name, :email, :avatar)
end
deviseを使用しているので、新規登録時にもプロフィール画像が設定できるように、
ストロングパラメーターを定義します。
class ApplicationController < ActionController::Base
before_action :configure_permitted_parameters, if: :devise_controller?
private
def configure_permitted_parameters
devise_parameter_sanitizer.permit(:sign_up, keys: [:name, :avatar])
end
end
これで「新規登録時」と「アカウント編集時」にプロフィール画像が設定できるようになりました！
画像の表示
次にビューファイルの編集です。
まずはユーザー設定画面に下記のように記述します。
<div class="field">
<%= f.label :avatar %>
<%= f.file_field :avatar %>
</div>
次はプロフィール画像の表示です。
<% if @user.avatar? %>
<%= image_tag @user.avatar.url %>
<% else %>
<%= image_tag ("noavatar.png") %>
<% end %>
画像がある場合は、画像ファイルのURLを取得し表示させ、無い場合はデフォルト画像を表示させます。
画像サイズの変更
最後にavatar_uploader.rbを編集して、MiniMagick経由で画像のリサイズを行えるようにします!
class AvatarUploader < CarrierWave::Uploader::Base
include CarrierWave::MiniMagick
process resize_to_fit: [100, 100]
end
resize_to_fitは縦横比を維持したまま、縦横を指定したサイズ以内にリサイズするという意味です。
最後に
以上でユーザープロフィール画像機能の実装は完了です。
アプリ制作の際は、画像アップロード機能を導入済みであれば簡単に実装できるので、ぜひ試してみてください。
では。