Rails + CarrierWave +Cloudinary

はじめに

画像をアップロードするのに何かいい方法はないかとググっていました。
するとCloudinaryという名前の通りcloud上にデータを保存できるアプリの存在を知ったのでアップロードから画像を表示するまでの過程を書いていきたいとい思います。

※cloudinaryのアカウントがある前提で話します。

アップローダーの中身

carrierwaveをインストールしてアップローダーを作成するとimg_uploader.rbが出来ます。
それまでの過程は下記で書いているのでそちらをご覧ください。
carrierwaveのインストール方法

cloudinaryのdocumentationを開けてrailsのcarriewaveを探すとこのコードがあるので、参照する。

img_uploader.rb

class ImgUploader < CarrierWave::Uploader::Base
 include Cloudinary::CarrierWave

# 画像を保存する際に,png形式で保存するということ
 process :convert => ‘png’

# タグの設定。アップされた画像はcloudinaryのファイルでタグがつけられ、（例で言えばpost_picture）検索する際に役立つ。
 process :tags => ['post_picture']

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

 version :thumbnail do
   resize_to_fit(100, 100)
 end

end

cloudinary.rbを作る

config/initializers内にcloudinary.rbファイルを作る。中身は下記のようにする。

cloudinary.rb

Cloudinary.config do |config|
  config.cloud_name = "自身のcloud_name"
  config.api_key = "自身のapi_key"
  config.api_secret = "自身のapi_secret"     
  config.cdn_subdomain = true
end

この３つはcloudinaryのマイページの上部にあります。

環境変数設定

Gemfileを開けてfigaroをインストール。

Gemfile

gem 'figaro', '~> 1.1', '>= 1.1.1'

$ bundle exec figaro install

するとconfig内にapplication.ymlが作成され、.gitignoreファイルにapplication.ymlが記載される。

 create  config/application.yml
 append  .gitignore

application.ymlに移り、中身を以下のように。

application.yml

cloudinary_cloud_name: "自身のcloud_nam"
cloudinary_api_key: "自身のapi_key"
cloudinary_api_secret: "自身のapi_secret"

cloudinary.rbに戻り、

cloudinary.rb

Cloudinary.config do |config|
  config.cloud_name = ENV["cloudinary_cloud_name"]
  config.api_key = ENV["cloudinary_api_key"]
  config.api_secret = ENV["cloudinary_api_secret"]
  config.secure = true
  config.cdn_subdomain = true
end

とする。

さてここからが本題です。
せっかくcloud上に画像をアップできるようにしたんだからそれを使いたいですよね？

でも実はこの状態で作成中のアプリを開けるとエラーが出てしまいます。
エラー文の内容がcloud_nameがわからん。ちゃんと設定してくれといった感じでした。

解決策

例）viewで投稿した画像を表示するにはこうする。

view

<%= image_tag post.img_url, :cloud_name => "自身のcloud_name"  if post.img? %>

:cloud_name => "自身のcloud_name"を指定することで自分のcloudinaryのファイルに保存されます。

最後に

Cloudinaryの設定をして画像をアップロードするには結構な時間がかかってしまいました。
しかし私が書いたこの記事をみて皆さんが開発にかける時間が少しでも短縮されると幸いです。

また、私自身間違っている可能性もあるので指摘もしてもらえるとありがたいです。