railsでメジャーな画像保存用のgemを使ってみる

imageの保存について

選択肢

pageclipの場合

基本READMEどおりだけど作業メモとして。

手順としては、インストールは飛ばすと

  1. モデルで設定を追記
  2. migrationを追加
  3. formを作成
  4. upload & done

といった感じ。

imageMagickが必須なので入れる。

brew install imagemagick

gemfileに追加

gem "paperclip", "~> 3.0"

modelはこんな感じに

class User < ActiveRecord::Base
  has_attached_file :avatar, :styles => { :medium => "300x300>", :thumb => "100x100>" }, :default_url => "/images/:style/missing.png"
  validates_attachment_content_type :avatar, :content_type => /\Aimage\/.*\Z/
end

migrationには以下を追加

add_attachment :users, :avatar

これはコマンドでもできるとのこと。

rails generate paperclip user avatar

formはこんな感じでOK。

<%= form_for @user, :url => users_path, :html => { :multipart => true } do |form| %>
  <%= form.file_field :avatar %>
<% end %>

multipartをtrueにすると、enctype="multipart/form-data" とformタグに追加されます。MIMEのマルチパートデータで送るということです。

MIMEのマルチパートデータとは

データをheaderとbodyの2つじゃなく、もっと複数にわけて送るよって仕様みたい。

で、表示はこんな感じ。

<%= image_tag @user.avatar.url %>
<%= image_tag @user.avatar.url(:medium) %>
<%= image_tag @user.avatar.url(:thumb) %>

carrierwaveの場合

gemfileにまずは追加

gem 'carrierwave'

generateコマンドをする.

rails generate uploader Avatar

するとapp/uploaders/avatar_uploader.rbのファイルができる。ここにいろいろとカスタマイズする内容を書くそう。

追加したいモデルにimage columnを追加

rails g migration add_image_to_users image:string

フォームはpageclipとほぼ同じで

<%= form_for @user, :html => {:multipart => true} do |f| %>  
  <p>  
    <%= f.file_field :image %>  
  </p>  
  <p><%= f.submit %></p>  
<% end %>  

multipartにして、uploadフォームを用意してpostすればOK.

S3を使う場合

ここ見とく。

RailsとCarrierWaveでAmazon S3に画像を保存する | Workabroad.jp

関連して

carrierwaveを使うとき、単純にmountするんじゃなく、imageクラスをつくって、ポリモーフィック関連をつくることがあります。

【Rails】ActiveRecord:単一テーブル継承(sti)とポリモーフィック関連を未だにぱっと思い出せないのでまとめ。 - 記すに足らず。

例えばParentA,ParentBクラスが画像をもつ場合はこんな感じ。

class ParentA < ActiveRecord::Base
  has_many :images, :as => :imageable
end

class ParentB < ActiveRecord::Base
  has_many :images, :as => :imageable
end

class Image < ActiveRecord::Base
  belongs_to :imageable, :polymorphic => true
  mount_uploader :file, ImageUploader
end

実際に使い込むとなるとCarrierWaveのほうがいろいろできるそうですが、まぁそのあたりはまたの機会に。