RubyonRails:rails5.2の新機能「ActiveStrage」で画像アップロード処理をお手軽に実装してみる

Rails5.2でActiveStrageというファイルアップロード系の機能が新しく追加されましたね(・∀・)
ちょっと自分が作っているアプリで使ってみたので使い方をφ(..)メモメモ

ActiveStrageとは？

ActiveStrageとは、Rails5.2から実装されたファイルアップロード機能です。
今までは画像等をアップロードするときにはCarrierWaveやShrineといったGemを使うことが多かったと思いますが、それがRailsだけで簡単に出来るようになりました🙌

railsguides.jp

ActiveStrageを使ってみた

ソースだけ見たい方はこちら👀

github.com

準備

まずはActiveStrageを使うために下記コマンドを実行します。

$ rails active_storage:install
$ rails db:migrate

そして、ファイルのアップロード先を設定します。アップロード先はconfig.active_storage.serviceに設定されたkeyでstarage.yamlを参照します。

strage.yml

local:
  service: Disk
  root: <%= Rails.root.join("storage") %>

development.rb

  # Store uploaded files on the local file system (see config/storage.yml for options)
  config.active_storage.service = :local

ファイルをアップロードしてみる

まずはModelにファイルのプロパティを定義します。1つのファイルをアップロードする場合はhas_one_attached、複数のファイルをアップロードする場合はhas_many_attachedを使用します。

class User
  has_one_attached :avatar
end

次にcontrollerとviewを次のように実装します。
新規登録の場合は、パラメーターにavatorを追加してnewの引数に渡してあげるだけでいいのですが、既存レコードにファイルを設定する場合は.avatar.attachを使用する必要があります。

controller

  def create
    @user = User.new(user_params)
    if @user.save
      redirect_to @user, notice: message('user', 'create')
    else
      render :new
    end
  end

  def update
    @user = User.find(current_user.id)
    @user.avatar.attach(params[:user][:avatar])
    if @user.update(user_params)
      redirect_to @user, notice: message('user', 'update')
    else
      render :edit
    end
  end

  private

  def user_params
    params.require(:user).permit(:email, :name, :password, :password_confirmation, :avatar)
  end

view

= form_for @user do |f|
  %div.form-group
    = f.label :avatar
    = f.file_field :avatar, class: 'file-inputs'
  .actions
    = f.submit t('common.save'), class: 'btn btn-primary'

これで、画面からアップロードが出来るようになりました！！(・∀・)

バリデーションを実装してみる

しかし、このままでは画像以外がアップロードされてしまったり、大きなファイルがアップロードされてしまうといったことが防げません。。。
ActiveStrageは、まだvalidationの機能が無いので、自分で実装する必要があります😥

今回は、サイズのチェックと画像のみをアップロード可能とするようなバリデーションをサンプルとして載せましたので、参考までに。

class User < ApplicationRecord
  validate  :file_validation, if: -> { avatar.attached? }

  private

  def file_validation
    if avatar.blob.byte_size > 1_000_000
      file_raise_error('のファイル容量が大きすぎます')
    elsif !avatar.blob.content_type.starts_with?('image/')
      file_raise_error('は、画像以外はアップロード出来ません')
    end
  end

  def file_raise_error(message)
    avatar.purge
    errors.add(:avatar, message)
  end
end

おわりに

ActiveStrageはシンプルなファイルアップロード機能を実装するのであれば、お手軽に実装出来てよさそうに感じました(・∀・)
しかし、バリデーションを独自で実装する必要があるため、あまり複雑なアップロード処理にはまだ向かなそうですね😥

参考

tech.unifa-e.com

railsguides.jp

stackoverflow.com

関連モデルの関連モデルの読み込み処理を行うN+1問題を解決する。

関連モデルの関連モデルを参照する場合のN+1問題の解消方法で少しハマったのでφ(..)メモメモ

問題

例えば、下記のようなClassがあった場合にtask.user.groupを取得しようとするとGroupの読み込み処理によりN+1問題が発生する。
そのためTaskを取得する際にはTask.all.includes(:user, :group)といった対策が考えられるが、groupはタスクにassociationとして定義されていないので、指定出来ない。。。

class Task < ApplicationRecord
  belongs_to :user, required: false
  belongs_to :owner, class_name: 'User'
end

class User < ApplicationRecord
  has_many :tasks
  has_one :user_group
  has_one :group, through: :user_group
end

class UserGroup < ApplicationRecord
  belongs_to :user
  belongs_to :group
end

class Group < ApplicationRecord
  has_many :user_groups
  has_many :users, through: :user_groups
end

解決策

下記のようにincludes(user: :group)とすることで、関連モデルのassociationを使ってincludesを行うことが出来る🙌

Task.all.includes(user: :group)

参考

qiita.com

RubyonRails:accepts_nested_attributes_forとfields_forを使って紐づくモデルのフォームを作成する

railsの機能のaccepts_nested_attributes_forとfields_forを使うと紐づくモデルも合わせて簡単に作成できたのでメモφ(..)メモメモ

今回の想定ケース

今回はクイズのように質問があって、それに紐づく選択肢があるようなケースを想定してます。
実装イメージはこんな感じです🙌

手順

手順はこんな感じです。

• Modelに合わせて作成するモデルをaccepts_nested_attributes_forで設定
• Controllerで合わせて作成するモデルのインスタンスを生成
• Viewでfields_forを使って合わせて作成するモデルのフォームを作成

Model

class Quiz < ApplicationRecord
  has_many :choices, dependent: :destroy
  # 合わせて作成するモデルを`accepts_nested_attributes_for`で設定
  accepts_nested_attributes_for :choices
end

class Choice < ApplicationRecord
  belongs_to :quiz
end

Controller

class QuizzesController < ApplicationController
  def new
    @quiz = Quiz.new
    # 合わせて作成するモデルのインスタンスを生成
    @quiz.choices.new
    # 複数のフォームを作る場合は、複数回newする
    # n.times { @quiz.choices.new }
  end

  def create
    @quiz = Quiz.new(quiz_params)
    if @quiz.save
      redirect_to quizzes_path
    else
      render :new
    end
  end

  private

  def quiz_params
    params.require(:quiz).permit(:title, :body, :explanation, choices_attributes: %i[id sentence correct])
  end
end

View

= form_for @quiz do |f|
  - if @quiz.errors.any?
    = render 'layouts/error_form', resource: @quiz
  .form-group
    = f.label :title, 'タイトル'
    %br
    = f.text_field :title
  .form-group  
    = f.label :body, '本文'
    %br
    = f.text_area :body  
  .form-group
    = f.label :explanation, '解説'
    %br
    = f.text_area :explanation
  .form-group.choices_area
    %h3 選択肢
    %ul
      - # `fields_for`を使って合わせて作成するモデルのフォームを作成
      = f.fields_for :choices do |choice|
        %li
          = choice.text_field :sentence
          = choice.check_box :correct
  = f.submit '保存'

参考資料

fields_for - リファレンス - - Railsドキュメント

api.rubyonrails.org

ruby-rails.hatenadiary.com

Ruby:ShrineでUploader個別にアップロード先を設定するメモ

最近、ファイルアップロード用のgemであるShrineを使用する機会があったんですが、Uploader別にアップロード先を設定する方法が全然見つからず、だいぶハマってしまったので、やり方をφ(..)メモメモ

github.com

とりあえず公式のQuick startを見てみる

Shrine.storageに各Uploaderが共通で使用するストレージを情報を設定できる。

config/initializers/shrine.rb

require "shrine"
require "shrine/storage/file_system"

Shrine.storages = {
  cache: Shrine::Storage::FileSystem.new("public", prefix: "uploads/cache"), # temporary
  store: Shrine::Storage::FileSystem.new("public", prefix: "uploads/store"), # permanent
}

Shrine.plugin :sequel # or :activerecord
Shrine.plugin :cached_attachment_data # for retaining the cached file across form redisplays
Shrine.plugin :restore_cached_data # re-extract metadata when attaching a cached file
Shrine.plugin :rack_file # for non-Rails apps

共通のアップロード先にアップロードするだけだったら、簡単で使いやすい😃

アップロード先を個別に設定する

Quick startを見てみるとShrine.stragesにアップロード先の情報を設定されているため、この値を変更する必要があるっぽい。 でも単純にShrine.strageを変更すると、画像アップロード処理全体に影響してしまう...😭

各クラスにShrine.stragesがなぜ反映されているか？

Shrine.staragesはグローバル変数みたいな感じで定義されていて、それを参照しているのかと思ったけど、 どうやらサブクラスのクラスインスタンス変数としてdupでコピーされた値が反映されているっぽい😳

https://github.com/shrinerb/shrine/blob/master/lib/shrine.rb#L101

class Shrine
  @storages = {}
  module Base
    # 省略
    subclass.instance_variable_set(:@storages, storages.dup)

各Uploaderクラスに個別でアップロードパスを設定するには？

サブクラスのクラスインスタンス変数として設定されているということは、こんな感じでUploader別に設定出来るのでは？？ 👀

class HogeImageUploader < Shrine
  @storages = {
    cache: Shrine::Storage::FileSystem.new("public", prefix: "uploads/hoge/cache"), # temporary
    store: Shrine::Storage::FileSystem.new("public", prefix: "uploads/hoge/store"), # permanent
  }

image_urlも変わってる、できたっぽい🙌

# 個別の設定が使用されている
[1] pry(main)> HogeImage.first.image_url
=> "/uploads/store/hoge/hogehoge.png"
# 共通設定が使用されている
[2] pry(main)> FugaImage.first.image_url
=> "/uploads/store/fugafuga.png"

S3のバケットを使う場合でも同じように個別に設定してあげればOKみたいです😃

class HogeImageUploader < Shrine
  s3_options = {
    bucket:            "my-bucket", # required
    access_key_id:     "abc",
    secret_access_key: "xyz",
    region:            "my-region",
  }

  @storages = {
    cache: Shrine::Storage::S3.new(prefix: "cache", **s3_options),
    store: Shrine::Storage::S3.new(**s3_options),
  }

2018/06/03追記

default_stragepluginをつかっても下記のような感じで出来るみたいですφ(..)

require "shrine"
require "shrine/storage/file_system"

Shrine.storages = {
  cache: Shrine::Storage::FileSystem.new("public", prefix: "uploads/cache"), # temporary
  store: Shrine::Storage::FileSystem.new("public", prefix: "uploads/store"), # permanent
  special_cache: Shrine::Storage::FileSystem.new("public", prefix: "uploads/cache"), # temporary
  special_store: Shrine::Storage::FileSystem.new("public", prefix: "uploads/store"), # permanent
}

Shrine.plugin :sequel # or :activerecord
Shrine.plugin :cached_attachment_data # for retaining the cached file across form redisplays
Shrine.plugin :restore_cached_data # re-extract metadata when attaching a cached file
Shrine.plugin :rack_file # for non-Rails apps

class HogeImageUploader < Shrine
  plugin :default_storage, cache: :special_cache, store: :special_store
end

Shrine::Plugins::DefaultStorage

GithubMarketplaceで自動テスト、コード解析環境が簡単に出来て最高かよってなった話

GithubMarketPlaceからCircleciを導入してみたら、初めてだったたけど意外と簡単に、しかも無料で自動テスト・コード解析環境が作れて「最高かよ」という気持ちになった💪
ちなみに構築した環境は下記のような感じで、普通のrailsアプリケーションです🚋

key	val
Langage	ruby 2.5
Framework	rails 5.2
Database	posgresql
Testing Framework	rspec
Code analyze	rubocop

やり方メモ📝

GithubMarketPlaceでCircleciを導入する

まずはここから、Circleciを導入しましょう！ github.com

こんな感じでcircleciを検索して、、、

私はもう導入済なので、「Edit your plan」となってしまってますが、「Setup a plan」になっていると思います🙌

クリックしたらcircleciの導入は完了です！

circleciにプロジェクトを追加する

circleciの導入が完了したら、次はリポジトリを紐付けます！ Add Projectから自分のリポジトリを追加しましょう！

circleci/config.ymlを作成する

リポジトリを追加したら、下記コマンドを実行してcircleciの設定ファイルを作成します。

$ mkdir circleci
$ touch circleci/config.yml

config.ymlの中身は私は下記のように設定しました。

version: 2
jobs:
  build:
    docker:
       - image: circleci/ruby:2.5.1-node-browsers
         environment:
           RAILS_ENV: test
           PGHOST: 127.0.0.1
       - image: circleci/postgres
         environment:
           POSTGRES_USER: circleci

    working_directory: ~/repo

    steps:
      - checkout

      - restore_cache:
          keys:
          - v1-dependencies-{{ checksum "Gemfile.lock" }}
          - v1-dependencies-

      - run:
          name: install dependencies
          command: |
            bundle install --jobs=4 --retry=3 --path vendor/bundle

      - save_cache:
          paths:
            - ./vendor/bundle
          key: v1-dependencies-{{ checksum "Gemfile.lock" }}
        
      # Database setup
      - run: bundle exec rake db:create
      - run: bundle exec rake db:schema:load

      # run tests!
      - run:
          name: run tests
          command: |
            TEST_FILES="$(circleci tests glob "spec/**/*_spec.rb" | circleci tests split --split-by=timings)"            
            bundle exec rspec $TEST_FILES
      - run:
          name: run code analyze
          command: bundle exec rubocop

結果を確認する

circleci/config.ymlを作成したら、いよいよリポジトリにpushします(・∀・) そうすると、、、

おおー、無事にコミット時にrspecとrubocopが実行されてますね🌟

おわりに

どうですかね？私はあまりこういう環境とか作ったことなかったんですが、結構簡単に作れてびっくりしました👀
circleciで自動テスト+コード解析して、本番環境にHerokuを使えばGithubのブランチと同期させて自動デプロイとかいう環境が無料で作れるとか、個人開発がはかどりますね😇！

RubyonRails:collection_selectにデフォルト値を設定する

Railsには、データベースの値からselectタグを作るcollection_tagという非常に便利なメソッドがあるんですが、デフォルト値の設定方法で少しハマったので、そのやり方をメモしておきますφ(..)

やり方

今回は、タスクにユーザーを割り当てる際に使用するセレクトボックスをイメージしてます。 ポイントは、selectedオプションに値を渡すことです(・∀・)

%div.form-group
  = label_tag :user, Task.human_attribute_name(:user)
  = collection_select :task, :user_id, User.all, :id, :name, { include_blank: true, selected: search_attr[:user_id] }, { class: 'form-control' }

selectedオプションに値を設定すれば、collection_selectにデフォルト値を設定することが出来ます！！

参考

http://railsdoc.com/references/collection_select

---

Ruby on Rails 6 エンジニア 養成読本 Software Design plus

RubyonRails:検索条件を引き継いで検索結果のソート順を変更する

検索結果を指定したプロパティで並び変える際に検索条件を引き継いで、ソートする際に少しハマったのでやり方をメモφ(..)

イメージは下記みたいな、検索後のタスクの一覧を期限の降順で並び替えるような機能を想定してます(・∀・)

検索条件を引き継いでソートする方法

そもそもなぜ検索条件を引き継ぐ必要があるか

何も考えずにソート処理を実装すると下記のような形になるんじゃないかなぁと思うんですが、、、

• 画面上のソートボタンを押下した際にgetパラメータとして項目とソート(降順・昇順)を設定
• controllerでパラメーターを取得し、ソート順を設定しタスクの再取得
• 一覧画面を再描画

上記実装では、少し問題があります。それは、入力された検索条件をcontollerに渡せていないので、ソートボタンを押すと検索条件が未設定の状態で検索処理が行われてしまう恐れがあり下記のように使いにくいものとなってしまいます。。。

検索条件を引き継いでソートを変更する

先程でも書きましたが、問題はソートを行う際にcontrollerに対して既存の検索条件を設定出来ていないために問題が発生してしまっているので、ソート時にも検索条件をパラメーターとして送信する対応を行いましたφ(..)

_order_form.html.hamlでソートする際にhidden_tagを使って検索条件も合わせてgetパラメーターとして送信するようにしています。

index.html.haml

= render partial: 'search_form', locals: { search_attr: @search_attr }
%table{ border: 1 }
  %thead
    %tr
      %th= Task.human_attribute_name(:title)
      %th= Task.human_attribute_name(:status)
      %th
        = Task.human_attribute_name(:priority)
        = render partial: 'order_form', locals: { target: 'priority', search_attr: @search_attr, order: 'asc' }
        = render partial: 'order_form', locals: { target: 'priority', search_attr: @search_attr, order: 'desc' }

_search_form.html.haml

%div
  = form_tag(search_tasks_path, method: :get) do
    = label_tag :task_title, Task.human_attribute_name(:title)
    = text_field_tag 'task[title]', search_attr[:title]
    = label_tag :task_status, Task.human_attribute_name(:status)
    - statuses = Task.statuses_i18n.invert
    = select_tag 'task[status]', options_for_select(statuses, search_attr[:status]), prompt: '-'
    = submit_tag t('common.search')

_order_form.html.haml

= form_tag(search_tasks_path, method: :get, style: 'display: inline') do
  = hidden_field_tag 'task[title]', search_attr[:title]
  = hidden_field_tag 'task[status]', search_attr[:status]
  = hidden_field_tag "order[#{target}]", order
  = submit_tag order_icon(order) # asc: ▲、desc:▼

ちなみにdeadline DESC等の文字列は、order_stringメソッドを使って生成するようにしてみました(・∀・)

task_controller.rb

class TasksController < ApplicationController
  def index
    prepare_search_attr
    @tasks = Task.all.order(order_string)
  end

  def search
    prepare_search_attr
    @tasks = Task.search(@search_attr).order(order_string)
    render :index
  end

  private

  def order_string
    return 'created_at DESC' unless params.key?(:order)
    order_params.to_h.map { |key, val| "#{key} #{val.upcase}" }.join(',')
  end

  def prepare_search_attr
    @search_attr = { title: '' }
    @search_attr = task_params.delete_if { |_key, val| val.blank? } if params.key?(:task)
  end

  def task_params
    params.require(:task).permit(:title, :description, :status, :priority, :deadline)
  end

  def order_params
    params.require(:order).permit(:deadline, :priority)
  end
end

おわりに

今回はhidden_tagを使って検索条件を引き継いでソートする方法で今回は対応してみました。やりたいことは出来ましたが、もっとRailsっぽい良い方法があるような気がしますね・・・！
なにかまたいい方法があればまとめてみようと思いますφ(..)

参考

hidden_field - リファレンス - - Railsドキュメント