file_columnプラグインを使ってみる・前　|　Katawara.*

ということで、まただいぶ間を空けてしまってますが。
自分の復習の意味も込めて、画像処理周りのことをまとめます。
前回、RMagickはインストールしたので、そこからどうプログラムに落としていくかのメモ。

プロジェクト作成からテーブル設計まで

まずは、おなじみ。サンプル用お題から。
画像の扱いってことなので、画像管理サイトもどきにしてみます。

イメージとしては、mixiのフォトアルバムみたいなの（わからない人ごめんなさい）。
単純に画像が貼り付けられて、その画像についてのコメントが書ける、というレベルのもの。

プロジェクト作成については、コマンドたたくなり、Aptanaなどのエディタを使うなりで適当に。

テーブルはこんなのを作ってみました。

PLAIN TEXT

MySQL:

CREATE TABLE `images` (
`id` INTEGER UNSIGNED NOT NULL AUTO_INCREMENT,
`image` VARCHAR(255) NOT NULL,
`comment` VARCHAR(50) NOT NULL,
`created_at` DATETIME,
`updated_at` DATETIME,
PRIMARY KEY (`id`)
)
ENGINE = INNODB;

ついでに、created_at・updated_atとやると、登録・更新の際、Railsが勝手に入れてくれるらしいので、一緒に試してみます。

scaffoldからfile_columnプラグインのインストールまで

テーブル設計が終わったので、早速scaffoldしてしまいます。
この辺はもはや説明するまでもないですね。
これまた、適宜自分に一番しっくりしたやり方で作成します。
すると、こーんな感じになるはずですね。

最初の状態

次に、file_columnプラグインをインストールします。
Aptanaだと、Railsプラグインというビューがエディタにあるはずなので、そこから「File Column Plugin」という奴を選択してインストールすればOKです。
コマンドだと、

PLAIN TEXT

CODE:

ruby script/plugin install http://opensvn.csie.org/rails_file_column/plugins/file_column/trunk

ですね。

単純に実行しただけだと、vendor/pluginsの配下にtrunkというディレクトリでできてしまうので、trunkの名前を「file_column」など、わかりやすい名前に変えてしまうとよいでしょう。

実際に使うところまで

プラグインをインストールしたところで、今度は実際に画像がアップロードできるところまで持って行きます。
上の画像の状態だと、アップロードできそうな気配は1ピクセルもありませんので。

まずは、先ほどscaffoldで作った、app/modelsにあるimage.rbに以下のコードを書き加えます。

PLAIN TEXT

RUBY:

class Image <ActiveRecord::Base
# 画像保存処理の設定
file_column :image,
:magick => {
:versions => {
:thumb => {:size => "240x320>"}
}
}
end

「file_column」でプラグインを適用するカラム名、「magick」でオプションをつけます。
今回は、オリジナル画像を保存するほかに、サムネイル用の画像（:thumb）を保存し、そのときのサイズは「240×320」。「ただし、それより小さい画像はそのままとする」。
という設定になっています。
sizeのところの書き方は、ほかにもいくつかありますので、詳細はここを参考にするとよい感じです。

画像ファイルをアップロードして自由に表示したい！その5 - ザリガニが見ていた...。

次に、viewを直します。
_form.rhtmlの5行目。imageカラムのところを変えます。
ついでに、作成日と更新日は消してしまいます。

PLAIN TEXT

HTML:

<%= error_messages_for 'image' %>
<label for="image_image">Image</label>
<%= file_column_field 'image', 'image' %>
<label for="image_comment">Comment</label>
<%= text_field 'image', 'comment' %>

続いて、これだけだと、アップロードができないので、new.rhtmlとedit.rhtmlもこう直します。

PLAIN TEXT

HTML:

<%- form_tag ({:action => 'create'}, :multipart => true) do %>
<%= render :partial => 'form' %>
<%= submit_tag "Create" %>
<%- end %>

PLAIN TEXT

HTML:

<%- form_tag ({:action => 'update', :id => @image}, :multipart => true) do %>
<%= render :partial => 'form' %>
<%= submit_tag 'Edit' %>
<%- end %>

すると、こんな感じに。
ちなみに、プラグインをインストールした後は、きちんとサーバーを再起動させてください。
でないとNoMethodErrorが出ちゃいます。

修正後の状態

おお。いい感じですね^^
ためしに登録してみると、これであっさりとうろくできちゃいます。
さりげなく、登録日も更新日も勝手に入ってくれてますね。

じゃあ、できたものを早速確認してみます。

orz

……orz

確かに画像はアップロードできているらしい（プロジェクトを更新してみると、うまいこと中にファイルが格納されてます）
画像が表示できるところまで行くには、もうちょっと努力が必要みたいです。
長くなってきたので、もうちょっとつづく。

Via：

Katawara.*