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

自作のWEBアプリを作成していますが、その中でユーザープロフィール画像のアップロード機能を作っています。

CarrierWaveとimageMagick、rmagickというGemをインストールして行います。

参考サイトを見ながら比較的簡単に導入する事ができました。今日はその流れを解説します。

CarrierWaveをインストールして画像アップロード機能をつける

■Gemfileに以下を追記します。

----------------------------
#画像アップロード
gem 'carrierwave'
----------------------------

■バンドルインストールを実行

■アップローダーを作成します

■userモデルに関連付けを記述します。
userモデルにはimageというカラムがあり、ここに画像のURLを格納するような仕様になっています。

/models/user.rbに以下を追記。

  #カラムの名前をmount_uploaderに指定
  mount_uploader :image, ImageUploader

■users_controller.rbの編集

userコントローラーのeditアクション（プロフィール編集画面）で、@userインスタンスを生成する記述。

あとストロングパラメーターを記述します。

  def edit
    @user = User.find(params[:id])
  end
  
  #ストロングパラメーター
  def user_params
    params.require(:user).permit(:nickname, :email, :password, :password_confirmation, :image)
  end

このuserモデルには、ニックネーム、メールアドレス、パスワード、画像URLのカラムがありますので、上記のように記述しています。

ユーザープロフィール編集画面からPOSTで送られてくるので、それを受け取る時のストロングパラメーターの設定ですね。

■コントローラーを記述したらビューの編集

ユーザープロフィール編集画面
/user/edit.html.erb

<%= form_for(@user) do |f| %>
  <% if @user.image? %>
    <%= image_tag @user.image.url %>
  <% else %>
    <%= image_tag("/images/icon/no-image.png") %>
  <% end %>
  <%= f.file_field :image %>
  <%= f.submit 'プロフィール編集を完了する', class: 'btn btn-primary' %>
<% end %>

1行目はform_forでフォームタグを生成しています。いつもの書き方です。@userはusers_controllerのeditアクションで生成していてそれを使用します。

2行目で@user.image?で、画像URLがあるかチェックし有れば画像を表示しますが、無ければno-imageを表示しています。で、このプロフィール画像の下に

  <%= f.file_field :image %>

を記述して、これが画像ファイルを選択するボタンになるわけですね。

このフォームタグの最後に、f.submitで「プロフィール編集を完了する」ボタンを用意しています。画像だけ編集するのではなくてユーザー情報の全部を入力し終えて完了という仕様にしています。

ポストで送られてきたデータを処理（画像を保存）する

上記の「プロフィール編集を完了する」ボタンが押下されるとPOSTでデータが送られてきます。

users_controllerのupdateメソッドに来るので、そこを編集します。

■users#updateメソッドの編集

  def update
    @user = User.find(params[:id])

    #編集しようとしてるユーザーがログインユーザーとイコールかをチェック
    if current_user == @user

      if @user.update(user_params)
        flash[:success] = 'ユーザー情報を編集しました。'
        render :edit
      else
        flash.now[:danger] = 'ユーザー情報の編集に失敗しました。'
        render :edit
      end    
    
    else
        redirect_to root_url
    end
  end

current_userというのは別途用意したメソッドです。ログインユーザーが編集しようとするユーザーと一致しているかチェックします。これが無いと他人が勝手に画像を変える事ができてしまいますからね。

これによってuserテーブルのimageカラムに画像URLが格納されます。

■画像はどこに格納されるのか

で、画像がどこにあるかというとAWSのCloud9では、
/public/uploads/user/image/3/
みたいな所に格納されました。

userという部分がモデル名で、
imageはカラム名
6はuser.idに該当するようにフォルダが自動生成されていました。

ここまでで画像のアップロードは出来ましたが、アップロードしたままのサイズ、ファイル名で入っていきます。

それだと都合が悪いので以下で紹介するrmagickを使います。

画像の加工を行うrmagickをインストールして使う

■まずはimageMagickのインストール。
imageMagickをインストールしてからでないと、rmagicというGemのインストールが出来ないそうです。

幾つかのサイトを拝見しましたがインストールする方法がわからず、テックアカデミーの先生に聞きました。

AWS Cloud9では以下の文でimageMagickのインストールが出来ました。

■Gemfileに追記

#画像の加工とか
gem 'rmagick'

■バンドルインストール

■image_uploader.rbファイルの編集

以下、こちらの2サイト様を参考に自分仕様に合わせて編集しました。
http://www.workabroad.jp/tech/1118
https://qiita.com/tackey/items/ba68ca8489500b7cb739

編集ファイルはプロジェクトのルート/app/uploaders/配下にあります。

image_uploader.rb

class ImageUploader < CarrierWave::Uploader::Base  

 # リサイズしたり画像形式を変更するのに必要
  include CarrierWave::RMagick

 # 画像の上限を640x480にする
  process :resize_to_limit => [640, 480]

  # 保存形式をJPGにする
  process :convert => 'jpg'

  # サムネイルを生成する設定
  version :thumb do
    process :resize_to_limit => [300, 300]
  end
  
  version :thumb100 do
    process :resize_to_limit => [100, 100]
  end

  version :thumb30 do
    process :resize_to_limit => [30, 30]
  end

  # jpg,jpeg,gif,pngしか受け付けない
  def extension_white_list
    %w(jpg jpeg gif png)
  end

 # 拡張子が同じでないとGIFをJPGとかにコンバートできないので、ファイル名を変更
  def filename
    super.chomp(File.extname(super)) + '.jpg' if original_filename.present?
  end

 # ファイル名を日付にするとタイミングのせいでサムネイル名がずれる
 #ファイル名はランダムで一意になる
  def filename
    "#{secure_token}.#{file.extension}" if original_filename.present?
  end

  protected
  def secure_token
    var = :"@#{mounted_as}_secure_token"
    model.instance_variable_get(var) or model.instance_variable_set(var, SecureRandom.uuid)
  end


end

サムネイルは100pxパターンと、30pxパターンと2つ作っています。

画像ファイルを読み出す時は、
@user.image.url
とすればオリジナル画像のURLを取り出せます。

サムネイルは
@user.image.thumb30.url
のようにしてURLを取り出せるようになりました。