Monday 16 April 2012

Paperclip チュートリアル


Railsのプラグインであるpaperclipはデフォルトでユーザのモデルなどにアバターの画像を一つ挿入するなど、一つのエントリーに対して一つの画像をアップロードして挿入する構造になっています。ブログなどの記事に複数の記事を導入する際はpaperclipを使用してまず一つ画像用にモデル(たとえばasset)を作成し、複数のモデル(assets)に記事のモデルを一つをくっつける必要があります。チュートリアルビデオは
http://emersonlackey.com/screencasts/rails-3-with-paperclip.mov
にありますが、Railsのバージョンの違いなど若干異なる点があったり、ビデオの中で紹介されている nifty-generators gem は paperclip を使うためだけであれば必要ないなどの項目は省いています。



#---------------------

以下手順

#---------------------

新しいアプリケーションを作成

$ rails new myapp

最低限のブログのモデルをscaffoldを使って作成して、rakde で dbも作成

$ rails g scaffold Post title:string content:text
$ rake db:migrate

サーバを開始してアプリケーションができていることを確認。

$ rails s

ルートのリンクをブログアプリケーションのindexにつなげるため、config/routes.rbを開いて次の行を追加。

  root :to => 'myapp#index'

PaperclipをGemfileに追加。

  gem 'paperclip'

そして bundle install を実行。

$ bundle install

画像ファイル用のモデルを作成(suffixの部分の形式はpaperclipがデフォルトで用意しているので変えないように。)

$ rails paperclip model Asset asset_file_name:string asset_content_type:string asset_file_size:integer asset_updated_at:datetime post_id:integer

dbを作成

$ rake db:migrate

Assetモデルのリレーションを決めるため、次の行を app/models/asset.rb に挿入。デフォルトでは/public/system/の下に画像が保存されるので、これを /public/article/ 以下のフォルダに変更。

  belongs_to :post
  has_attached_file :asset, :styles => { :large => "640x480", :medium => "300x300", :thumb => "100x100" }, :url => "/article/:class/:attachment/:id/:style/:basename.:extension", :path => ":rails_root/public/article/:class/:attachment/:id/:style/:basename.:extension"

Postモデルのリレーションを決めるため、次の行を app/models/post.rb に挿入

  has_many :assets
  accepts_nested_attributes_for :assets, :allow_destroy => true

新しいリレーションを作成するため、postのコントローラの def new と def edit に次の行を追加してサーバを再起動

  5.times { @post.assets.build }

記事を編集・作成するページに画像挿入のフィールドを挿入する。 app/views/_form.html.erb に下の行を追加

  <%= f.fields_for :assets do |asset_fields| %>
  <div class="field">
<%= asset_fields.file_field :asset %>
  </div>
  <% end %>

ここでImageMagickをインストールする必要があるとエラーが出たので、 http://www.imagemagick.org/script/binary-releases.php#macosx の指示に従ってImageMagickをインストール。

表示される画像添付フィールドの数が多いので、これを調整するために app/views/posts/_form.html/erb の一部を if で囲む

  <%= f.fields_for :assets do |asset_fields| %>
<% if asset_fields.object.new_record? %>
<p>
<%= asset_fields.file_field :asset %>
</p>
<% end %>
  <% end %>

dbに登録されている画像を表示。新しく登録するために作成した空の画像を表示しない様に unless 文を使用。画像削除用にdestroyメソッドを利用するcheckboxも用意する。

<% unless asset_fields.object.new_record? %>
<p>
 <%= link_to image_tag(asset_fields.object.asset.url(:thumb) ), asset_fields.object.asset.url(:original) %>
 --> Delete this image. <%= asset_fields.check_box :_destroy %><br />
 <%= asset_fields.object.asset.url(:medium) %>
   </p>
<% end %>

以上でブログの記事に画像をアップロードして貼付けることができます。このブログ記事ではスペリングミスなどできるだけ無いように書いたのですが、もしかすると一部コードなどにミスがあるかもしれません。各自RailsやWEBRickのメッセージと相談してやってみてください。

No comments:

Post a Comment