Carrierwave を使ってサムネイルを作ってみよう

Created by Miha Filej, @mfilej, Translated by Hiroshi SHIBATA

コーチへ: 始めてのRailsアプリのStep4 でHTML の img タグの width を指定したことについて説明しましょう。また、それがサーバーで画像サイズを変更することの違いも話しあってみましょう。

1.ImageMagickのインストール

コーチへ: ImageMagick とは何をするものかを話しあいましょう。ImageMagick と gem(ライブラリ)と異なる部分や gem を追加する前に何故インストールしたかについても話してみましょう。

Rails アプリケーションの Gemfile を開いて

gem 'carrierwave'

の下に

gem 'mini_magick', '3.8.0'

を追加します。その後に Terminal で以下のコマンドを実行します。

bundle

2.画像をアップロードした時にサムネイルを作成しよう

app/uploaders/picture_uploader.rb を開いて、以下の行を探しましょう。

  # include CarrierWave::MiniMagick

上の行の # を削除します。

コーチへ: コード上のコメントの用途やどのような時に使うかを説明しましょう

削除した場所のすぐ下に以下を追加します。

version :thumb do
  process :resize_to_fill => [50, 50]
end

これで画像をアップロードするとリサイズするようになりました。しかし、もうアップロード済みの画像は変更されません。もう一度 idea を編集して画像をアップロードし直してください。

3.サムネイルを表示してみよう

app/views/ideas/index.html.erb を開いて、もし画像がアップロードされていればリサイズした画像を表示するようにしましょう。

<td><%= image_tag idea.picture_url, width: '100%' if idea.picture.present?%></td>

を下のように変更します。

<td><%= image_tag idea.picture_url(:thumb) if idea.picture? %></td>

これで、idea の一覧を開いた時にサムネイルが表示されるようになりました。