Railsで画像を簡単にアップロードする方法CarrierWaveを使う【初心者向け】

初心者講座Railsで簡単に画像アップロードを実装する方法

Railsで画像アップロード機能を簡単に実装していきます。
今回はGemファイルへ記述するので簡単に実装できます。

ほぼコピペだけで実装可能です。

無料パソコンスクール講座
WordPress・SEO・プログラミング

あなたは以下のことで 悩んでないだろうか?

「フリーランスになりたいけど稼げるか不安だ」
「クラウドソーシングや営業して稼げるか不安だ」
「転職で必要になり困っている」
「スマホはあるけどパソコンが古くて不安だ」
「広告やLINEからの集客を得たい」
「仕事でグラフや資料制作を思うように作れない」
「プログラミングを学習して副業したいけど不安だ」
「副業をはじめたが、いっこうに成果がでない」
「退職してノートパソコンだけで収入を得たい」
「何がわからないかわからない状態が続き何度も挫折した」
「在宅で稼げるようになりたい」
「副業で収入を得たい」

そんなお悩みのあなたにこそ
取得して頂きたい内容です!

このメディアを運営している制作・プログラミング相談のプロが
全て無料で相談と学習できるように
無料スクールのメルマガ講座を開設しました。

\今なら300部限定無料ダウンロード/

今すぐ無料ダウンロードする

いまなら、先着300部限定で無料プレゼント付です。

今すぐ無料ダウンロードする

Gemファイルへ追加する

追加するGemは2つ

gem 'carrierwave'
gem 'mini_magick'

このファイルを追加するだけでOKです。

ただし、mini_magickを使うには ImageMagickをサーバーにインストールする必要があります。

ImageMagick をサーバーへインストール

もしImageMagickがサーバーに入ってない場合はインストールしましょう。入っているかの確認は

$ convert -version

このコマンドで入っているか確認できます。

ImageMagickが入っいる場合は

Version: ImageMagick 6.9.7-4 Q16 x86_64 20170114 http://www.imagemagick.org
Copyright: © 1999-2017 ImageMagick Studio LLC

このような感じで表示されます。

ImageMagickが入ってない場合は

ImageMagickの確認とインストール
ImageMagickの確認とインストール
$ sudo apt-get -y install imagemagick

でUbuntuの場合は上記のコマンドでインストールできますので安心してください。

  • Macの場合は
    $ brew install imagemagick
  • CentOSの場合は
    $ sudo yum install imagemagick

Gemをインストールします

$ bundle

画像アップロードできるページを作成

$ rails g scaffold upload image:string title:text body:string
$ rails g uploader images
$ rails db:migrate

modelsファイルの修正

class Upload < ApplicationRecord
  mount_uploader :image, ImagesUploader
end

コントローラーファイルは確認でOK

class UploadsController < ApplicationController
  before_action :set_upload, only: [:show, :edit, :update, :destroy]

  # GET /uploads
  # GET /uploads.json
  def index
    @uploads = Upload.all
  end

  # GET /uploads/1
  # GET /uploads/1.json
  def show
  end

  # GET /uploads/new
  def new
    @upload = Upload.new
  end

  # GET /uploads/1/edit
  def edit
  end

  # POST /uploads
  # POST /uploads.json
  def create
    @upload = Upload.new(upload_params)

    respond_to do |format|
      if @upload.save
        format.html { redirect_to @upload, notice: 'Upload was successfully created.' }
        format.json { render :show, status: :created, location: @upload }
      else
        format.html { render :new }
        format.json { render json: @upload.errors, status: :unprocessable_entity }
      end
    end
  end

  # PATCH/PUT /uploads/1
  # PATCH/PUT /uploads/1.json
  def update
    respond_to do |format|
      if @upload.update(upload_params)
        format.html { redirect_to @upload, notice: 'Upload was successfully updated.' }
        format.json { render :show, status: :ok, location: @upload }
      else
        format.html { render :edit }
        format.json { render json: @upload.errors, status: :unprocessable_entity }
      end
    end
  end

  # DELETE /uploads/1
  # DELETE /uploads/1.json
  def destroy
    @upload.destroy
    respond_to do |format|
      format.html { redirect_to uploads_url, notice: 'Upload was successfully destroyed.' }
      format.json { head :no_content }
    end
  end

  private
    # Use callbacks to share common setup or constraints between actions.
    def set_upload
      @upload = Upload.find(params[:id])
    end

    # Never trust parameters from the scary internet, only allow the white list through.
    def upload_params
      params.require(:upload).permit(:image, :title, :body)
    end
end

今回は自動で生成された状態のままでOKです。

uploadersファイルの編集

class ImagesUploader < CarrierWave::Uploader::Base
  # Include RMagick or MiniMagick support:
  # include CarrierWave::RMagick
  include CarrierWave::MiniMagick

  # Choose what kind of storage to use for this uploader:
  storage :file
  # storage :fog

  # Override the directory where uploaded files will be stored.
  # This is a sensible default for uploaders that are meant to be mounted:
  def store_dir
    "uploads/#{model.class.to_s.underscore}/#{mounted_as}/#{model.id}"
  end

  def extension_whitelist
    %w(jpg jpeg gif png)
  end

  process :resize_to_limit => [700, 700]

  version :thumb do
    process resize_to_fill: [100, 100]
  end
end

uploadersファイルは画像をアップロードするための設定ファイルになります。
ここで設定した内容で出力されるようになります。

デザインを変更していきます

Viewsファイルを確認

<%= form_with(model: upload, local: true) do |form| %>
  <% if upload.errors.any? %>
    <div id="error_explanation">
      <h2><%= pluralize(upload.errors.count, "error") %> prohibited this upload from being saved:</h2>

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

  <div class="field">
    <%= form.label :image %>
    <%= form.file_field :image %>
  </div>

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

  <div class="field">
    <%= form.label :body %>
    <%= form.text_area :body %>
  </div>

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

form.text_field :image になっているので form.file_field :image に変更します。

アップロードフィールドを確認
アップロードフィールドを確認

変更しないとこの様にインプットのフィールドになっています。

アップロードフィールドを変更
アップロードフィールドを変更

これでブラウザから画像を選択できるようになりました。

アップロード画像の表示サイズを変更する

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

<p>
  <strong>Image:</strong>
  <%#= @upload.image %>
  <%= image_tag @upload.image_url(:thumb ) if @upload.image.present? %>

</p>

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

<p>
  <strong>Body:</strong>
  <%= @upload.body %>
</p>

<%= link_to 'Edit', edit_upload_path(@upload) %> |
<%= link_to 'Back', uploads_path %>

@upload.image_url()部分に :thumb を入れるとサムネイルサイズが表示されます。

通常のサイズ

アップロードされた通常サイズの画像
アップロードされた通常サイズの画像

サムネイルサイズ

アップロードされたサムネイルサイズの画像
アップロードされたサムネイルサイズの画像

画像アップロード機能実装方法を動画で確認する

ここまでの流れを動画で確認できます。

この記事を書いた人

よこやま良平

こんにちは!18年以上ITエンジニアとして活動してきた
よこやま良平です。

4歳~85歳まで、年間1,792人名以上の方に
パソコンやプログラミング講座を行ってきました。

また18冊以上の書籍を出版しており、連続で1位を獲得しました。
オンライン講座では200件以上のレビューを頂いており
評価は4.9/5.0と高評価を得ています。

その他これまでに3000以上のサービス・システム・サイトを作成。