Rails Girls Guides

画像のサムネイルを作ってみよう

Created by Miha Filej, @mfilej, Translated by Hiroshi SHIBATA @hsbt, Goh Matsumoto @urimaro

このガイドは Rails Girlsワークショップのメインガイド の一部です。ガイドを続ける前に、番号順に進めているか確認してください。

インターネットはスピードがすべてです。ページが読み込まれるスピードが速ければ速いほど、ページから離れていく人は少なくなります。そして、私たちはアイデアアプリで素晴らしいアイデアを共有したいので、人々に留まっていてほしいと考えています！また、データの転送量が少なくて済むと、データプランを契約している訪問してくれた人たちから感謝されると思います。

ページの読み込みを速くする方法の1つは、小さいサイズの画像を表示することです。画像のサイズが小さければ小さいほど、インターネット上の転送速度は速くなります。

ImageMagick をインストールしよう

アイデアにアップロードした画像のサイズを変更するために ImageMagick を使います。

ターミナルで次のコマンドを実行してください:

brew install imagemagick

Ubuntu を使っている場合、ターミナルで次のコマンドを実行してください:

sudo apt-get update
sudo apt-get install -y imagemagick

ImageMagick のインストーラー をダウンロードし(最初の download リンクをクリックしてください)、実行してください。インストーラーのウィザードで「Install legacy utilities」のチェックボックスをチェックしてください。

Help from the coach

ImageMagick とは何か、以前使ったライブラリや gem とどう違うのかを説明してください。

ImageMagick 用の Ruby gem をインストールしよう

Ruby が ImageMagick とやり取りできるようにするために、Ruby gem mini_magick を使います。まずアプリに追加してインストールする必要があります。

Gemfile をテキストエディタで開き、この行を追加してください:

gem "mini_magick"

以下の行の下です:

gem "carrierwave"

ターミナルでこのコマンドを実行してください:

bundle install

インストール後、Rails サーバーを(再)起動してください。

サムネイルを作成するようアプリに指示しよう

これで Ruby gem mini_magick を通して ImageMagick とやり取りできるようになったので、ファイルをアップロードするための gem carrierwave にアップロードする画像ごとにサムネイルを作るように指示できます。

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

# include CarrierWave::MiniMagick

行の先頭にある # を削除します。

Help from the coach

コード上のコメントの用途やどのような時に使うかを説明してください。

今変更した行の下に以下を追加します。

version :thumb do
  process :resize_to_fit => [150, 150]
end

これからアップロードされる画像は小さいサイズにリサイズされますが、すでにアップロードされた画像は変更されません。もう一度アイデアを編集して新しい画像を追加してください。保存するとアップロードした画像のサムネイルがアイデアに表示されます。

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

アイデアの画像の表示方法は変えていないので、まだ元の大きな画像が表示されるはずです。ビューを変更してサムネイルを表示するように変えてみましょう。

app/views/ideas/_idea.html.erb を開いて、以下の行を変更してください:

<%= image_tag(idea.picture_url, width: 150, height: 150, class: "img-thumbnail flex-shrink-0") if idea.picture? %>

このように変更します。

<%= image_tag(idea.picture_url(:thumb), width: 150, height: 150, class: "img-thumbnail flex-shrink-0") if idea.picture? %>

サムネイルが表示されるようになったことを確かめるために、ブラウザで アイデアの一覧 を表示してください。

Help from the coach

HTMLで画像の幅を指定することとサーバで画像をリサイズすることの違いを説明してください。どちらも小さく見えると思いますが、サムネイルとしてリサイズされるのは片方だけです。

ガイドを進めていて行き詰まったときはコーチに助けてもらいましょう。また Ruby、Rails、コンソール、テキストエディタについての便利なチートシート も参考にしてみてください。

ガイド

全てのガイドを見る