この記事では、テックアカデミー(Webアプリケーションコース)のメンタリング第13回目の内容について書いています。
内容としては、画像アップロード機能についてです!
テックアカデミーのメンタリング第13回目の内容
内容としては、以下です。
- ローカルで画像アップローダーの実装
- Heroku で画像アップローダーの実装
ローカルで画像アップローダーを実装

ローカル環境でアップローダーを実装していきます!
Rails 超お手軽な画像アップローダーCarrierWave の使い方 の記事を参考に実装しました。
まず gemfile に
gem 'carrierwave'
gem 'rmagick'
を記述。
ImageMagick をインストールする必要があるので、Cloud9 を使っている場合、ターミナルで以下を実行します。
sudo yum -y install libjpeg-devel libpng-devel
sudo yum -y install ImageMagick ImageMagick-devel
bundle install
以降、User モデルは元からある状態として書いていきます。
rails g uploader image
rails g migration add_image_to_users image:string
rails db:migrate
models/user.rb
に、
mount_uploader :image, ImageUploader
を追加。
controllers/users_controller.rb
private
def user_params
params.require(:user).permit(:nickname, :image)
end
permit に image カラムを追加(nickname は元から記述してある)
app/uploaders/image_uploader.rb
class ImageUploader < CarrierWave::Uploader::Base
include CarrierWave::RMagick
process :resize_to_limit => [700, 700]
process :convert => 'jpg'
version :thumb do
process :resize_to_limit => [300, 300]
end
def extension_white_list
%w(jpg jpeg gif png)
end
end
views/users/new.html.erb
<%= form_for(@user) do |f| %>
<%= f.label :image, '画像' %>
<%= image_tag @user.image.thumb.url if @user.image? %>
<%= f.file_field :image %>
<%= f.hidden_field :image_cache %>
<% end %>
バリデーションに引っかかってもアップロードした画像が消えないようにするために image_cache を追加しています。
views/users/show.html.erb
<% if @user.image? %>
<%= image_tag @user.image.thumb.url %>
<% else %>
<img class="media-object img-circle img-responsive" src="<%= gravatar_url(@user, { size: 500 }) %>" alt="">
<% end %>
これで、ローカルでのアップローダー実装完了です!
Herokuで画像アップローダーを実装

続いて Heroku でアップローダーの実装をしていきます!
gemfile に
gem 'cloudinary'
を追加して、bundle install
を実施。
app/uploaders/image_uploader.rb
に、
if Rails.env.production?
include Cloudinary::CarrierWave
else
storage :file
end
と、
def public_id
model.id
end
を追加します。
Heroku は production 環境で動いているため、Cloudinary を使用し、Cloudinary から画像を参照するためのキーを指定しています。
これで、Heroku にデプロイすれば画像アップロード機能の完成です!
テックアカデミーのメンタリング第13回目を終えて|まとめ
ここまで、テックアカデミー(Webアプリケーションコース)のメンタリング13回目の内容について書いてきました。

今回は、画像アップロードの機能がメインでした!
次回は、メンタリング最終回です!
テックアカデミーのWebアプリケーションコースを終えての記事も書いているので、よかったら見てみてください!

コメント