Rails3での画像アップロードの実装(ImageMagick + Rmagick + file_column)
Rails3 で ImageMagick + Rmagick + file_column を使用しての画像アップロードを実装する方法です。
環境として、 Mac OS X 10.6 + Rails3.0.7 です。
実装にあたって、ruby 1.9.2 + Rails 3.0 + file_column 2010-09-27 - 篳篥日記 を参考にさせていただきました。
ImageMagick + Rmagick + file_column のインストール
ImageMagick + Rmagick + file_column のインストールをします。
Rmagick と file_column は Railsプロジェクトを作成してからインストールします。
ImageMagick のインストール
最初にImageMagickをインストールします。
インストールには、Mac Port を使用しました。
$ sudo port install ImageMagick
念のため、ちゃんとインストールされたかを確認。
$ port installed
The following ports are currently installed:
〜 省略 〜
ImageMagick @6.6.1-5_0+q16 (active)
Rmagick のインストール
プロジェクトを作成したら、Rmagick をインストールします。
Gemfile に以下の行を追記します。
gem 'rmagick', :require => 'RMagick'
追記が完了したら、「bundle install」で Rmagick をインストールします。
$ bundle install Fetching source index for http://rubygems.org/ 〜 省略 〜 Installing rmagick (2.13.1) with native extensions Using ruby-mysql (2.9.4) Your bundle is complete! Use `bundle show [gemname]` to see where a bundled gem is installed.
file_column のインストール
次に file_column をインストールします。
file_column は 「rails plugin install」でインストールしました。
$ rails plugin install git://github.com/tekin/file_column.git Initialized empty Git repository in /var/www/rails/project/vendor/plugins/file_column/.git/ remote: Counting objects: 35, done. remote: Compressing objects: 100% (33/33), done. remote: Total 35 (delta 4), reused 13 (delta 1) Unpacking objects: 100% (35/35), done. From git://github.com/tekin/file_column * branch HEAD -> FETCH_HEAD
scaffold 〜 画像アップロードの実装
ここまでで、インストール系の作業が終わったので、次に scaffold を使ってCRUDをジェネレートした後で、
画像アップロードを実装します。
scaffold を実行
最初に scaffold で CRUD を生成します。
今回は Goods という名前で生成しました。
# 余談ですが、「Goods」という名前で生成すると、modelが「Good」という名前になってしまいます。
# 英語的には単数形/複数形ではなく、違う意味になってしまいました。
$ rails generate scaffold Goods name:string quantity:integer comment:string image:string $ rake db:migrate
Migration用のファイルは以下のようになります。
# # db/migrate/YYYYMMDDhhmmss_create_goods.rb # class CreateGoods < ActiveRecord::Migration def self.up create_table :goods do |t| t.string :name t.integer :quantity t.string :comment t.string :image t.timestamps end end def self.down drop_table :goods end end
Model の変更
次に、さっきの scaffold で生成された Model を下記のように変更します。
画像保存先ディレクトリや、アップロード時に生成するサムネイル画像のサイズ等を指定します。
# # app/models/good.rb # class Good < ActiveRecord::Base file_column :image, :root_path => "#{Rails.root}/public", :web_root => "goods/", # 画像保存先ディレクトリ :magick => { :versions => { :thumb => { :crop => "1:1", :size => "50x50" }, # サムネイル画像の比率・サイズ指定 :middle => "150x150>", # 中サイズ画像のサイズ指定 :large => "480x480>" # 大サイズ画像のサイズ指定 } } end
View の変更(登録用フォーム)
次に、登録用フォームのViewに以下のように追記をします。
form_for で「multipart」を指定し、「file_column_field」を使用して入力フィールドを表示させます。
<!-- app/views/goods/_form.html.erb --> <!-- :html => { :multipart => true } を指定 --> <%= form_for(@good, :html => { :multipart => true }) do |f| %> <div class="field"> <%= f.label :name %><br /> <%= f.text_field :name %> </div> 〜 省略 〜 <!-- サムネイル画像 --> <div class="field"> <%= f.label :image %><br /> <!-- file_column_fieldを使う --> <%= file_column_field "good", "image" %> </div> <div class="actions"> <%= f.submit %> </div> <% end %>
View の変更(確認用フォーム)
今度は、確認用フォームのViewに以下のように追記をします。
今回はお試しとして、サムネイル画像、中サイズ画像、大サイズ画像 をそれぞれ表示させるようにしてみました。
<!-- app/views/goods/show.html.erb --> <p id="notice"><%= notice %></p> <p> <b>Name:</b> <%= @good.name %> </p> 〜 省略 〜 <!-- サムネイル画像 --> <p> <b>thumb:</b> <%= image_tag(url_for_image_column(@good, "image", :thumb)) if @good.image %> </p> <!-- 中サイズ画像 --> <p> <b>Image(middle):</b> <%= image_tag(url_for_image_column(@good, "image", :middle)) if @good.image %> </p> <!-- 大サイズ画像 --> <p> <b>Image(large):</b> <%= image_tag(url_for_image_column(@good, "image", :large)) if @good.image %> </p> <%= link_to 'Edit', edit_good_path(@good) %> | <%= link_to 'Back', goods_path %>
これで画像アップロードの実装は完了になります。
あとは、Webサーバーを起動させて、動作確認になります。
今回参考にしたページ
ruby 1.9.2 + Rails 3.0 + file_column 2010-09-27 - 篳篥日記
http://d.hatena.ne.jp/hichiriki/20100927
file_columnで画像アップロードとサムネイル - このブログは証明できない。
http://d.hatena.ne.jp/shunsuk/20080521/1211369857
flyman のおもちゃ箱 - 画像のアップロード
http://www.kestrel.jp/modules/tinyd04//content/index.php?id=4
Rails開発 七転八起 file_column プラグインの使い方
http://yasrails.blog33.fc2.com/blog-entry-16.html