はじめに
CarrierWaveを使用して、プロフィール画像を設定した際躓いたので、備忘録として残します。
前提
- マイページは作成済み
- Userモデルにprofile_imageカラムは追加済み
- ログイン機能（アカウント登録等）はdeviseで実装
（スタイル調整は含まれていません。）
環境開発
Mac
Ruby 2.7.2
Rails 6.1.3.2
carrierwave 2.0
完成イメージ
手順
1.CarrierWaveを導入
- Gemfileにgemを追記
gem 'carrierwave', '~> 2.0'
バージョン2.0以降、CarrierWaveにはRails5.0以降とRuby2.2以降が必要です。Rails 4を使用している場合は、1.xを使用する必要があります。
- ターミナルからインストールする
$ bundle install
- サーバーの再起動をおこなう
$ rails c
2.CarrierWaveのアップローダーを作成
-
app/uploaders/image_uploader.rbファイルを作成
$ rails g uploader image
3.実装したいクラス（今回はUser）に以下のコードを追加
mount_uploader :profile_image, ImageUploader
これにより、Userモデルのprofile_imageカラムと、先ほど作成したアップローダーImageUploaderと紐付けができる。
4.Strong Parameterにprofile_imageカラムを追加
class ApplicationController < ActionController::Base
before_action :configure_permitted_parameters, if: :devise_controller?
def configure_permitted_parameters
devise_parameter_sanitizer.permit(:sign_up, keys: [:name, :profile_image])
end
end
これを追加していないと、profile_imageのデータを取得できないので、注意！
5.アカウント登録画面に、ファイル選択ボックスを追加
<div class="form-group">
<%= f.label :profile_image %><br/>
<%= f.file_field :profile_image %>
</div>
下記のようにアカウント登録時に、「ファイルを選択」を表示できる
6.Viewの設定
<p>MyPage <%= @user.name %></p>
<% if @user.profile_image? %>
<%= image_tag @user.profile_image.url %>
<% end %>
現状は、こんな感じで表示されます。
7.日本語訳を変更（devise使用している場合のみ！）
-
アカウント登録時に、「Profile image」となっている為、日本語訳へ変更する
-
config/locales/devise.views.ja.ymlに追加する
※作成していない場合は、ターミナルで下記のコマンドを実施して、追加して下さい。
$ rails g devise:i18n:locale ja
サーバー起動すると下記のように日本語訳になっています！
8.アカウント登録画面に、ファイル選択ボックスを追加
<div class="form-group">
<%= f.label :profile_image %><br/>
<%= f.file_field :profile_image %>
</div>
9.Strong Parameterにprofile_imageカラムを追加
class ApplicationController < ActionController::Base
before_action :configure_permitted_parameters, if: :devise_controller?
def configure_permitted_parameters
# アカウント登録時に許可
devise_parameter_sanitizer.permit(:sign_up, keys: [:name, :profile_image])
# アカウント編集時に許可
devise_parameter_sanitizer.permit(:account_update, keys: [:name, :profile_image])
end
end
10.アカウント編集画面で、現在選択しているプロフィール画像を表示
<div class="form-group">
<%= f.label :profile_image %><br/>
# ココを追加↓
<%= image_tag @user.profile_image.url if @user.profile_image? %>
<%= f.file_field :profile_image %>
</div>
これで、アカウント編集画面で表示されます。
11.画像登録していなユーザーは、デフォルトで画像を表示する
-
app/uploaders/image_uploader.rbの設定
# Override the directory where uploaded files will be stored.
# This is a sensible default for uploaders that are meant to be mounted:
def store_dir
"uploads/#{model.class.to_s.underscore}/#{mounted_as}/#{model.id}"
end
# Provide a default URL as a default if there hasn't been a file uploaded:
# ↓ココをコメントアウトする
def default_url(*args)
# For Rails 3.1+ asset pipeline compatibility:
ActionController::Base.helpers.asset_path("fallback/" +[version_name, "default.png"].compact.join('_'))
# "/images/fallback/" + [version_name, "default.png"].compact.join('_')
end
-
assets/images配下に画像を設置（'default.png'にする）
-
Viewの設定
<% if @user.profile_image? %>
<%= image_tag @user.profile_image.url %>
<% else %>
<%= image_tag("default.png") %>
<% end %>
※今回のように、app/assets/images/default.pngとする場合は、image_tagヘルパーメソッドを使用しましょう！ タグだと表示できない不具合はあるみたいです！
これで、デフォルト画像が表示されたと思います！
12.画像を加工する（※デフォルト画像は、元々200ｘ250の大きさです。）
-
imagemagickを導入するため、ターミナルで下記コマンドを実施
$ brew install imagemagick
$ brew link --force imagemagick
※インストール済みかどうかが分からない場合は，ターミナルから brew list | grep imagemagick を実行。 imagemagick が表示されればインストール済みです。
-
MiniMagickをGemに導入
# Gemfileに追加
gem 'mini_magick'
$ bundle install
rails cで、サーバーを再起動しましょう。
# 次の箇所のコメントアウトを解除
include CarrierWave::MiniMagick
- 今回は、200ｘ200に設定したいので、下記を追加
process resize_to_fit: [200, 200]
これで、大きかった画像が、200x200になりました!
まとめ
ここまで、読んで下さってありがとうございます！色々デフォルト画像の所は、特につまってしまったので、同じように悩んでいる方の参考となると幸いです