[Try Gem] CarrierWaveを使ってみる

CarrierWaveとは?

画像のアップロード機能を簡単に実装できるGemです。

土台となるアプリケーションを作成する

$ rails new carrierwave_test
$ rails g scaffold Blog title:string content:text image:string
$ bin/rails db:migrate
$ brew install imagemagick

画像情報を格納しておくimage:stringをあらかじめ用意しておきます。 また、今回は画像を扱うのでImageMagickという、画像操作に必要なソフトウェアをインストールしておきます。

CarrierWaveをインストール

gem 'carrierwave'
gem 'rmagick'

$ bundle install
rmagickはアップロードした画像のリサイズに必要なので、
carrierwaveとセットでインストールしておきます。

アップローダーを作成

$ rails g uploader image
app/uploaders/image_uploader.rbアップローダーが作成されます。

モデルにアップローダーを配置

class Blog < ApplicationRecord
  mount_uploader :image, ImageUploader
end

先ほど作成したアップローダーをBlogモデルに配置します。

入力フォームを修正

<%= form_for(blog) do |f| %>
  <% if blog.errors.any? %>
    <div id="error_explanation">
      <h2><%= pluralize(blog.errors.count, "error") %> prohibited this blog from being saved:</h2>

      <ul>
      <% blog.errors.full_messages.each do |message| %>
        <li><%= message %></li>
      <% end %>
      </ul>
    </div>
  <% end %>

  <div class="field">
    <%= f.label :title %>
    <%= f.text_field :title %>
  </div>

  <div class="field">
    <%= f.label :content %>
    <%= f.text_area :content %>
  </div>

  <div class="field">
    <%= f.label :image %>
    <%= f.file_field :image %>
    <%= f.hidden_field :image_cache %>
  </div>

  <div class="actions">
    <%= f.submit %>
  </div>
<% end %>

<%= f.hidden_field :image_cache %>を追記しておくことで、
バリデーションエラー等でrenderされた場合でも、画像をキャッシュしておくことができます。

ビューを修正

<p id="notice"><%= notice %></p>

<p>
  <strong>Title:</strong>
  <%= @blog.title %>
</p>

<p>
  <strong>Content:</strong>
  <%= @blog.content %>
</p>

<p>
  <%= image_tag @blog.image %>
</p>

<%= link_to 'Edit', edit_blog_path(@blog) %> |
<%= link_to 'Back', blogs_path %>

ブラウザで確認

このようにCarrierWaveを使うことで、簡単に画像をアップロードすることができます。