railsで簡単に複数画像をアップロードする　rails+carrierwave+cloudinary

11796 ワード
carrierwave cloudinary Ruby Rails Ruby テキストリンク

1.概要

railsで画像投稿を利用したアプリを作りたいという時に、どうせなら複数枚を一度に投稿したいという人は多いのではないでしょうか。
今回は簡単なrails投稿アプリを開発しながら、複数画像投稿ができるように実装して行きます。
※今回の画像投稿は、cloudinaryを利用して行います。

2.はじめに

開発環境

環境
ruby 2.6.3
Rails 6.0.3

完成予定

はじめる前に：Cloudinaryに登録

このリンクから登録をはじめましょう。
https://cloudinary.com/

右上のsign up for freeを押すと、登録画面に飛びます。
諸々の情報を登録し仮登録を終えてから、最後にメールアドレス宛に送信されている本登録用のメッセージを開いて、本登録の完了までお願いします。

3.複数画像投稿機能の実装

3.1.事前準備

まず複数画像投稿機能を実装するために、投稿するだけのサンプルアプリを作ります。

ターミナル
$ cd
$ cd desktop
$ rails new ImageSample

3.2.投稿周りの機能

投稿周りの機能はscaffoldを利用し作成します。その際、imageカラムを複数作成します。
今回は同時にimage1,image2の2枚投稿できるようにします。3枚以上同時に投稿したい場合は、image3,image4とカラムを増やしてみてください。

ターミナル
$ cd ImageSample
$ rails g scaffold post body:text image1:string image2:string
$ rails db:migrate

3.3.viewの変更（新規投稿ページ）

新規投稿ページで画像を選択できるように、_form.html.erbを編集します。

posts/_form.html.erb
  # 変更前
<%= form.text_field :image1 %>

  # 変更後 
<%= form.file_field :image1 %>

image2についても同様の変更を行います。

3.4.viewの変更（投稿一覧ページ）

posts/index.html.erb
  # 変更前
<td><%= post.image1 %></td>

  # 変更後
<td><%= image_tag post.image1_url ,size: '200x150' %></td>

image2についても同様の変更を行います。
,size: '200x150'に関しては、記述をしなくても問題ありませんが、画面いっぱいに画像が広がるのを防ぐために記述しました。

3.5.viewの変更（投稿詳細ページ）

こちらも投稿一覧ページと基本的には同じです。

posts/show.html.erb
  # 変更前
<%= @post.image1 %>

  # 変更後
<%= image_tag @post.image1_url ,size: '200x150' %>

image2についても同様の変更を行います。

3.6.gemの追加

Gemfile
gem 'carrierwave'
gem 'cloudinary'
gem 'dotenv-rails'

追加したら、

ターミナル
$ bundle install

をして反映させます。

3.7.アップローダー

アップローダーの作成

CarrierWaveのジェネレーターでアップローダーを作成します。

ターミナル
$ rails g uploader Image

モデルの修正

app/models/post.rbを以下のように修正します。

app/models/post.rb
class Post < ApplicationRecord
    mount_uploader :image1, ImageUploader
    mount_uploader :image2, ImageUploader
end

アップローダの設定

app/uploaders/image_uploader.rbの6~8行目を変更します。

app/uploaders/image_uploader.rb
  # Choose what kind of storage to use for this uploader:
  storage :file
  # storage :fog

上記を下図のように変えます。

app/uploader/image_uploader.rb
  # Choose what kind of storage to use for this uploader:
  if Rails.env.production?
    include Cloudinary::CarrierWave
    CarrierWave.configure do |config|
      config.cache_storage = :file
    end
  else
    storage :file
  end
  # storage :fog

3.8.cloudinaryのAPIキー

.envファイル

.envというファイルをアプリケーションディレクトリ(appやdbやGemfileがあるディレクトリ)に自分で作成します。
次に作成した.envファイルに以下を入力します。

.env
CLOUD_NAME=q0w9e8r7t6yu5  #←この値は人によって違います！！
CLOUDINARY_API_KEY=123456789012345 #←この値は人によって違います！！
CLOUDINARY_API_SECRET=1a2s3d4f5g6h7j8k9l0a1s2d4f5g6h1q #←この値は人によって違います！！

取得したCloudinaryのアカウントの、「Cloud name」、「API Key」、「API Secret」を利用します。
ここで「=」の後のそれぞれの値は先ほどのCloudinaryのマイページで取得したキーに書き換えてください（数字は個々人によって変わります）

.gitignore

アプリケーションディレクトリにある.gitignoreに下記を追加します。

.gitignore
/.env

cloudinary.yml

configフォルダにcloudinary.ymlファイルを作成してください。
config/cloudinary.ymlに以下のようにそのままコピペしてください。

config/cloudinary.yml
development:
  cloud_name: <%= ENV['CLOUD_NAME'] %>
  api_key: <%= ENV['CLOUDINARY_API_KEY'] %>
  api_secret: <%= ENV['CLOUDINARY_API_SECRET'] %>
  enhance_image_tag: true
  static_file_support: false
production:
  cloud_name: <%= ENV['CLOUD_NAME'] %>
  api_key: <%= ENV['CLOUDINARY_API_KEY'] %>
  api_secret: <%= ENV['CLOUDINARY_API_SECRET'] %>
  enhance_image_tag: true
  static_file_support: false
test:
  cloud_name: <%= ENV['CLOUD_NAME'] %>
  api_key: <%= ENV['CLOUDINARY_API_KEY'] %>
  api_secret: <%= ENV['CLOUDINARY_API_SECRET'] %>
  enhance_image_tag: true
  static_file_support: false

4.終わりに

以上で複数画像投稿ができるようになったと思います。
説明が最小限で申し訳ないですが、もし良かったら参考にしてみてください！
最後まで読んでくださってありがとうございました！！

window.onload, document.既成の相違
Iris品種分類