【体験談】テックアカデミーメンタリング13回目:画像アップロード機能の実装

【体験談】テックアカデミーメンタリング13回目:画像アップロード機能の実装 テックアカデミー体験記
記事内に広告が含まれています。

この記事では、テックアカデミー(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アプリケーションコースを終えての記事も書いているので、よかったら見てみてください!

コメント

タイトルとURLをコピーしました