概要
Dragonflyはその場その場で画像でのリサイズやグレイスケール変換などを行なってくれるgem。
画像をいじるので前準備として依存関係のあるImageMagick, RMagickをインストールしておいてくださいです。
今回はRailsで ごく簡単なアプリを作ってみます。
- Rails new でアプリケーションの作成
- Scaffolding & Migration で骨組みの作成
- Dragonflyを利用するための準備
- 実際に使うためにファイルを編集
使ってみる
dragonflyを利用するための設定やファイルの編集がありますが、まずはRailsアプリケーションの作成から始めてみましょう。
Rails アプリケーションの作成
Rails new
rails new DragonflyTest;cd DragonflyTest
Scaffolding & Migration
photoという名前でアプリケーションの土台を作成します。
このときにデータベースで使用するカラムも追加しています。
rails generate scaffold photo \
photo_image_uid:string photo_image_name:string
データベースのマイグレーションをします。
rake db:migrate
設定
アプリケーションの骨組みをつくったところで、Dragonflyを利用するための設定をしていきます。
Gemfileの編集
Gemfile
gem 'dragonfly'
gem 'rack-cache', require: 'rack/cache'
今回は画像管理を簡便にするためにrack-cache(キャッシュ管理)もインストールしてます。
これらを末尾にでも追記しておいてください。
bundle install
も実行しておきます。
initializers にファイルを追加
config/initializers/dragonfly.rb
require 'dragonfly/rails/images'
dragonflyモジュールを利用するために上記ファイルを追加しておきます。
Modelの編集
app/models/photo.rb
class Photo < ActiveRecord::Base
+ image_accessor :photo_image
- attr_accessible :photo_image_name, :photo_image_uid
+ attr_accessible :cover_image, :photo_image_name, :photo_image_uid
end
各Viewの編集
インデックスファイル
app/views/photos/index.html.erb
<h1>Listing photos</h1>
<% @photos.each do |photo| %>
<tr>
- <td><%= photo.photo_image_uid %></td>
- <td><%= photo.photo_image_name %></td>
+ <td><%= image_tag photo.photo_image.thumb('150x150#').url %>
+ <td><%= image_tag photo.photo_image.jpg.thumb('150x150#').url %></td>
+ <td><%= photo.photo_image.process(:grayscale).thumb('50x50#').url %></td>
…
<% end %>
フォームファイル
app/views/photos/_form.html.erb
<%= form for(@photo) do |f| %>
…
- <div class="field">
- <%= f.label :photo_image_uid %>
- <%= f.text_field :photo_image_uid %>
- </div>
- <div class="field">
- <%= f.label :photo_image_name %>
- <%= f.text_field :photo_image_name %>
- </div>
+ <div class="field">
+ <%= f.label :photo_image %>
+ <%= f.file_field :photo_image %>
+ </div>
<div class="actions">
<%= f.submit %>
</div>
<% end %>
表示ファイル
app/views/photos/show.html.erb
<p id="notice"><%= notice %></p>
…
<p>
<b>photo image name:</b>
<%= @photo.photo_image_name %>
+ <%= image_tag @photo.photo_image.thumb('600x600#').url %>
--
最後に動作確認をしておきましょう。おつかれさまでした。
--