CarrierWave の使い方 by チュートリアル11章
CarrierWaveとは画像をアップロードや画像リサイズができるgemのこと
早速実装方法を解説します。
1. gemfileに
gem 'carrierwave' #アップローダー
gem 'mini_magick'#リサイズ機能
gem 'fog'#本番環境に画像をアップする
を追加。
2. $ bundle install
3. $ rails g uploader Picture #pictureモデルのアップローダーを生成
4. $ rails g migration add_picture_to_microposts picture:string #micropostモデルにpictureカラムを追加
5. $ rake db:migrate
6. models/micropost.rbに
mount_uploader :picture, PictureUploader
と一行書き足す。mount_uploaderはメソッドで、赤字部分はアップローダーのクラス名を指していることに注意 。
7. viewにアップロードフォームをさくせいする
_micropost_form.html.erb
(ハイライト部分が書き足したコード)
<%= form_for(@micropost, html: { multipart: true }) do |f| %> <%= render 'shared/error_messages', object: f.object %> <div class="field"> <%= f.text_area :content, placeholder: "Compose new micropost..." %> </div> <%= f.submit "Post", class: "btn btn-primary" %> <span class="picture"> <%= f.file_field :picture %> </span> <% end %>
html: { multipart: true } はファイルをアップロードする際に必要なオプションです
8. app/controllers/microposts_controller.rb内の
strongparamsに:pictureを追加
params.require(:micropost).permit(:content, :picture)
9. app/views/microposts/_micropost.html.erb
マイクロポストの画像表示をするために一行追加
picture? はbooleanを返してくれる。trueなら画像を表示してくれる
ここまでで画像投稿と表示はできるようになります。ここから下は画像のリサイズをしていきます。
10. app/uploaders/picture_uploader.rbにバリデーション
def extension_white_list
%w(jpg jpeg gif png) #これらの拡張子のみ表示できる
end
11. app/models/micropost.rb 内で画像サイズのバリデーション
(ハイライト部分を新たに記述すること)
class Micropost < ActiveRecord::Base belongs_to :user default_scope -> { order(created_at: :desc) } mount_uploader :picture, PictureUploader validates :user_id, presence: true validates :content, presence: true, length: { maximum: 140 } validate :picture_size private # アップロード画像のサイズを検証する def picture_size if picture.size > 5.megabytes errors.add(:picture, "should be less than 5MB") end end end
12. ファイルサイズをJqueryで確認
app/views/shared/_micropost_form.html.erb
(ハイライト部分が追加したもの)
<%= form_for(@micropost, html: { multipart: true }) do |f| %>
<%= render 'shared/error_messages', object: f.object %>
<div class="field">
<%= f.text_area :content, placeholder: "Compose new micropost..." %>
</div>
<%= f.submit "Post", class: "btn btn-primary" %>
<span class="picture">
<%= f.file_field :picture, accept: 'image/jpeg,image/gif,image/png' %>
</span>
<% end %>
<script type="text/javascript">
$('#micropost_picture').bind('change', function() {
var size_in_megabytes = this.files[0].size/1024/1024;
if (size_in_megabytes > 5) {
alert('Maximum file size is 5MB. Please choose a smaller file.');
}
});
</script>
バリデーションが完成しました。
13. 画像のリサイズ
まずリサイズするために必要なimagemagickをインストールしていく
$ sudo apt-get update $ sudo apt-get install imagemagick --fix-missing
macユーザーはapt-getが使えないことがあるので、そうなったらapt-getをbrewに変更してみてください。
14. リサイズするためにアップローダーを修正する
class PictureUploader < CarrierWave::Uploader::Base
include CarrierWave::MiniMagick
process resize_to_limit: [400, 400]
400のところは任意で設定できます。
ここまででアップロードと画像のリサイズを実装できました!!拍手!!!
本番環境でのアップロード(fog)に関しては後日追加していきます。