画像ファイルをアップロードして自由に表示したい!その5

RoR Wiki 翻訳 Wiki - HowtoUploadFilesの中で、file_columnという、ファイルと画像の、アップロードや表示、管理をとても簡単に実現できるプラグインが紹介されていた。早速、試してみる。

利用環境

  • MacBook 10.4.8(X11環境インストール)
  • Locomotive RMagick Rails Bundle Sept 2006
  • RadRails 0.7.2(日本語化Pleiades1.2.0_preview11)

インストール

Locomotive RMagick Rails Bundle Sept 2006 x86

file_columnプラグインを利用するためには、RMagickとImageMagickが必要になる。Locomotiveには、RMagick Rails Bundle Sept 2006 x86版があるので、これをインストールすればOK。ダウンロードしたディスクイメージを開いて、指示通り、rmagickRailsSept2006_x86.locobundleフォルダを、/Applications/Locomotive2/Bundles/フォルダの中にコピーした。

RadRailsの環境設定

RMagick Rails Bundle Sept 2006 x86版をインストールしたら、RadRailsの環境設定を変更した。変更箇所は、以下のコマンドサーチパスを設定するところ。

Rails パス /Applications/Locomotive2/Bundles/rmagickRailsSept2006_x86.locobundle/framework/bin/rails
Rake パス /Applications/Locomotive2/Bundles/rmagickRailsSept2006_x86.locobundle/framework/bin/rake
Mongrel パス /Applications/Locomotive2/Bundles/rmagickRailsSept2006_x86.locobundle/framework/bin/mongrel_rails
RDoc パス(R): /Applications/Locomotive2/Bundles/rmagickRailsSept2006_x86.locobundle/framework/bin/rdoc
Ri パス(I): /Applications/Locomotive2/Bundles/rmagickRailsSept2006_x86.locobundle/framework/bin/ri
  • Ruby >> インストール済
インタープリター名: 1.8.4 with RMagic
ローケーション: /Applications/Locomotive2/Bundles/rmagickRailsSept2006_x86.locobundle/framework/bin/ruby
X11

X11環境については、自分のMacBookには最初からインストール済だった。必要な場合は、MacBookのインストールDVDからインストールできる。

file_column

RadRailsの「Railsプラグイン」タブの中に、file_columnが載っている。選択して、実行ボタンを押せばインストールが始まる。vendor/pluginsフォルダの中にtrunkというフォルダ名でインストールされる。わかり易くフォルダ名をfile_columnに変更した。

使ってみる。

データベースの設定
マイグレーション
db/migrate/001_create_softwares.rb
class CreateSoftwares < ActiveRecord::Migration
  def self.up
    create_table :softwares do |t|
      t.column :image, :string
    end
  end

  def self.down
    drop_table :softwares
  end
end
シンプルな例
  • 以下のコードだけで、アップロードしたファイルをそのまま表示してくれる。とても簡単だ。ファイルに保存していることを忘れてしまいそう。
モデル
app/models/software.rb
class Software < ActiveRecord::Base
  file_column :image
end
ビュー
app/views/softwares/new.rhtml(フォーム入力)
<%= start_form_tag({:action => 'create'}, :multipart => true) %>
  <%= file_column_field 'software', 'image'  %>
  <%= submit_tag 'Create' %>
<%= end_form_tag %>
  • start_form_tag の :multipart => true を忘れずに。
  • start_form_tag の () と {} を忘れずに。
ビュー
app/views/softwares/show.rhtml(表示)
<%= image_tag url_for_file_column(@software, :image) %>
いろいろな設定例

以下は、ほんの一例だが、画像表示に関するかなり細かな設定をすることが出来る。詳細は、Rdocを参照。

モデル
app/models/software.rb
# アップロードされたファイルを800x600にリサイズして保存する。
class Software < ActiveRecord::Base
  file_column :image, :magick => {:size => "800x600>"}
end
# アップロードされたファイルをオリジナル、100x100、320x240、640x480の4種類にリサイズして保存する。
class Software < ActiveRecord::Base
  file_column :image, 
    :magick => {:versions => {
      :small  => {:size => "100x100"},
      :medium => {:size => "320x240>"},
      :large  => {:size => "640x480!"}
    }
  }
end
  • "320x240"、"320x240>"、"320x240!"の違い
    • "320x240" 縦横比を維持して、このサイズに収まる大きさにする。
    • "320x240>" これより小さい画像は小さいまま、拡大しない。
    • "320x240!" 縦横比を無視して、このサイズぴったりに合わせる。
  • :small、:medium、:largeは自分の好きなキー名に出来る。
    • 極端な話、:s、:m、:l、:xlなんてキー名でも良い。
ビュー
app/views/softwares/show.rhtml(表示)
  <%= image_tag url_for_file_column(@software, :image) %>
    <%# オリジナルファイルをそのまま表示する。 %>
  <%= image_tag url_for_image_column(@software, "image", :small) %>
    <%# smallサイズで保管した画像を表示する。 %>
  <%= image_tag url_for_image_column(@software, "image", "100x100") %>
    <%# 100x100サイズにリサイズして画像を表示する。 %>
  <%= image_tag url_for_image_column(@software, :image, :size => "200x200", :crop => "1:1", :name => "thumb") %>
    <%# 1:1にトリミングして、200x200にリサイズ、thumbという名前のフォルダで管理、そして画像を表示する。 %>
  <%= link_to "download", url_for_file_column(@software, :image) %>
    <%# ダウンロードリンクをクリックすると、オリジナルファイルが表示される。 %>
  • url_for_file_column()とurl_for_image_column()はオプション引数に違いがある。
    • url_for_file_column(@software, :image)第2引数まででOK。
    • url_for_image_column(@software, :image, :small)第3引数まで設定しないとエラーになった。
モデル
app/models/software.rb(検証)
class Software < ActiveRecord::Base
  validates_file_format_of :image, :in => ["gif", "png", "jpg"]
  validates_file_format_of :image, :in => ["image/jpeg"]
  validates_filesize_of :image, :in => 0..100.megabytes
  validates_filesize_of :image, :in => 15.kilobytes..1.megabyte
  validates_image_size :image, :min => "800x600"
  • 上記は、マニュアルに載っていたバリデーションの例


素晴らしい使い心地です。ファイルや画像を扱うならインストールしておくと幸せになる。今までの苦労は何だったのかと...。