RailsでCarrierWaveを使って画像のアップロード機能を作る

RailsでCarrierWaveというgemを使って画像をアップする機能を実装する方法をまとめます。

画像のアップロード機能って、苦手意識がありません?僕はあります。

でもCarrierWaveを使えば一瞬で画像のアップロード機能が実装できてしまいます。

CarrierWaveのインストール

Gemfileに下記を追記し、bundle installします。

gem 'carrierwave', '~> 1.0'

続いて、コマンドラインで「rails g uploader アップローダー名」でアップローダーを作成します。今回は、imageというアップローダーを作成します。

rails g uploader image

すると、app/uploaders/image_uploader.rbが生成されます。

画像をアップしたいモデルのファイルで、対象属性(今回だとimage)と先程作成したImageUploaderを紐づけます。

class Board < ApplicationRecord
    mount_uploader :image, ImageUploader
end

これで、CarrierWaveの初期設定は完了です。

コントローラーの作成

画像をアップするためのコントローラーを作成します。画像のアップロードを全く意識せず、実装すればOKです。

class BoardsController < ApplicationController
    def new
        @board = Board.new
    end

    def index
        @boards = Board.all
    end

    def create
        @board = Board.new(board_params)
        @board.user_id = current_user.id
        if @board.save
            redirect_to boards_path
        else
            render :new
        end
    end

    private
    def board_params
        params.require(:board).permit(:title, :content, :image)
    end

end

画像をアップするためのフォームを作成

画像をアップするためのフォームを作成します。これも、CarrierWaveを使っているとかを全く意識せず、フォームを作ればOKです。

  <%= form_for @board do |f| %>
    <div>
        <%= f.label :title, :タイトル %>
        <%= f.text_field :title %>
    </div>
    <div>
        <%= f.label :content, :説明文 %>
        <%= f.text_area :content %>
    </div>
    <div>
        <%= f.file_field :image %>
    </div>
    <%= f.submit %>
  <% end %>

このフォームを使って画像をアップすると、Railsアプリのpublic/uploads配下のフォルダに画像が保存されます。

保存した画像を表示させる場合は、下記のようにimage_tagで呼び出せばOKです。

<%= image_tag board.image %>

苦手意識を持ちやすい画像のアップロード機能ですが、CarrierWaveを使えば、以上のように、画像アップロードをあまり意識せずに実装できてしまいます。

参考:Rails で画像のアップロード機能を実装する

Ruby on Railsをこれから本格的に勉強したい人は「エンジニアになるための600時間のプログラミング学習に耐え抜くコツ」という記事がおすすめです。

シェアする

  • このエントリーをはてなブックマークに追加

フォローする