目的

作成したアプリケーションに画像アップロード機能を実装するための手順や
考え方などを備忘録的に残していきます。

画像アップロードとは

アップロードとはファイルやデータをPCやスマホからインターネット上のサーバーへ転送することを指します。

画像アップロードの仕組み

ファイル選択ボタンを押して、画像を選択
送信ボタンをおす
画像ファイルを画像パスがリクエストして送信される
画像ファイルはアクセス先コンピューター内に、画像のパスはDBないにあるテーブルに保存される (画像の保存先には外部のストレージを使うことが多い。AWSサービスのS3など..)

実装の流れ

ライブラリのインストール

Gemfile

gem 'carrierwave'
gem 'mini_magick'

bundle install

アプリの雛形を作成

scaffoldで必要なモデルやコントローラーなど一式を作成します。
モデル名はFeedとし、画像を保存するためにimageカラムを作成します。

$ rails g scaffold feed image:text
$ rails db:migrate

アップローダファイルを作成

アップローダファイルとはアップロードに関する設定をするためのファイルです。
アップロードに関する設定とは以下が挙げられます。

外部ストレージを連携するかどうか
保存形式
画像ファイルの保存先の設定
画像サイズの調整

$ rails g uploader Image

app/uploader/image_uploader.rb

class ImageUploader < CarrierWave::Uploader::Base
  include CarrierWave::MiniMagick
   # MiniMagickをincludeすると画像サイズ調整ができるようになる
  storage :file # 保存形式の設定。他に使うものとしてはfog形式などがある。
  process :resize_to_limit => [50, 50] # 画像サイズの調整
  # 画像ファイルの保存先の設定
  # 保存先を指定するには `store_dir` というメソッドに定義します。
  def store_dir
    "uploads/#{model.class.to_s.underscore}/#{mounted_as}/#{model.id}"
  end
end

保存形式を指定しているのが storage :file という記述です。
file以外の保存形式としてクラウドのストレージが挙げられます。
クラウドのストレージとして、Amazonが提供している S3 というサービスが有名です。file形式は画像が実体として存在しますが、クラウドのストレージにおける画像は実体が存在しません。この場合は専用のgemを利用して storage :fog という記述をします。

最後に該当のモデルにカラムとアップローダを指定します。
Feedモデル内に以下を記述

app/model/feed.rb

~省略~
#アップローダ定義
 mount_uploader :image, ImageUploader
~省略~

上記の記述をすることで、feedsテーブルの中にあるimageカラムにimageUploaderという名前のアップローダ機能を追加することができます。

まとめ

アップローダ定義の意味を総括すると以下のようになります。

feedモデルが関係しているのでfeedsテーブルが関係している
mount_uploaderは、画像アップロードの宣言をしている
:imageはfeedsテーブル内の画像パスが入っているカラム名を指している
ImageUploaderは、ImageUploaderファイル内の設定を元にアップロードすることを意味している

画像アップロード機能実装について

目的