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

テックアカデミー第13回目メンタリング~画像アップロード機能の実装、CarrierWaveやrmagick~テックアカデミー

TechAcademy [テックアカデミー]Webアプリケーションコース(8週間プラン)第13回目となるメンタリング。今回は画像アップロード機能の実装についての内容です。

 

前回までのメンタリング

 

【第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回目【まとめ】

今回のメンタリングで、実現したいほぼ全ての機能を実装することができました!

 

余力があればフォローボタンやお気に入りボタンを押したときに画面遷移がでないようにajaxを使うのも良いかもというアドバイスももらったので、残り2回も頑張っていきたい!

 

 

次回はこちら

テックアカデミーメンタリング14・15回目:テストコード、これからについて
テックアカデミーWebアプリケーションコース(8週間プラン)第14・15回目の内容について書いています。今回で最後となるメンタリングでした。具体的には、カリキュラムでは組まれていなかったテストコードについてと今後についてです。

コメント