0
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 3 years have passed since last update.

CarrierWaveをrailsアプリに導入する方法

Posted at

#CarrierWaveとは??
CarrierWaveは、画像をアップロードできるgemの一つです。
非常に簡単に扱えるので、初学者の方でも躓かずに導入することができると思います。
この記事はrailsプロジェクトが作成してあることを前提に書いています。
#前提
・開発環境:cloud9
・OS:ubuntu
・railsのバージョン:5.2.5

#CarrierWaveをインストール
まずgemファイルに以下のようにコードを記入します。

Gemfile
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カラムにアップロードした画像ファイル名を保存できるようにしましょう。

app/controllers/users_controller
  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

を追記します。
これで完了です。
#画像がアップロードできる編集フォームを作成する。
では、実際に画像をアップロードできるようにフォームの作成

edit.html.erb
<%= 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__でファイル選択ボックスを実装することができます。
これで画像をアップロードすることができるようになります。
#アップロードした画像の表示方法

show.html.erb
 <% if @user.image? %> 
    <p>
      <%= image_tag @user.image.url %>
    </p>
  <% end %>

このようにimage_tagで画像を表示します。また、__urlメソッド__により画像データの保存場所のpathを取得しています。

#アップロードした画像の保存場所
実際の画像データの保存場所はpublic/uploads/user/画像ファイル名に保存されます。
画像をアップロードしたら、確認してみましょう。
#最後に
CarrierWaveの実装方法については、多くの記事が出ていますので
プログラミング初学者にとっても簡単に実装できました。

【Rails】 CarrierWaveチュートリアルの記事が非常に参考になりましたので
こちらを参照することをお勧めします。

0
0
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
0
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?