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

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

##使用したgem
- carrierwave
- minimagick

##CarrierWaveをインストールして画像をアップロードできるようにする
Gemfileにgemを追加します。

```ruby: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に指定します。

```ruby:/models/user.rb
mount_uploader :image, ImageUploader
```

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

```ruby: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を編集
```ruby:/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を開き、以下の文を追記します。

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

追記したら、

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

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

```ruby: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 
```
あとはデフォルトのまま使っています。
サムネイルは、ユーザー一覧と、ユーザープロフィール用にサイズを二種類作成しました。

画像ファイルを表示するときに、

```ruby:
<%= image_tag @user.image.thumb.url %>
```
とすると、```version :thumb do ```の方でリサイズしたサイズのサムネイル画像が表示されます。

オリジナルサイズの画像を表示したいときは、
```@user.image.url```
とすると、表示することができます。

<img width="572" alt="スクリーンショット 2019-05-17 17.59.13.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/416811/57bdf34b-34a0-15c1-e5d8-548bd12ed677.png">


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

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

##参考文献
[【Rails】CarrierWaveとrmagickで画像アップロード機能を作る](https://pg-happy.jp/carrierwave-rmagic-uploader.html)