BackEnd

Active Strageを使用してユーザーのアバターを登録、表示する

投稿日:2018年3月12日 更新日:

はじめに

Ruby on Rails の 5.2 リリースが近づいてきました。
(この記事執筆時点では 5.2.0.rc1 がリリースされています。)

今回は、Rails 5.2 の目玉の1つである Active Strage を使ってみようと思います。
Active Strage は、ファイルのアップロード機能であり、今まで CarrierWave だったり Shrine を使っていたところです。
Rails の標準機能として実装されるのは嬉しいです。
Active Storage の概要 | Rails ガイド

今回はガイドページにあるように、ユーザーにアバター画像を紐付けるケースを想定して実施していこうと思います。

環境

  • Ruby 2.5.0
  • Rails 5.2.0.rc1

セットアップ

前準備

今回はユーザー1レコードにつき、1つのアバター画像をアタッチします。
そのため、あらかじめユーザーのCRUDを作成しておきます。
今回は分かりやすいよう、 users テーブルには最低限のカラムしか持たせていません。
(後述しますが、Active Strage用にカラムは必要ないようです。)

マイグレーションファイル作成

Active Strageでは、以下の2つのテーブルを使用してファイルをアタッチします。

  • active_strage_blobs
  • active_strage_attachments

そのため、まずはこのテーブルを作成するマイグレーションファイルを作成します。
幸いなことにコマンドで生成できます。

テーブルのスキーマを見ると、このような感じです。

blobs の方が、アタッチしたファイル自体を管理しています。
attachments の方で、どのレコードと blobs が紐づいているか管理しています。

設定ファイル

Rails 5.2 では、Active Strage用のYAMLファイルができていました。
こちらでパスなどを設定します。

なお、AWS S3やMicrosoft Azureなども指定できます。
ここで宣言したキーを使って( testlocal など)、各環境での設定ファイルにて指定します。

実際に使って見る

モデル

まずは、 User モデルに、アバター画像をアタッチするアクセサを定義します。

このアクセサに、Active Strageがファイルをアタッチしてくれます。
なお、レコードとファイルが1対1の場合は has_one_attached ですが、1対多の場合は has_many_attached になります。
(1対多の関係については後日記事にできたらいいな。)

コントローラー

create する場合は、ストロングパラメータに含めてしまえば、 User のレコードを作成しつつ、 blobsattachments にレコードを作成します。

更新の場合は、 avatar.attach を使うようです。
私は下記のように書いてみました。
(もうちょっと良い書き方ありそう。。。)

画像は、 storage ディレクトリに暗号化された状態で格納されます。

また、対象の画像の active_storage_blobsactive_storage_attachments は下記のようになっています。

また、保存時には ActiveJob をはじめ複数のジョブが動きます。

ビュー

@user.avatar.attached? でアタッチ済みか判定されます。
アタッチされた画像は image_tag を使用して下記のように表示できるようです。

また、mini-magickをインストールすれば、 variant でリサイズを作成することもできます。

個人的メモ

RoutingErrorのハンドリング

routes.rb でRoutingErrorのハンドリングをしていると、Active Storage経由の画像が表示されないかも。
こちらのQiita記事にて解説がされておりますので注意です。
active storageの画像がリンク切れする – Qiita

ImageMagickを忘れずにインストール

ImageMagick自体をインストールしないと、S3にアップしたファイルのリサイズに失敗します。
mini_magickaws-sdk-s3 をインストールして満足しないようにしよう。

さいごに

AWSのS3も試してみましたが、コンフィグの書き換えだけで作動しました。
簡単に画像アップロードが用意できるため、今後使われていくのではないでしょうか?

blog-page_footer_336




blog-page_footer_336




-BackEnd
-

執筆者:

免責事項

このブログは、記事上部に記載のある投稿日時点の一般的な情報を提供するものであり、投資等の勧誘・法的・税務上の助言を提供するものではありません。仮想通貨の投資・損益計算は複雑であり、個々の取引状況や法律の変更によって異なる可能性があります。ブログに記載された情報は参考程度のものであり、特定の状況に基づいた行動の決定には専門家の助言を求めることをお勧めします。当ブログの情報に基づいた行動に関連して生じた損失やリスクについて、筆者は責任を負いかねます。最新の法律や税務情報を確認し、必要に応じて専門家に相談することをお勧めします。


comment

メールアドレスが公開されることはありません。 が付いている欄は必須項目です

CAPTCHA


関連記事

laravel logo

Laravelの基礎知識

1 はじめに2 Laravelの概要2.1 学習コストが低い2.2 Symfonyがベース2.3 DIを積極的に活用している3 ディレクトリ構成3.1 app3.2 bootstrap3.3 conf ...

laravel logo

Laravelで画像アップロード実装が楽になるかもしれないlaravel-imageup

1 はじめに2 環境3 導入4 実装5 個人的にハマったこと5.1 配列はダメ5.2 PHPStanで引っかかる6 さいごに7 おすすめ書籍 はじめに こんにちは。webアプリケーションを作る際にファ ...

【Ruby Advent Calender 2017】Rubyでスクレイピングをしてみる【11日目】

1 はじめに1.1 概要2 仕様3 ソースコード4 使用したモジュール、Gem5 対象ページを取得6 XPATHから目的のものを抜き出す7 次のページのリンクを取得する8 他のサイトの記事でも試してみ ...

rails

Ruby2.4でCookieを手動で復号する際に発生したエラーの対処

1 はじめに1.1 前提条件2 発生したエラー2.1 実際のコード2.2 エラー詳細2.3 原因3 どう対処したか3.1 修正後のコード はじめに こんにちは、onoです。 現在開発中のアプリケーショ ...

Go言語

Go言語で使えるORMライブラリ

1 はじめに2 ORMライブラリ2.1 GORM2.2 SQLBoiler3 GORMを使ってみる3.1 導入3.2 migration3.3 insert3.4 select3.5 update3. ...

フォロー

blog-page_side_responsive

2018年3月
 123
45678910
11121314151617
18192021222324
25262728293031

アプリ情報

私たちは無料アプリもリリースしています、ぜひご覧ください。 下記のアイコンから無料でダウンロードできます。