シンのおもちゃ箱 - API研究所

APIやアプリケーションを使ってみて、その実装手順や所要時間、実装したうえでの感想などを書いてます。

Rails4 + dragonflyで画像のアップロード

Rails4 + dragonflyで画像のアップロード

dragonfly概要

開発者用サイト
特徴
  • Rails3からよく使われている画像アップロード用gem
  • 画像を保存する際は、画像をクロップしてから保存しておく場合と、表示するときにクロップする場合の2パターンが主に存在するが、dragonflyは後者。
  • 表示するときにクロップするので、サイズが決まっていない場合は特に便利。
  • cache機能を持っているので、パフォーマンスもそんなに問題はない
  • 画像に関するプロパティを取得するメソッドも多数定義されているので便利

今回の目的

  • 簡単に画像アップロードを実装する

作業(2.5h)

  1. ドキュメント閲覧(1h)
  2. gemのインストール(1min)
  3. dragonflyの設定ファイル作成(1min)
  4. modelの設定(2min)
  5. migrationファイルを作成(5min)
  6. viewの作成(20min)
  7. controllerの作成(1h)
gemのインストール



(Gemfile)

gem 'dragonfly', "~>1.0.0"


bundle install

dragonflyの設定ファイル作成
  • config/initializers/dragonfly.rbに設定ファイルが作成される



rails generate dragonfly

modelの設定



class Photo < ActiveRecord::Base

  dragonfly_accessor :image

end

migrationファイルを作成
  • uidカラムを追加。名前は「dragonfly_accessorに指定した値」＋「_uid」にしておく
  • このuidカラムにはファイルのパスが入る



add_column :photos, :image_uid,  :string

viewの作成
  • を生成する



<% form_for(@photo, :html => {:multipart => true} do |f| %>

  ...

  <%= f.file_field :image %>

  ...<% end %>

注意) Rails < 3.2: You'll need to add :html => {:multipart => true} to the form tag helper. と書いてあったが、Rails4でも:multpart => trueが必要だった

controllerの作成
  • photo.imageに先ほどのファイルパラメータを指定すると、勝手にimage_uidカラムにファイルパスが入り、そのファイルパスに指定したファイルが保存される



photo = Photo.new(params[:photo])

# photo = Photo.new

# photo.image = params[:photo][:image]でもよい

photo.save

成果物

結果・感想

  • 簡単に画像アップロードを実装できた
  • ファイルアップロード用ボタンがあるのがダサいので、jquery uiなどを使ってやらないと、今風にはならない。。。それ用のいいライブラリはないだろうか。。。
  • いろいろうまくやってくれるので、カスタマイズが難しい。