Rails 3 に paperclip で画像をアップロードした

paperclip という Gem を使うと、Ruby on Rails に手軽に画像をアップロードできる仕組みが作れる。README を読むと一発で動きそうだったけど、世の中、上手くいかないもの。ハマったので、最小限のコードだけ書いておく。

なお、paperclip はデフォールトでファイル・ストレージ、Fog Storage、S3 Storage(aws-sdk 経由) に対応しており、追加の gem のインストールで Azure Storege と Dropbox にも対応する。

• thoughtbot/paperclip · GitHub

利用バージョンは以下の通り:

• Ruby 2.0.0-p0
• Rails 3.2.11
• paperclip 3.4.1

準備

convert への Path 指定

paperclip はバックエンドで ImageMagick を使う。config/environments/development.rb に次の行を追記する。

Paperclip.options[:command_path] = "/usr/bin/"

Path が分からない時は which convert を入力。convert を削った Path が入力すべき文字列になる。

paperclip のインストール

Gemfile に次の一行を追記。

gem "paperclip", "~> 3.0"

bundle install する。

$ bundle install

ソースコードの編集

今、簡単なブログ・システムをサンプルにしている (ref. Ruby on Rails Guides: Getting Started with Rails)。各記事に一つだけ画像を表示する様に変更を加えたい。

Model の変更

app/models/post.rb を変更

class Post < ActiveRecord::Base
  attr_accessible :content, :name, :title, :tags_attributes, :image
...
  has_attached_file :image,
                    :styles => { :medium => "300x300", :thumb => "100x100" },
                    :default_url => "/images/:style/missing.png"
...

各 Post に画像を付ける様にした。

DB migration

画像情報を保存するために DB を変更する。

$ rails generate paperclip post image
$ rake db:migrate

post に image を追加。

Controller の変更

は特になし。@post を作る作業があるけれど、それは Ruby on Rails Guide の中でやっちゃってるからね。

View の変更 — 画像の追加

画像の追加用のコードをビューに追加する。Ruby on Rails Guide の例なら、views/posts/_form.html.erb を開く。<%= form_for のコードを次の様に変更。

<%= form_for @post, :html => { :multipart => true } do |f| %>

適当な位置に次のコードを挿入。

<%= f.file_field :image %>

これで、submit ボタンが押されると、選択した画像がアップされる。

View の変更 — 画像の表示

今回は views/posts/show.html.erb をいじった。次の一行を追加。

<%= image_tag @post.image.url(:medium) %>

見ての通り画像サイズは medium と style で指定したサイズになっている。サムネイル・サイズが欲しければ引数を :thumb に、オリジナル・サイズがよければオプション引数を取らなければいい。

追記

今回はコーディングしなかったけど、ファイルをデタッチするには次のコードを書く。

@post.image = nil
@post.save

記事の破棄用コードの中にでも仕込めばいいかな?

あとがき

一度やってしまえば簡単だけど、初めてだとどうしても勘所が分からないや。そういうわけで、最低限、動くコードだけでもメモとして残しておかないとね。