» TechAcademyの無料体験

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

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

テックアカデミーWebアプリケーションコースの第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回も頑張っていきたいです!

次回はこちら

テックアカデミーを無料体験して見る!

コメント

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