Cloudinaryは、Webアプリケーションの全ての画像を管理する為のソリューションを提供するクラウドサービスです。
Herokuのアドオンとしても提供されています。
リソース
公式
- Cloudinary
- GitHub
- Ruby On Rails integration
- Ruby on Rails image uploads with CarrierWave and Cloudinary
Heroku
インストール
以下のコマンドを実行し、CloudinaryのフリープランをHerokuのアドオンとしてインストールします。
$ heroku addons:add cloudinary
Cloudinaryは、画像アップロードライブラリとして有名なCarrierWaveと相性が良いそうです。
その為、ここではCarrierWaveも同時にインストールします。
Gemfileに、carrierwaveとcloudinaryを追記します。
gem 'carrierwave'
gem 'cloudinary'
インストールします。
$ bundle install
初期設定
画像ファイルを持たせるモデルを新規作成します。
ここでは、ユーザーモデルとし、Scaffoldを利用します。
$ rails g scaffold user name
$ rake db:migrate
CarrierWaveで用意されているジェネレーターを利用して、画像アップローダークラスを自動生成します。
ここでは、アバタークラスとします。
$ rails g uploader Avatar
create app/uploaders/avatar_uploader.rb
自動生成されたアバタークラスにて、Cloudinaryをインクルードします。
:standardや:thumbnailは、CarrierWaveの機能で画像ファイルをアップロードする時にリサイズしてくれます。
詳細は、CarrierWaveのREADMEを参照して下さい。
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で利用するアバターカラムを追加します。
$ rails g migration AddAvatarToUsers avatar
$ rake db:migrate
Cloudinaryに対するアクセス情報を記述するYAMLファイルを新規作成します。
cloud_name、api_key、api_secretは、HerokuのアプリケーションのCloudinaryアドオンを選択すると、専用のダッシュボードに表示されていますので、それをそのまま記述します。
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の扱いになります。
まずは、入力フォームページにアバターカラムを追記します。
<%= 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 %>
次に、詳細ページにアバターカラムを追記します。
<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 %>
最後に、一覧ページにもアバターカラムを追記します。
<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は、画像のストレージとしての利用だけでなく、画像の加工もサポートしていますが、それは、また別の機会に試してみたいと思います。