#CarrierWaveとは??
CarrierWaveは、画像をアップロードできるgemの一つです。
非常に簡単に扱えるので、初学者の方でも躓かずに導入することができると思います。
この記事はrailsプロジェクトが作成してあることを前提に書いています。
#前提
・開発環境:cloud9
・OS:ubuntu
・railsのバージョン:5.2.5
#CarrierWaveをインストール
まずgemファイルに以下のようにコードを記入します。
gem 'carrierwave', '~> 2.0'
そして、バンドルインストールします。
$ bundle install
これでCarrierWaveのインストールは完了です!
#アップローダークラスの作成
以下のコードでアップローダークラスを作成します。
$ rails g uploader (アップローダー名)
アップローダー名は任意です。自分は「アップローダー名=image」としました。
$ rails g uploader image
すると、app/uploaders/image_uploader.rbが生成されます。
このファイルについて簡単に説明します。
rmagickというgemをインストールし、画像アップロードの設定に関するコードを記入すると、
色々な機能をつけることができたりします。
ただし、この記事では触れませんが、以下の参考記事ではCarrierWaveとrmagickの導入から使い方まで
書かれていますので参考にしてみてください。
参考:【Rails】CarrierWaveとrmagickで画像アップロード機能を作る
#アップロードする画像のカラムを追加
アップロードする画像を保存するためのカラムを作成していない場合は、以下のようにカラムを追加してください。
以下はユーザーのプロフィール画像をアップロードできるようにするため、usersテーブルにimageカラムを追加しています。
$ rails g migration add_image_to_users image:string
$ rails migrate:db
画像を保存するためのカラムimageは、なんで文字列(string)なの??と疑問に思うかもしれません。
じつは、imageカラムはアップロードした画像のファイル名を保存するためのカラムなのです。
データベースに画像データという重いデータを保存していては、データベースサーバを圧迫してしまいますからね。
また、セキュリティ対策として以下のように、取得できるパラメータを制限している場合は、imageカラムにアップロードした画像ファイル名を保存できるようにしましょう。
private
def user_params
params.require(:user).permit(:name, :email, :password, :password_confirmation, :introduce_comment, :image)
end
#アップローダークラスとimageカラムの結び付け
アップローダークラスとimageカラムを結びつけるためにapp/models/user.rbに以下のコードを追記します。
class モデル名 < ActiveRecord
mount_uploader [:カラム名], [アップローダークラス]
end
例えば、imageカラムとImageUploaderクラスを結びつけるには
class User < ApplicationRecord
mount_uploader :image, ImageUploader
end
を追記します。
これで完了です。
#画像がアップロードできる編集フォームを作成する。
では、実際に画像をアップロードできるようにフォームの作成
<%= form_with(model: @user, local: true) do |f| %>
<div class="form">
<%= f.label :image, '画像' %>
<%= f.file_field :image, class: 'form-control image-form' %>
</div>
<div class="form">
<%= f.label :name, '名前' %>
<%= f.text_field :name, class: 'form-control' %>
</div>
<div class="form">
<%= f.label :introduce_comment, '自己紹介文' %>
<%= f.text_area :introduce_comment, class: 'introduce-form-control' %>
</div>
<%= f.submit '更新する', class: 'edit-btn' %>
<% end %>
画像のアップロードフォームは__file_field__でファイル選択ボックスを実装することができます。
これで画像をアップロードすることができるようになります。
#アップロードした画像の表示方法
<% if @user.image? %>
<p>
<%= image_tag @user.image.url %>
</p>
<% end %>
このようにimage_tagで画像を表示します。また、__urlメソッド__により画像データの保存場所のpathを取得しています。
#アップロードした画像の保存場所
実際の画像データの保存場所はpublic/uploads/user/画像ファイル名に保存されます。
画像をアップロードしたら、確認してみましょう。
#最後に
CarrierWaveの実装方法については、多くの記事が出ていますので
プログラミング初学者にとっても簡単に実装できました。
【Rails】 CarrierWaveチュートリアルの記事が非常に参考になりましたので
こちらを参照することをお勧めします。