Qiita Teams that are logged in
You are not logged in to any team

Log in to Qiita Team
Community
OrganizationEventAdvent CalendarQiitadon (β)
Service
Qiita JobsQiita ZineQiita Blog
92
Help us understand the problem. What are the problem?

More than 1 year has passed since last update.

CarrierWaveを使って、ユーザー画像を設定する。

はじめに

Webアプリを作成する時にユーザーのアバター画像を設定するためにCarrierWaveを使って画像をアップロードできるようにしました。その過程をメモしておこうと思います。

使用したgem

  • carrierwave
  • minimagick

CarrierWaveをインストールして画像をアップロードできるようにする

Gemfileにgemを追加します。

Gemfile
#画像アップロード
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に指定します。

/models/user.rb
mount_uploader :image, ImageUploader

users_controller.rbを編集

userコントローラーのeditアクション(プロフィール編集画面)で、@userインスタンスを生成します。
そしてストロングパラメーターに:imageを記述します。
私が作成したアプリのユーザーモデルには名前、メールアドレス、パスワード、確認パスワード、自己紹介、画像のカラムがあるので、ストロングパラメーターを以下のように記述しています。

users_controller.rb
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を編集

/views/users/edit.html.erb
<%= 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を開き、以下の文を追記します。

Gemfile
#画像のリサイズ
gem 'mini_magick'

追記したら、

bundle install

を実行し、バンドルインストールを行います。
これでminimagickのインストールは完了しました。

image_uploader.rbファイルを編集

参考サイト様のrmagickでの記述を参考にファイルを編集しました。

image_uploader.rb
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
とすると、表示することができます。

スクリーンショット 2019-05-17 17.59.13.png

少しレイアウトは変えてしまっていますが、編集画面のイメージはこんな感じです。

これでいろんな画像をユーザー画像に設定できるようになります!!
いろんな画像を入れて楽しんでください!

参考文献

【Rails】CarrierWaveとrmagickで画像アップロード機能を作る

Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
92
Help us understand the problem. What are the problem?