読者です 読者をやめる 読者になる 読者になる

ちーくんのブログ

プログラミング備忘録

carrierwaveの便利な機能の使い方(part1)

こんにちは。本日はcarrierwaveで用意されてる便利な機能をいくつか紹介していきたいと思います。

carrierwaveにはファイルの拡張子や複数の画像のサイズ(メインやサムネイルなど)を簡単に実装できる機能があります。
実際にサイトを作っていると欲しいなという機能が多いので一緒に見ていきましょう。

バージョン

Ruby '2.2.1'
Rails '4.2.1'


画像の拡張子の制限

ファイルには拡張子がたくさんありますが、アップロードする画像の種類を制限したいなと思うことがあると思います。
carrierwaveではそれを簡単に実装することができます。
アップローダー用のファイルにあるコメントになっている部分をコメントアウトします。

# app/uploaders/picture_uploader.rb
  def extension_white_list
    %w(jpg jpeg gif png)
  end

これだけでファイルの拡張子の制限ができてしまいます。この場合は jpg,jpeg,gif,png の拡張子だけを許可します。


画像サイズのバリデーション(準備編)

画像をアップロードするうえで、あまりにも大きなサイズの画像を投稿されてしまうとレイアウトが崩れてしまいますね。
そこでcarrierwaveには簡単に画像のリサイズができる機能が用意されています。
しかしながら、それを実装するために下準備がいくつかあるので順番に見ていきましょう。

まずはじめに画像をリサイズするためにImageMagickという画像操作プログラムをインストールします。

今回はhomebrewでインストールします。

brew install imagemagick

次にImageMagickを使えるようにするためにMiniMagickをGemに記載します。

# Gemfile
gem 'mini_magick'
bundle install

そしてMiniMagickを使えるようにするためにアップローダーファイルを編集します。
とはいえ、こちらもコメントアウトするだけです。

#app/uploaders/picture_uploader.rb
<!-- 以下のコメントをコメントアウト -->
include CarrierWave::MiniMagick

以上で下準備は完了です。


※ファイルサイズのバリデーションはこちらを参考にしてください。
chi-kun.hatenablog.com


画像サイズのバリデーション(実践編)

下準備が終わったので実際に投稿して行きましょう。
今回はindexページにサムネイル、showページに大きな画像を表示したいと思います。

まずアップローダーファイルに画像の大きさを指定しましょう。こちらもコメントアウトされているので解除しましょう。

#app/uploaders/picture_uploader.rb

  <!--showページ(大きな画像)-->
  process :resize_to_fit => [200,200]

  <!--indexページ(サムネイル)-->
  version :thumb do
    process :resize_to_fit => [50,50]
  end

これで画像のリサイズができたはずです。

#app/posts/index.html.erb
  <!-- 表示したいところに記載 -->
  <%= image_tag post.picture.url(:thumb) %>
#app/posts/show.html.erb
  <!-- 表示したいところに記載 -->
  <%= image_tag @post.picture.url %>

それでは実際に投稿してみましょう。

show.html.erbの場合
f:id:chi_kun:20160515145400p:plain


index.html.erbの場合
f:id:chi_kun:20160515145420p:plain


きちんと同じ画像がそれぞれリサイズされていて、showページでは大きな画像、indexページではサムネイルが表示されていると思います。


※追記

便利な機能(part2)
chi-kun.hatenablog.com



本日は以上です。