【Rails】refileで画像投稿機能作成

この記事の目的

現在学習中のRailsについての理解とアウトプット、振り返り用
Railsのユーザ認証についてまとめています

前提条件

下記のインストールが完了していること
●Railsでプロジェクトが作成できていること

こちらについてはRailsプロジェクト作成からMVCまでで記載しています。

リファイルとは

• ファイルのアップロード先を柔軟に設定できる
• 簡単に組み込める
• 画像のサムネイルを生成できる

refileのGitHubページはこちら

imagemagickとは

ImageMagick（イメージマジック）は画像を操作したり表示したりするためのソフトウェア。
GIF、JPEG、PNG、PDF、TIFFなど100種類以上の画像ファイルフォーマットに対応しており、プログラム上からの画像の変換・編集などに必要な多数の機能を備えている。
「画像のアップロード → サムネイル生成 」など、画像を加工・変形するWEBサービスを組みたい場合に使う。

imagemagickインストール

$ sudo apt-get update
$ sudo apt-get -y install imagemagick libmagick++-dev
または
$ brew install ImageMagick

macOSを使用している場合はcommand not foundが出たのでbrewの方を使用しました。

Gemfileにユーザー認証用のgem追加

Gemfileの最後に以下を追加する
deviseとはrailsで作ったwebアプリケーションに簡単に認証機能を実装できるgemのことですlogin,logout機能のこと

#　ファイルアップロードを簡単に実装するためのGem,Githubのリポジトリからインストールされる。
gem "refile", require: "refile/rails", github: 'manfe/refile'
#　ファイルを自動的にリサイズするために使用されるRefileのアドオンGem
gem "refile-mini_magick"

bundle install

$ bundle install

Modelにattachment追加

対象のModelにattachment :image_idを追加する
今回はuserモデルに作成しており、ユーザーテーブルのカラムにprofile_image_idを指定しているのでattachment :profile_imageとしています
※カラム名がprofile_image_idですがidをつけないところが注意点

app/models/user.rb

class User < ApplicationRecord
  # ユーザー認証機能を有効化するためにdeviseを使用
  # 有効にしたい機能を引数に指定
  devise :database_authenticatable, :registerable, :recoverable, :rememberable, :validatable

  # 画像アップロードのためgemを使用してattachmentメソッド使用
  # profile_imageカラムに画像をアップロードするための設定
  attachment :profile_image
end

ファイルアップロードのフォーム

対象の場所に<%= f.attachment_field :profile_image %>を記載する
今回はユーザー一覧ページにユーザ画像を出すためapp/views/users/index.html.erbに記載していきます
※こちらもカラム名がprofile_image_idですがidをつけないところが注意点

app/views/users/index.html.erb

<section class="section">
    <div class="container">
        <div class="columns is-multiline">
        <% @users.each do |user| %>
            <%= attachment_image_tag user, :profile_image, fallback: "no-image.png" %>
            <%= user.username %>
        <% end %>
        </div>
    </div>
</section>

現在画像は登録していないのでfallbackに設定しているno-image.pngが出ました