Active Storageを使ってプロフィールに画像をつける

#はじめに

オリジナルアプリの新規登録の際に、画像を入力するフォームを追加して、プロフィールに画像が入れ込もうと思いました。

今回はActive Storageを使っていきたいと思います。

#Active Storageとは

ファイルアップロード機能を簡単に実装できるGemです。
Active Storageを使うと、画像などのファイルのアップロードを簡単にするメソッドが使用できたり、画像を保存するテーブルを簡単に作成できます。

#使用するツールたち

• ImageMagick

画像に処理を加えることができるツールです。
画像の作成やサイズ変更、保存形式の変更などがあります。

Railsでは単体で使用する事はできず、MiniMagickというgemが必要です。

• MiniMagick

ImageMagickの機能をRubyで扱えるようにしてくれるGemです。
RailsでImageMagickを扱うために必要となります。

• ImageProcessing

MiniMagickでは提供できない、画像サイズを調整する機能を提供するGemです。

#実施に導入

まずはmageMagickをインストールします。

brew install imagemagick

注意
VSCode内のターミナル内でインストールをしたらエラーが発生する可能性があるみたいなのでターミナルアプリから実行して下さい。

実際のエラー
↓↓↓↓↓

Error: No available formula or cask with the name "imagemagic".
==> Searching for a previously deleted formula (in the last month)...
Error: No previously deleted formula found.
==> Searching taps on GitHub...
Error: No formulae found in taps.

続いて、MiniMagickとImageProcessingをインストールします。

Gemfile

gem 'mini_magick'

gem 'image_processing', '~> 1.2'

しっかりターミナルでインストール！

bundle install

最後にActive Storageをインストール

ターミナルで実行します。

rails active_storage:install

コマンドを実行すると、Active Storageに関連したマイグレーションが作成されます。続けてマイグレートします。

rails db:migrate

ここまではポチポチして頂ければできると思います。

DBにはこのようなテーブルが追加されます。

簡単に説明すると
active_storage_blobsは実施に写真などが保存されるテーブルで、active_storage_attachmentsは中間テーブルになります。

#画像を保存する

準備が整ったので実施に保存していきます。

画像を保存する際の手順は2つです。

• Active StorageのテーブルとUserテーブルのアソシエーションを定義

• application.rbにて、画像カラムの保存を許可

まずはUserテーブルに紐づけるためにhas_one_attachedというメソッドを利用します。

has_one_attachedとは各レコードとファイルを1対1の関係で紐づけるメソッドです。
has_one_attachedメソッドを記述したモデルの各レコードは、それぞれ1つのファイルを添付できます。

user.rb

class User < ApplicationRecord
  has_one_attached :avatar #ファイル名はなんでも大丈夫です
end

次にストロングパラメーターで保存の許可をします。

application_controller.rb

class ApplicationController < ActionController::Base
  before_action :configure_permitted_parameters, if: :devise_controller?

 
  private
  def configure_permitted_parameters
    devise_parameter_sanitizer.permit(:sign_up, keys: [:nickname, :company_name, :profession_id, :avatar])
  end
end

新規登録フォームに記述します。

new.html.erb

<div class="form-group">
    <label>プロフィール写真</label>
     <%= f.file_field :avatar, class:"input-default" %>
  </div>

このような形でファイルを開く事ができます。