この記事では、テックアカデミー（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:migratemodels/user.rb に、
mount_uploader :image, ImageUploaderを追加。
controllers/users_controller.rb
private
def user_params
params.require(:user).permit(:nickname, :image)
endpermit に 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
endviews/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アプリケーションコースを終えての記事も書いているので、よかったら見てみてください！
コメント