ActiveStorageとは

Rails5.2より同梱されているファイル管理のgemです。

クラウドストレージサービスなどへファイルをアップロードして、 DB上でActiveRecordモデルへ紐づけることなどが比較的簡単にできます。

本記事では、BookアプリにActiveStorageを実装してプロフィール画像をアップロードする機能を追加します。

本記事の前提

内容に入る前に、以前の記事と同様にまずアプリ作成の流れなどを振り返ります。

『Railsの教科書』内で紹介されていたBookアプリを作成します
日本語に対応するためにgemi18nを実装
ページネーション機能をgemkaminariで実装
ログイン・ログアウト機能をgemdeviseとdevise-i18nで実装
GitHubによるログイン機能をgemOmniAuthで実装　
ActiveStorageによるプロフィール画像のアップロード機能実装←今日はここです！

上記の通り、本の登録機能やユーザーの認証機能は実装済みです。

ActiveStorageの導入プロセス

Railsガイドとこちらの記事を元に設定を進めました。

プロセスはいたってシンプルです。

imagemagickのインストール
ActiveStorageの準備
ファイル管理の場所を設定
Userモデルに画像を添付できるようファイルに追記
テンプレート修正

内容を確認していきましょう！

1. imagemagickのインストール

Railsガイドにも記載がありますが、variantというメソッドを使用するとアップロードする画像のサイズなどを変換することが可能です。

variantを有効にするには、以下の2つが必須。

imagemagickをシステム上でインストール済みであること
gemのmini_magickをロードすること

$ brew install imagemagick

Homebrewを使ってimagemagickをインストールしたら、今度はGemfileにmini_magickというgemも追記しましょう。

# Gemfile
gem 'mini_magick'

bundle install実行で準備万端です。

2. ActiveStorageの準備

ここからがActiveStorageの準備作業です。gemのインストールは不要なので、その代わりに下記コマンドを実行。

$ rails active_storage:install

マイグレーションファイルが出力されるので、DBに反映するためrails db:migrateを忘れずに。

ActiveStorageが利用するテーブル(active_storage_blobsとactive_storage_attachments)を作成。

ActiveStorage::Attachmentはアプリ内のモデル(この場合Userモデル)とActiveStorage::Blobを結びつける中間テーブルのこと。

ActiveStorage::Blobは、添付された画像ファイルに対応するモデルのことです。ファイルの実体(ファイル名やメタデータなど)をDB外で管理することを前提にしています。

3. ファイル管理の場所を設定

添付したファイルを管理する場所の設定を確認しましょう。

config/environments/development.rb内のconfig.active_storage.serviceにファイルを管理する場所を付与します。下記を追記しましょう。

config.active_storage.service = :local

上記の場合、管理場所をlocalに設定しています。では、ファイルの管理場所が定義されているconfig/storage.ymlの内容を確認します。

# config/storage.yml

test:
  service: Disk
  root: <%= Rails.root.join("tmp/storage") %>

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

# Use rails credentials:edit to set the AWS secrets (as aws:access_key_id|secret_access_key)
# amazon:
#   service: S3
#   access_key_id: <%= Rails.application.credentials.dig(:aws, :access_key_id) %>
#   secret_access_key: <%= Rails.application.credentials.dig(:aws, :secret_access_key) %>
#   region: us-east-1
#   bucket: your_own_bucket

localはローカル環境(Railsアプリのディレクトリ配下のstorageディレクトリのこと)にファイルを格納する設定のことです。

ちなみに、デフォルトで用意されているのがlocalの設定です。AWSなどのサービスを利用しない場合はこのままでOKです。

クラウドを利用して画像をアップロードする場合は、config.active_storage.service = :amazonなど記述を適宜変更する必要があります。

4. Userモデルに画像を添付できるようファイルに追記

まず、app/models/user.rbに追記して、Userモデルにimageという画像を扱う属性を付与します。

has_one_attachedのメソッドを用いることで、1つのuserに1つの画像を紐づけることとその画像をUserモデルからimageと呼ぶことを指定することが可能になります。属性名はavatarなど別の名称でもOKです。

# app/models/user.rb
class User < ApplicationRecord
省略
  has_one_attached :image 
省略
end

そして、アップロードしたファイル情報が、Strong Parametersによって無視されないように:imageを追加しましょう！

Strong Parametersについては以前この記事で取り上げました。

#app/controllers/application_controller.rb
devise_parameter_sanitizer.permit(:sign_up, keys: [:username, :image])

私はプロフィールの編集画面からも画像を変更できるよう設定したかったため、下記の記述も追記しました。

#app/controllers/application_controller.rb
devise_parameter_sanitizer.permit(:account_update, keys: [:username, :image])

5. テンプレート修正

こちらは各自テンプレートにimageのフィールドなどを足しましょう。また、必要に応じてロケールファイルにも単語を追加してくださいね。

<div>
    <%= f.label :image %>
    <%= f.file_field :image %>
  </div>

以上で設定終了です！

設定完了画面

画像アップロード

f:id:b_leiu:20190520141723p:plain

画像編集

f:id:b_leiu:20190520142751p:plain

編集画面

f:id:b_leiu:20190520142807p:plain

編集完了

f:id:b_leiu:20190520142818p:plain

最後に

いかがだったでしょうか。ActiveStorageはdbにカラムなどを追加しなくても画像が管理できるので便利ですよね！本記事は以上となります。

参考文献:

『現場で使える Ruby on Rails 5速習実践ガイド』

Webとデザインのあれこれ

プログラミングとUIデザインの学習記録です。

ActiveStorage

ActiveStorageとは

本記事の前提

ActiveStorageの導入プロセス

設定完了画面

最後に