##はじめに
Webアプリを作成する時にユーザーのアバター画像を設定するためにCarrierWaveを使って画像をアップロードできるようにしました。その過程をメモしておこうと思います。
##使用したgem
- carrierwave
- minimagick
##CarrierWaveをインストールして画像をアップロードできるようにする
Gemfileにgemを追加します。
#画像アップロード
gem 'carrierwave'
$ bundle install
コマンドを実行します。
##アップローダーの作成
$ rails g uploader image
imageのところは、ユーザー画像につけたい適当な名前(avaterや、imgなど)を記入してください。今回は、imageと名付けた場合を想定しています。
コマンドを実行すると、
create app/uploaders/image_uploader.rb
となり、アップローダーが作成されます。
##モデルの関連付け
もともとuserモデルにはimageというカラムがあり、そこに画像のURLを格納するような仕様になっています。
/models/user.rbに以下を追記し、カラムの名前をmount_uploaderに指定します。
mount_uploader :image, ImageUploader
##users_controller.rbを編集
userコントローラーのeditアクション（プロフィール編集画面）で、@userインスタンスを生成します。
そしてストロングパラメーターに:imageを記述します。
私が作成したアプリのユーザーモデルには名前、メールアドレス、パスワード、確認パスワード、自己紹介、画像のカラムがあるので、ストロングパラメーターを以下のように記述しています。
def edit
@user = User.find(params[:id])
end
private
#ストロングパラメーター
def user_params
params.require(:user).permit(:name, :email, :password, :password_confirmation, :introduce, :image )
end
##Viewを編集
<%= form_for(@user) do |f| %>
<% if @user.image? %>
<%= image_tag @user.image.url %>
<% else %>
<%= image_tag "/assets/default.jpg", :size => '100x100' %>
<% end %>
<button type="button" class="btn btn-outline-secondary rounded-pill">
<%= f.file_field :image, accept: 'image/jpeg,image/gif,image/png' %>
</button>
<%= f.submit '更新する', class: 'btn btn-primary' %>
<% end %>
<%= form_for(@user) do |f| %>
でフォームを作成します。@userはusers_controllerのeditアクションで設定したものを使用しています。
<% if @user.image? %>
で画像を設定したかどうかを確かめます。画像を設定していれば、設定した画像を表示します。
画像を設定していない場合は、
aseetsファイルの中のimagesファイルの中にdefault.jpgという画像を置いておけば、デフォルトの画像として設定され、表示されます。
<%= f.file_field :image, accept: 'image/jpeg,image/gif,image/png' %>
ここで画像を選択するボタンを作成しています。
<%= f.submit '更新する', class: 'btn btn-primary' %>
最後にここでプロフィールの更新ボタンを作成しています。
##画像はどこに保存される？
AWSのCloud9では、
/public/uploads/user/image/○/
に格納されました。
user :モデル名
image :カラム名
○ ：user.id
に対応した場所に自動でファイルが作成され、保存されました。
##画像のリサイズ
今回、画像のリサイズには、minimagickを使用しました。
rmagickを使用したサイトを参考にしていたのですが、minimagickの方が容量が小さく、Rubyでは、扱いやすいと判断しました。
インストールの仕方などは、rmagickと変わらなかったです。
##ImageMagickをインストール
まずはじめにImageMagickをインストールしないと、minimagickのGemはインストールできないそうです。
今回使用しているAWS Cloud9では、以下の文でImageMagickのインストールを行うことができました。
$ sudo yum -y install ImageMagick ImageMagick-devel
##minimagickをインストール
次に、minimagickのGemをインストールします。
Gemfileを開き、以下の文を追記します。
#画像のリサイズ
gem 'mini_magick'
追記したら、
＄bundle install
を実行し、バンドルインストールを行います。
これでminimagickのインストールは完了しました。
##image_uploader.rbファイルを編集
参考サイト様のrmagickでの記述を参考にファイルを編集しました。
class AvaterUploader < CarrierWave::Uploader::Base
# Include RMagick or MiniMagick support:
#include CarrierWave::RMagick
# minimagickを使うため
include CarrierWave::MiniMagick
#サムネイルの為に画像をリサイズ
version :thumb do
process resize_to_fit: [200, 200]
end
version :thumb50 do
process resize_to_fit: [100, 100]
end
あとはデフォルトのまま使っています。
サムネイルは、ユーザー一覧と、ユーザープロフィール用にサイズを二種類作成しました。
画像ファイルを表示するときに、
<%= image_tag @user.image.thumb.url %>
とすると、version :thumb do の方でリサイズしたサイズのサムネイル画像が表示されます。
オリジナルサイズの画像を表示したいときは、
@user.image.url
とすると、表示することができます。
少しレイアウトは変えてしまっていますが、編集画面のイメージはこんな感じです。
これでいろんな画像をユーザー画像に設定できるようになります！！
いろんな画像を入れて楽しんでください！