Dragonfly gem をインストールして使ってみるまでのメモ


## 概要
Dragonflyはその場その場で画像でのリサイズやグレイスケール変換などを行なってくれるgem。
画像をいじるので前準備として依存関係のあるImageMagick, RMagickをインストールしておいてくださいです。

今回はRailsで ごく簡単なアプリを作ってみます。

1. Rails new でアプリケーションの作成
2. Scaffolding & Migration で骨組みの作成
3. Dragonflyを利用するための準備
4. 実際に使うためにファイルを編集

## 使ってみる

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の編集

```ruby:Gemfile
gem 'dragonfly'
gem 'rack-cache', require: 'rack/cache'
```

今回は画像管理を簡便にするためにrack-cache(キャッシュ管理)もインストールしてます。
これらを末尾にでも追記しておいてください。
```bundle install```も実行しておきます。

### initializers にファイルを追加

``` ruby:config/initializers/dragonfly.rb
require 'dragonfly/rails/images'
```

dragonflyモジュールを利用するために上記ファイルを追加しておきます。

### Modelの編集

```diff: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の編集
#### インデックスファイル

```diff: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 %>
```

#### フォームファイル

```diff: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 %>
```


#### 表示ファイル

```diff: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 %>

```

--
 最後に動作確認をしておきましょう。おつかれさまでした。

--

## Link
* [Image Magick](http://www.imagemagick.org/script/index.php "Convert, Edit, And Compose Images - Image Magick")
* [RMAGICK](http://rmagick.rubyforge.org/ "Ruby+ImageMagick - RMAGICK")
* [markevans/dragonfly](https://github.com/markevans/dragonfly "markevans/dragonfly - GitHub")
* [Dragomfly — Documentation](http://markevans.github.com/dragonfly/file.Index.html "Document - Dragonfly")

----
* [RailsでDragonflyを使って画像を扱ってみた](http://yuriponx.com/2012/10/24/rails%E3%81%A7dragonfly%E3%82%92%E4%BD%BF%E3%81%A3%E3%81%A6%E7%94%BB%E5%83%8F%E3%82%92%E6%89%B1%E3%81%A3%E3%81%A6%E3%81%BF%E3%81%9F/ "RailsでDragonflyを使って画像を扱ってみた - のほほん女子大生のインタラクション日記")
* [Rails3.XXで画像アップロード](http://d.hatena.ne.jp/ue10000/20111113/1321152598 "Rails3.XXで画像アップロード - Google App Engine for Pythonで遊ぶ")