Ruby好き非エンジニアのブログ

〜Ruby on Railsの学習記録〜

画像アップロード

前回の続きですが、プロフィール画像をアップロードする機能を実装していきます。

今回から少しずつHerokuを使っていくので、アカウント登録がまだの場合は下記など参照の上、Herokuの登録と、Herokuをコマンドラインからコントロールできるようにするための「Heroku toolbelt」のインストールをおこなってみてください!

Heroku初心者がHello, Herokuをしてみる - Qiita

※HerokuとはPaaS(Platform as a Service)と呼ばれるサービスで、
アプリケーションを実行するためのプラットフォームです。


では登録が済んだらアプリケーションの作成。

$ heroku create (Herokuアプリケーション名)

※入力時にHerokuのメールアドレスとパスワードを求められるので入力してください。


アプリケーションを作成したら、下記のコマンドを実行してCloudinaryのアドオンを適用します。
参照URL:
Rails & CarrierWave integration | Cloudinary

Cloudinary + Carrierwave + Heroku + Railsでの画像を手軽に利用する方法 - Qiita

$ heroku addons:create cloudinary:starter

そして、Gemfileに

gem 'cloudinary'
gem 'carrierwave'

を追加し、bundle installを実行。

下記コマンドで画像のアップローダーを作成。

rails generate uploader Avatar

出来上がったapp/uploaders/avatar_uploader.rbにアップロードに関する記述をしていきます。

if Rails.env.production?
  include Cloudinary::CarrierWave
else
  storage :file
end


process :convert => 'png'
  process :tags => ['avatar']

  version :standard do
    process :resize_to_fill => [100, 150, :north]
  end

  version :thumbnail do 
    process :resize_to_fit => [50, 50]
  end
  ・・・
  def public_id
    model.id
  end

※「Rails.env.production?」・・・Railsがproductionモードで動いている時にtrueを返すメソッド

続いて、Userモデルにavatarのカラムを追加します。

$ rails g migration AddAvatarToUsers avatar:string

$ rake db:migrate

ついでに、
app/controllers/users_controller.rbのstrong paramaterにavatarを追加。


app/models/user.rbに下記を追加。

attr_accessor :avatar
・・・
mount_uploader :avatar, AvatarUploader

プロフィール編集のフォームに画像登録を追加。
app/views/users/edit.html.erb

<div class="avatar_edit">
  <%= image_tag(@user.avatar.url(:thumbnail), :width => 80, :height => 80) %>
  <%= f.label :画像登録 %>
  <%= f.file_field :avatar %>
</div>

※file_fieldヘルパーでファイルボックスを作成できます。

app/views/users/show.html.erb

<%= image_tag(@user.avatar_url) %>

を追加。


あとは、cloudinaryのチュートリアルを参考に、

cloudinaryにてcloudinary.ymlダウンロード
configに保存。

environment.rbに下記を追加

config.gem 'carrierwave',:version => '〜>0.4.10'
config.gem 'cloudinary'


見た目は置いておいて…出来上がった画面はとりあえずこんな感じです。
f:id:Jyoko:20161106155908g:plain

ここで「ファイル選択」→「更新」をするとエラー発生。

UsersControllerのUpdateメソッドの下記部分。

if @user.update_attributes(user_params)

convertのメソッドがありませんよ?とのことでした。

public/uploads/tmp/****内にuploadした画像は保存されている模様。
保存→コンバート→表示の過程でエラーが発生しているのかなーと思いつつ。。

とりあえずconvert部分の記述を一度コメントアウト
app/uploaders/avatar_uploader.rb

#process :convert => 'png' 
#process :tags => ['avatar']

#version :standard do
  # process :resize_to_fill => [100, 150, :north]
#end

#version :thumbnail do 
  # process :resize_to_fit => [50, 50]
#end
  
# Create different versions of your uploaded files:
  # version :thumb do
  # process :resize_to_fit => [50, 50]
# end

そして、上記でversion :thumbnailをコメントアウトしたので、
app/views/users/edit.html.erbの:thumbnailも削除。

<%= image_tag(@user.avatar.url(:thumbnail), :width => 80, :height => 80) %>
↓
<%= image_tag(@user.avatar.url, :width => 80, :height => 80) %>

これで再度アップロードを試してみると、無事マイページに画像が表示されました。
f:id:Jyoko:20161106160800g:plain

まだまだエラー盛りだくさんですが、画像が表示されたのでとりあえず今日はこの辺で。
見た目も悪いので、徐々にレイアウトも調整していきたいと思います。



追記:
前回更新からかなり日にちが空いてしまったのでうろ覚えで書いてます(汗
ゆっくりなペースではありますが、もう少しコンパクトにして更新するようにします。