Cloudinary | 画像管理クラウドサービス


Cloudinaryは、Webアプリケーションの全ての画像を管理する為のソリューションを提供するクラウドサービスです。
Herokuのアドオンとしても提供されています。
![Cloudinary](https://github.com/FakeStarBaby/fakeimg/raw/master/cloudinary.jpg "Cloudinary")

## リソース

### 公式

* [Cloudinary](https://cloudinary.com)
* [GitHub](https://github.com/cloudinary/cloudinary_gem)
* [Ruby On Rails integration](http://cloudinary.com/documentation/rails_integration)
* [Ruby on Rails image uploads with CarrierWave and Cloudinary](http://cloudinary.com/blog/ruby_on_rails_image_uploads_with_carrierwave_and_cloudinary)

### Heroku

* [Add-ons](https://addons.heroku.com/cloudinary)
* [Devcenter](https://devcenter.heroku.com/articles/cloudinary)

## インストール

以下のコマンドを実行し、CloudinaryのフリープランをHerokuのアドオンとしてインストールします。

```bash
$ heroku addons:add cloudinary
```

Cloudinaryは、画像アップロードライブラリとして有名な[CarrierWave](https://github.com/jnicklas/carrierwave)と相性が良いそうです。
その為、ここではCarrierWaveも同時にインストールします。

Gemfileに、carrierwaveとcloudinaryを追記します。

```ruby:Gemfile
gem 'carrierwave'
gem 'cloudinary'
```

インストールします。

```bash
$ bundle install
```

## 初期設定

画像ファイルを持たせるモデルを新規作成します。
ここでは、ユーザーモデルとし、Scaffoldを利用します。

```bash
$ rails g scaffold user name
$ rake db:migrate
```

CarrierWaveで用意されているジェネレーターを利用して、画像アップローダークラスを自動生成します。
ここでは、アバタークラスとします。

```bash
$ rails g uploader Avatar
      create  app/uploaders/avatar_uploader.rb
```

自動生成されたアバタークラスにて、Cloudinaryをインクルードします。

`:standard`や`:thumbnail`は、CarrierWaveの機能で画像ファイルをアップロードする時にリサイズしてくれます。
詳細は、CarrierWaveの[README](https://github.com/jnicklas/carrierwave/blob/master/README.md)を参照して下さい。

```ruby:app/uploaders/avatar_uploader.rb
class AvatarUploader < CarrierWave::Uploader::Base
  include Cloudinary::CarrierWave

  version :standard do
    process :resize_to_fill => [100, 150, :north]
  end

  version :thumbnail do
    process :resize_to_fit => [50, 50]
  end     
end
```

ユーザーモデルにCloudinaryで利用するアバターカラムを追加します。

```bash
$ rails g migration AddAvatarToUsers avatar
$ rake db:migrate
```

Cloudinaryに対するアクセス情報を記述するYAMLファイルを新規作成します。
`cloud_name`、`api_key `、`api_secret `は、HerokuのアプリケーションのCloudinaryアドオンを選択すると、専用のダッシュボードに表示されていますので、それをそのまま記述します。

```ruby:config/cloudinary.yml
development:
  cloud_name: sample
  api_key: '123456789012345'
  api_secret: abcdefgh-ijklmnopqrstuvwxyz
  enhance_image_tag: true
  static_image_support: false
production:
  cloud_name: sample
  api_key: '123456789012345'
  api_secret: abcdefgh-ijklmnopqrstuvwxyz
  enhance_image_tag: true
  static_image_support: true
test:
  cloud_name: sample
  api_key: '123456789012345'
  api_secret: abcdefgh-ijklmnopqrstuvwxyz
  enhance_image_tag: true
  static_image_support: false
```

これでバックエンド側のロジックは準備完了となります。
ここからは、フロントエンド側のロジックですが、Cloudinaryと言うよりは、CarrierWaveの扱いになります。

まずは、入力フォームページにアバターカラムを追記します。

```ruby:app/views/users/_form.html.erb
<%= form_for(@user) do |f| %>
  <% if @user.errors.any? %>
    <div id="error_explanation">
      <h2><%= pluralize(@user.errors.count, "error") %> prohibited this user from being saved:</h2>

      <ul>
      <% @user.errors.full_messages.each do |msg| %>
        <li><%= msg %></li>
      <% end %>
      </ul>
    </div>
  <% end %>

  <div class="field">
    <%= f.label :name %><br />
    <%= f.text_field :name %>
  </div>
  <div class="field">
    <%= f.hidden_field :avatar_cache %>
    <%= f.label :avatar %><br />
    <%= f.file_field :avatar %>
  </div>
  <div class="actions">
    <%= f.submit %>
  </div>
<% end %>
```

次に、詳細ページにアバターカラムを追記します。

```ruby:app/views/users/show.html.erb
<p id="notice"><%= notice %></p>

<p>
  <b>Name:</b>
  <%= @user.name %>
</p>

<p>
  <b>Avatar:</b>
  <%= image_tag(@user.avatar_url, :alt => @user.name) %>
</p>

<%= link_to 'Edit', edit_user_path(@user) %> |
<%= link_to 'Back', users_path %>
```

最後に、一覧ページにもアバターカラムを追記します。

```ruby:app/views/users/index.html.erb
<h1>Listing users</h1>

<table>
  <tr>
    <th>Name</th>
    <th>Avatar</th>
    <th></th>
    <th></th>
    <th></th>
  </tr>

<% @users.each do |user| %>
  <tr>
    <td><%= user.name %></td>
    <td><%= image_tag(user.avatar_url(:thumbnail), :width => 50, :height => 50) %></td>
    <td><%= link_to 'Show', user %></td>
    <td><%= link_to 'Edit', edit_user_path(user) %></td>
    <td><%= link_to 'Destroy', user, method: :delete, data: { confirm: 'Are you sure?' } %></td>
  </tr>
<% end %>
</table>

<br />

<%= link_to 'New User', new_user_path %>
```

以上で、初期設定は完了です。

## 利用方法

HerokuのアプリケーションのCloudinaryアドオンを選択すると、専用のダッシュボードが表示されます。
ここで、ストレージに格納されている画像を確認する事が出来ます。

その他、Cloudinaryは、画像のストレージとしての利用だけでなく、画像の加工もサポートしていますが、それは、また別の機会に試してみたいと思います。

## あわせて読みたい

* [さらばPhotoshop。Cloudinaryはクラウドで画像を変換する | TechCrunch Japan](http://jp.techcrunch.com/archives/20120531goodbye-photoshop-hello-cloudinary/)