Home » gem » Rails5.1「carrierwave」で画像をアップロード

Rails5.1「carrierwave」で画像をアップロード

環境 
Ruby2.3.3
Ruby on Rails5.1.4
OSwindows10

今回はRuby on Railsでcarrierwaveを使って、

画像ファイルをアップロードと表示をしていきたいとおもいます。

carrierwaveとは

ファイルのアップロードを円滑に行ってくれるgemです。

Ruby on Rails などのWebフレームワークで、

画像などのファイルのアップロードの実装が

少ないコードで出来るので多くのユーザーに重宝されてます。

Railsプロジェクト作成とscaffoldファイルの作成

ファイル関係をわかりやすくするため、
プロジェクト作成からcarrierwaveの導入をしていきたいとおもいます。

$ rails new carrierwave_test

作成したディレクトリに移動します。

$ cd carrierwave_test

では、scaffoldファイルを作成していきます。
imageカラム、titleカラム、textカラムを追加したいとおもいます。
今回は、imageカラムを使っていきます。

$ rails g scaffold post image:string title:string text:text
Running via Spring preloader in process 21761
      invoke  active_record
      create    db/migrate/20170920104044_create_posts.rb
      create    app/models/post.rb
      invoke    test_unit
      create      test/models/post_test.rb
      create      test/fixtures/posts.yml
      invoke  resource_route
       route    resources :posts
      invoke  scaffold_controller
      create    app/controllers/posts_controller.rb
      invoke    erb
      create      app/views/posts
      create      app/views/posts/index.html.erb
      create      app/views/posts/edit.html.erb
      create      app/views/posts/show.html.erb
      create      app/views/posts/new.html.erb
      create      app/views/posts/_form.html.erb
      invoke    test_unit
      create      test/controllers/posts_controller_test.rb
      invoke    helper
      create      app/helpers/posts_helper.rb
      invoke      test_unit
      invoke    jbuilder
      create      app/views/posts/index.json.jbuilder
      create      app/views/posts/show.json.jbuilder
      create      app/views/posts/_post.json.jbuilder
      invoke  test_unit
      create    test/system/posts_test.rb
      invoke  assets
      invoke    coffee
      create      app/assets/javascripts/posts.coffee
      invoke    scss
      create      app/assets/stylesheets/posts.scss
      invoke  scss
      create    app/assets/stylesheets/scaffolds.scss

imageカラムを作成しましたが、これがなんのためにあるのかというと
画像のファイル情報が入る部分となってます。

マイグレーションファイルを実行します。

$ rails db:migrate

carrierwaveをインストール

carrierwaveをGemfileに追加します。

gem 'carrierwave', '~> 1.1'

bundleでインストールします。

bundle install

carrierwaveを使用して画像ファイルをアップロード

アップローダーファイルを作成

$ rails g uploader Image

アップローダーファイルでは、
carrierwaveでの画像に関する設定ができます。
今回はアップローダーファイルは設定しませんが、
アップローダーファイルではライブラリなどを活用して
carrierwaveをカスタマイズできます。
例えば、画像ファイルの制限や
RMagickライブラリを使用したファイルのサイズ設定など
多くのことができます。

モデルファイルにcarrierwaveをマウントする

carrierwaveのアップロード機能を実装するモデルに
アップローダーを設置しておく必要があります。

class Post < ApplicationRecord
    mount_uploader :image, ImageUploader
end

マウントすることによって、
モデルへの画像ファイルのアップロード可能になります。

画像ファイルアップロード用のフォームを作成

ファイルをアップロードするためのフォームを
ビューに作成していきます。


<div class="field">
    <%= form.label :image %>
    <%= form.file_field :image, id: :post_image %>
    <%= form.hidden_field :image_cache %>
</div>

file_fieldの部分がファイル情報のアップロードで
隠しフィールドの部分は、ファイルを保持するためのcacheを送信します。

画像ファイルの表示

デフォルトの場合では、ファイル情報の文言のみ表示されてしまいます。

<%= @post.image %>

上記のような書き方では、画像ではなく文字列のみ表示されてしまいます。
画像を表示させたい場合は、下記のように記述します。
※今回は、作成後はshowページに遷移するのでshowページに画像の表示設定をしておきます。

<p>
    <strong>Image:</strong>
    <%= image_tag @post.image_url %>
</p>

image_tag を使って画像を表示していきます。

画像のアップロードと表示ができるか確認

フォームで画像ファイルを選択してレコードを作成してみます。
登録後、showページに遷移されます。
先ほどの設定showページに画像が表示されるよう設定していますので、表示されるとおもいます


ファイルを選択を押して、画像を選択します。
画像を指定後、create post を押して登録します。


そうするとshowページが映しだされて、画像が上のように表示されるとおもいます。
今回はなにも設定をしていない状態ですので、
アップロードした画像のピクセルがそのまま反映されます。

追記
他にも多くの機能が存在しますので、
別途紹介していきたいとおもいます。

参考文献

, , ,

コメントを残す

%d人のブロガーが「いいね」をつけました。