Hatena::ブログ(Diary)

hogehoge foobar Blog Style5

2011-05-09

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)
Rails プロジェクトの作成

次に Rails プロジェクトを作成します。

$ rails new project
$ cd project
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 を実行

最初に scaffoldCRUD を生成します。

今回は 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

山本彩 水着画像山本彩 水着画像 2013/12/17 16:48 ありがとうございます☆*:.。. o(≧▽≦)o .。.:*☆

役に立ちました(笑)

スパム対策のためのダミーです。もし見えても何も入力しないでください
ゲスト


画像認証

リンク元