Rails Tutorialやってみた!44(13章-7)

公開日:2019-05-16
最終更新:2019-05-16

100DaysOfCode 70/100

今日やること

  • 画像の検証とリサイズ
  • 本番環境での画像アップロード

画像の検証

これまで無効なユーザーIDやパスワードを弾いてきたように、画像にもバリデーションがあったほうがよいです。

巨大すぎるファイルサイズや、非対応のファイルを投稿されてしまうと不具合の原因となります。

carrierwaveが自動生成したファイルpicture_uploader.rbを編集することで、アップローダーの設定を変更することができます。今回は投稿できるファイル拡張子をjpg(jpeg)、gif、pngに制限します。

picture_uploader.rbの該当箇所のコメントアウトを外したのち、
ビュー側ではfile_fieldaccept属性を加えます。

<%= f.file_field :picture, accept: 'image/jpeg,image/gif,image/png' %>  

独自のバリデーションメソッドを作る

ファイルサイズに対するバリデーションは残念ながらRails標準機能にはありません。メソッドを自作してみます。

def picture_size  
    if picture.size > 5.megabytes  
      errors.add(:picture, "should be less than 5MB")  
    end  
  end  

一見して何をやっているかがわかる直感的なコードですね。
picture.sizeでファイルサイズを、5,megabytesで5MBという単位を指定して簡単に比較できるのはさすがRuby!です。

独自に作ったメソッドをバリデーションとして読み込むには、従来のvalidatesではなくvalidateを用います。

さらにビュー側ではファイルサイズオーバー時に警告を表示するためにjQueryによるスクリプトを書きます。
今回のように、erbファイルに直接書けるようなミクロな機能をサクッと実装するにはjQueryが非常に有効ですね。

サーバーサイド実装とクライアントサイド実装

本文はここまでかなりあっさり進んでいますが、個人的にはけっこう難しいポイントだと感じました。少し整理してみましょう。

今回のバリデーションは、

  • クライアント側で、ユーザーの投稿を制限するような実装
  • サーバー側で、送られてきた不正なデータを弾くための実装

このように二重の構造になっています。
例えばビュー上(クライアント側)にあるfile_fieldacceptでは、「投稿フォームから送信できるファイルの種類を制限」しています。

ただし、このままでは投稿フォームを用いずに直接:picture属性に対してデータが送信された場合(普通に使う分には起こりませんが)などに対応できず、脆弱性が残されています。

そこで、サーバー側(picture_uploader)のバリデーションでそもそも無効な入力は受け付けないような仕様を作ることで、画像アップロード機能をより強固にしています。

ファイルサイズについても、「jQueryでアラートを出す」というクライアント側での実装と「5MB以上のファイルは弾く」サーバー側での実装が行われています。

フロントエンド、バックエンドとは言いますが、実際はどちらも密接に関わっているということが分かります。

画像のリサイズ

問題のあるファイル投稿は防げましたが、リサイズがされていない問題は未解決です。

今回はImageMagickというプログラムを使います。
聞き覚えのある名前ですが、これは前回インストールしたgemの一つmini_magickと関連性があります。

イメージとしては、ImageMagickというコマンドラインで動く画像編集ソフトがあり、それをRailsから使うためのgemがMiniMagickという感じです。

sudo apt-get -y install imagemagick  

私はWSLでのubuntu環境で開発を行っているため、aptを用いてインストールを行います。

include CarrierWave::MiniMagick  

※はじめにコマンドを入力した際にエラーが置きてしまいましたが、apt updateを行ってからやり直すことで解決しました。

includeでMiniMagickのメソッドをアップローダー内で使えるようにします。

今回は、resize_to_limitという、指定したサイズより画像が大きければ指定したサイズまで小さくする(拡大はしない)というとても便利なメソッドを使います。

前回大きすぎた画像が、適切なサイズに縮小されました!スゴイ。

開発環境での画像アップロード

本番環境向けに、前回導入したfogを使います。
そもそもfogとは、投稿画像をクラウドストレージにアップロードしてくれるgemです。

AWSのAmazon S3を使う

ここでついにAWSの登場です!
Amazon S3というストレージサービスを使って、本番環境でのアップロード画像を保存します。

セッティングの手順は本文のとおりに進めていけばそれほど難しくはありません。

  • IAMでユーザーを作成
  • S3のバケットを作成
  • アクセス権限を付与

を行い、Rails側でも環境変数を用いてcarrierwaveに各種の値を設定(heroku config:setコマンド)してあげればOKです。

アップロード画像を.gitignoreに含める

意外と忘れてしまいそうなポイントです。
投稿画像はアプリケーションとは直接関係がなくGitで管理する必要もありませんから、/public/uploads.gitignoreに追加しておきます。

(これまでlocalhost:3000で試した投稿画像はここに保存されていました)

git pushを済ませ、Heroku環境でも画像が投稿できることを確認できたら完了です!

終わりに

ようやく13章も終わりです。
各モデルの関連付けや画像の投稿などWebサービスのコアとなる機能の実装ということもあり、面白かったです。

最終章となる第14章ではついにフォロー機能を実装します!楽しみです。

記事が少しでもいいなと思ったらクラップを送ってみよう!
0
+1
@tammcの技術ブログ

よく一緒に読まれている記事

0件のコメント

ブログ開設 or ログイン してコメントを送ってみよう
目次をみる

技術ブログをはじめよう

Qrunch(クランチ)は、ITエンジニアリングに携わる全ての人のための技術ブログプラットフォームです。

技術ブログを開設する

Qrunchでアウトプットをはじめよう

Qrunch(クランチ)は、ITエンジニアリングに携わる全ての人のための技術ブログプラットフォームです。

Markdownで書ける

ログ機能でアウトプットを加速

デザインのカスタマイズが可能

技術ブログ開設

ここから先はアカウント(ブログ)開設が必要です

英数字4文字以上
.qrunch.io
英数字6文字以上
ログインする