Help us understand the problem. What is going on with this article?

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

目的

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

画像アップロードとは

アップロードとはファイルやデータを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ファイル内の設定を元にアップロードすることを意味している
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
Comments
No comments
Sign up for free and join this conversation.
If you already have a Qiita account
Why do not you register as a user and use Qiita more conveniently?
You need to log in to use this function. Qiita can be used more conveniently after logging in.
You seem to be reading articles frequently this month. Qiita can be used more conveniently after logging in.
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
ユーザーは見つかりませんでした