【Ruby on Rails】CarrierWaveの使い方
- 2018.09.05
- Ruby on Rails
- Ruby on Rails
こんにちは、nishi_talk(@nishi_talk)です。
Railsの入力画面に画像を挿入したいときがあるかと思います。
今回は画像をアップロードできるgem「CarrierWave」の使い方をご紹介します。
そうなった時の対処方法をご紹介します。
今回使用する「carrierwave」の公式サイトはこちら。
ドキュメントなどは本家を参考にしてください。
gemのインストール
Gemfileにcarrierwaveの記述を追加します。
gem 'carrierwave'
記述を追加したら、bundle installを実行。
$ bundle install
uploaderを作成
無事にインストールが実行されたら、以下のコマンドを実行してuploader用のrubyファイルを作成します。
$ rails g uploader image
app/uploaders/image_uploader.rbが作成されます。
こちらのファイルで、画像アップロード時のもろもろ設定を記述します。
基本的に自分が使用したい箇所のコメントアウトを外すだけでOK。
class ImageUploader < 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
# Provide a default URL as a default if there hasn't been a file uploaded:
# def default_url(*args)
# # For Rails 3.1+ asset pipeline compatibility:
# # ActionController::Base.helpers.asset_path("fallback/" + [version_name, "default.png"].compact.join('_'))
#
# "/images/fallback/" + [version_name, "default.png"].compact.join('_')
# end
# Process files as they are uploaded:
# process scale: [200, 300]
#
# def scale(width, height)
# # do something
# end
# Create different versions of your uploaded files:
# version :thumb do
# process resize_to_fit: [50, 50]
# end
# Add a white list of extensions which are allowed to be uploaded.
# For images you might use something like this:
# アップロードできる拡張子を制限
def extension_whitelist
%w(jpg jpeg gif png)
end
# Override the filename of the uploaded files:
# Avoid using model.id or version_name here, see uploader/store.rb for details.
def filename
"something.jpg" if original_filename
end
end
画像用のカラムを追加
画像の登録用にカラムを追加します。
例えば、ユーザーのアイコンだったり、投稿のアイキャッチだったりの場合はそれぞれ該当するモデルにカラムを追加します。
※今回はuserモデルに追加を想定
$ rails g migration add_image_to_user image:string
モデルに追加
app/model/user.rb
class User < ApplicationRecord mount_uploader :image, ImageUploader end
permitに画像の記述を追加
ユーザー情報を登録するコントローラーのpermitにimage（:image）を追加します。
それぞれの環境にあわせて記述してください。
app/controllers/controller.rb
params.permit(:id, :name, :image)
## 入力側
最後に登録するViweにファイルアップロードの入力項目を追加します。
※今回はuserの編集画面を想定
app/views/users/edit.rb
<%= f.label :顔画像 %> <%= f.file_field :image %>
表示側
最後に、表示させたい箇所に以下を記述します。
app/views/users/show.rb
<img src="<%= @user.image %>" width="100">
未経験からでもエンジニアにはなれる！
中堅の年代になり、最近よくどうやってエンジニアになったんですか？と聞かれる機会が多くなりました。私は転職組で未経験からエンジニアになりました。 そこら辺のストーリーは「未経験からWebデザイナーになった経緯を紹介」で書いているのでそちらをご覧ください。
当時はWebの技術を教えてくれるスクールがあまりなく、私はWebの勉強は独学で勉強し転職したのですが、今はスクールの数も多くなっていてオンラインで受講できるところも増えてきました。
もし私が未経験でエンジニアを目指すなら活用したいスクールを紹介してますので興味ある方はぜひ参考にしてくだいさい！
tech boostオンライン
tech boostはエンジニアに特化したキャリアサービスを展開しているBranding Engineerが運営するオンラインプログラミングスクールです。
エンジニアに特化したキャリアサービスを展開しているからこそのカリキュラムを実現しています。 また、転職サポート付きでスクール卒業後もキャリアも安心です。
オンラインスクールだからいつでもどこでも受講可能！これからプログラミングを学びたい方、エンジニアにキャリアチェンジを考えている方に、 特にオススメのサービスです。
CodeCamp（コードキャンプ）
オンライン・マンツーマン指導のプログラミングスクールとしてNo.1*の実績を持つサービスです。高い学習効果が評価されテレビや新聞、ビジネス誌など*多くのメディアで紹介されています。
講師は全て現役のエンジニア。未経験から確実に習得するために開発されたオリジナルカリキュラムでWebデザイン、Webサービス開発、アプリ開発などを幅広く学習することができます。
多くの受講生が、現役エンジニアの手厚いマンツーマン指導によって確実にプログラミングを習得し、キャリアアップ・転職・独立起業などの目標を実現しています。
DMM WEBCAMP
転職を本気で考えている方向けのプログラミングスクールです。転職を保証しているため、未経験からIT業界へ転職を求めている方へおすすめです！
プログラミング未経験者でも安心のサポート体制をご用意しており、特に受講者アンケートでは『サポート体制がしっかりしていて魅力的』、『転職を保証していただいていることで安心』というレビーが多くしっかとしたサポートを提供しています。
実務に近い実践的なカリキュラムで、DMM WEBCAMPはチーム開発など、実務により近い実践的カリキュラムを導入しているため、転職先・就職後にいち早く活躍できるスキル・経験を積むことができます。
Udemy
私の周りの現役のエンジニアの人も活用しています。基礎をしっかり固めたい方や、実践向けの配信など幅広く解説している動画が豊富にアップされているので活用するのはオススメです。
習得したいスキル（プログラム言語）が明確で、年収アップのために学習している方やAI・機械学習を学んでスキルアップを目指しているエンジニアの方に支持されているます。
1講座あたり数千～数万円程度で実践的なスキルアップを経済的でオススメです。
