2019年12月16日

プログラミング

Active Storageを使ってS3にファイルをダイレクトアップロードする

目次

  1. はじめに
  2. 導入
  3. 使い方
  4. まとめ

はじめに

bagelee Advent Calendar 2019 のDay16です!

昨日は『React Hooksを使う【Reactで作るマラソンペースメーカー】』についての記事でした。

React Hooksを使う【Reactで作るマラソンペースメーカー】

今日はRails5.2から追加された Active Storage を使って、S3にファイルをダイレクトアップロードする方法を紹介します。

環境

  • Ruby: 2.6.3
  • Rails: 6.0.1

導入

ActiceStorageとは

Active Storageとは、Rails5.2で追加された機能で、ファイルアップロード機能を提供します。ローカル環境のアップロードだけでなく、クラウドストレージサービスへのアップロードも可能となっており、Carrierwaveなどのファイルアップロード機能を提供するgemの代わりとしてしようすることができます。しかし、Active Storageにはバリデーションの機能がないため、その辺りも触れながら本日はAWS S3へのアップロード方法を紹介していきます。

ActiceStorageの準備

今回はUserモデルを例に説明を進めていきます。scaffoldコマンドを使ってUserのCRUD機能を用意しました。
Active Storageに必要なマイグレーションファイルが1つ作成されます。

 bin/rails active_storage:install

マイグレーションを実行すると、active_storage_blobsactive_storage_attachmentsの2つのテーブルが生成されます。
これでActive Storageを使うための準備は完了となります。

 bin/rails db:migrate

MySQLの場合

Rails6ではデフォルトでutf8mb4が適用されており、MySQLのバージョンによっては Specified key was too long; max key length is 767 bytesエラーが出ることがあります。Mysqlのインデックスサイズは767byteまでとなっており、utf8mb4で絵文字(4byte)を扱う場合に出るエラーです。4byteの文字を767byteに収めるために、191の制限を設ける必要があります(767 ÷ 4 = 191.75)。191制限を適用にindexが貼られているカラムにlimit: 191と記述します。また、:recordカラムにはポリモーフィック関連付けがされているので、polymorphic: {limit: 191}と記述して191Byte以内の制限をかけることでマイグレーションを実行することができます。

使い方

1つのファイルをアップロード

まずはじめに、1つのファイルをローカル環境でアップロードする方法をご紹介します。
以下をUserモデルに記述します。:imageの部分はアップロードファイルのカラム名として扱うことができるので自由に設定することができます。

class User < ApplicationRecord
   has_one_attached :image
 end

controller側では上記で設定したカラム名を、パラメータに追加します。

def user_params
   params.require(:user).permit(:name, :image)
 end

同様にview側でも上記のカラム名を使用してfile_fieldを記述すると、以下の画像のようにファイルをアップロードすることができるformが表示され、情報をpostすることでユーザの作成とファイルアップロードが完了します。(Name部分はscaffoldコマンドで作りました。)

 form.file_field :image


アップロードしたファイルは以下のようにimage_tagを使用して表示することができます。先程アップロードした私のアイコンが1つ表示されました。

image_tag(@user.image)

複数のファイルをアップロード

続いて複数のファイルをローカル環境でアップロードする方法をご紹介します。 先程同様Userモデルに関連付けの記述をしていきます。複数のファイルと紐付けを行うため、has_many_attachedの記述になっていることに注意が必要です。カラムの命名も:imagesとしました。

class User < ApplicationRecord
   has_many_attached :images
 end

controller側のパラメータにはimages: []と記述をして複数の値を配列で受け取ることができるように設定します。

def user_params
   params.require(:user).permit(:name, images: [])
 end

view側では先程同様カラム名を指定してfile_fieldを記述します。こちらも複数ファイルを受け取ることができるようmultiple: trueの記述が必要になります。ファイルを複数選択すると画像のように○ファイルと表示されるようになります。今回は私のアイコンの画像を2つアップロードしてみます。

 form.file_field :images, multiple: true


userに紐づくimagesの中身をimage_tagで表示します。アップロードに成功すると画像のようにアイコンが2つ表示されました。

@user.images.each do |image|
   image_tag(image) 
 end

バリデーションについて

記事の冒頭でも触れましたが、Active Recordにはバリデーションの機能がありません。ここでは自作バリデーションに活用できるアップロードファイルの情報の取得方法をご紹介します。

アップロードファイルが紐付けられているかを確認したい

userにアップロードファイルが紐付いているかを確認することができ、結果はbooleanで返ってきます。

@user.image.attached?
アップロードファイルの中身を確認したい

以下のコードでuserに紐付けされているファイルのサイズを確認することができます。

@user.image.byte_size

また、以下のような記述でファイル形式も確認することができます。

@user.image.content_type

ファイルのサイズと形式をviewに設置してみるとそれぞれ以下のように出力されます。

S3にアップロード

ここからはアップロード先をAWS S3へ変更する方法をご紹介していきます。まずはAWS上でS3バケットとアクセスユーザを用意します。S3バケットは以下のように、東京リージョン、バケット名はkobori-no-test-storageとして作成しました。

ユーザ名をkobori-no-test-userとしてユーザを作成し、credential.csvというアクセス情報が記載されたファイルをダウンロードしておきます。最後に作成したユーザにAmazonS3FullAccessのポリシーをアタッチします。これでAWSでの準備は完了です。

ローカル環境でRails側の設定ファイルを記述していきます。まず、aws-sdk-s3というgemをインストールして、Rails側でS3サービスへの接続ができる環境を作ります。

gem 'aws-sdk-s3', require: false

config/environments/development.rbでActive Storageの参照先を:localから:amazonへと変更します。

config.active_storage.service = :amazon

config/storage.ymlで下記コードの該当部分のコメントアウトを外して編集していきます。access_key_id:secret_access_key:にはAWSからダウンロードしてきたアクセス情報のファイルの情報を記載していきます。重要な情報なのでcredentialsや環境変数を使用して外部からは見えないように設定しましょう。最後にリージョンとバケット名を記述していきます。

amazon: service:  S3
 access_key_id: AWSアクセスID
 secret_access_key: AWSアクセスキー
 region: us-east-1(東京リージョンの場合)
 bucket: S3のバケット名

サーバを再起動しアップロードをしてみると、ファイルがS3にアップロードされたことが確認できました。

まとめ

本日はActive Storageを使ってS3にファイルをダイレクトアップロードする方法を紹介してきました。gemを使用する場合よりもシンプルに実装ができる一方で、バリデーションなどの機能が不足しているため、状況によって使い分けてみてはいかがでしょうか。最後まで読んでいただきありがとうございます。

Rubyのお仕事に関するご相談

Bageleeの運営会社、palanではRubyに関するお仕事のご相談を無料で承っております。
zoomなどのオンラインミーティング、お電話、貴社への訪問、いずれも可能です。
ぜひお気軽にご相談ください。

無料相談フォームへ

0

2

AUTHOR

kobori

こぼり ともろう エンジニア

サーバーサイドエンジニア。SIerを経て2019年7月に入社。日々学習しながらRuby on Railsを使った開発を行っています。

アプリでもっと便利に!気になる記事をチェック!

記事のお気に入り登録やランキングが表示される昨日に対応!毎日の情報収集や調べ物にもっと身近なメディアになりました。

簡単に自分で作れるWebAR

「palanAR」はオンラインで簡単に作れるWebAR作成ツールです。WebARとはアプリを使用せずに、Webサイト上でARを体験できる新しい技術です。

palanARへ
palanar

palanはWebARの開発を
行っています

弊社では企画からサービスの公開終了まで一緒に関わらせていただきます。 企画からシステム開発、3DCG、デザインまで一貫して承ります。

webar_waterpark

palanでは一緒に働く仲間を募集しています

正社員や業務委託、アルバイトやインターンなど雇用形態にこだわらず、
ベテランの方から業界未経験の方まで様々なかたのお力をお借りしたいと考えております。

話を聞いてみたい

運営メンバー

eishis

Eishi Saito 総務

SIerやスタートアップ、フリーランスを経て2016年11月にeishis, Inc.を設立。 マーケター・ディレクター・エンジニアなど何でも屋。 COBOLからReactまで色んなことやります。

sasakki デザイナー

アメリカの大学を卒業後、日本、シンガポールでデザイナーとして活動。

しまだ

しまだ デザイナー

WebAR/VRのデザインと3DCG制作がメインです。 肩書きは「アニメ案件に関わりたいデザイナー」。

Miu マーケター

ドイツでWEBマーケティングしています。

しんのき エンジニア

主に React Native を使ったアプリ開発と AWS や Firebase を使ったサーバーレスアーキテクチャを担当しています。元々はインフラとかPHPをやっていました。

yamakawa

やまかわたかし デザイナー

フロントエンドデザイナー。デザインからHTML / CSS、JSの実装を担当しています。最近はReact NativeやReact360をよく触っています。

furuya エンジニア

サーバーサイド、フロントエンド、Unityと色々手を出してる雑食系エンジニア。ReactNativeが最近のマイブーム。

Sayaka Osanai デザイナー

Sketchだいすきプロダクトデザイナー。シンプルだけどちょっとかわいいデザインが得意。 好きな食べものは生ハムとお寿司とカレーです。

はらた

はらた エンジニア

サーバーサイドエンジニア Ruby on Railsを使った開発を行なっています

うえまつゆい エンジニア

サーバーサイドエンジニアからフロントエンドエンジニアになりました。主にReact Nativeでのアプリ開発をしています。

kobori

こぼり ともろう エンジニア

サーバーサイドエンジニア。SIerを経て2019年7月に入社。日々学習しながらRuby on Railsを使った開発を行っています。

sasai

ささい エンジニア

フロントエンドエンジニア WebGLとReactが強みと言えるように頑張ってます。

damien

Damien

WebAR/VRを中心に企画やディレクションやエンジニアもちょっとやっています。森に住んでいます。

デザイナーゲスト

ゲスト デザイナー

CONTACT PAGE TOP