railsチュートリアル第十三章 画像のリサイズ 本番環境での画像アップロード

画像のリサイズ

ユーザーに手元で画像サイズを変更させるのは不便です。
なので、画像を表示させる前にサイズを変更する（リサイズする）ようにしてみましょう。

画像をリサイズするためには、画像を操作するプログラムが必要になります。
開発環境にインストールします。

sudo apt-get -y install imagemagick

画像処理用のgemを追加する

Gemfile

source 'https://rubygems.org'
git_source(:github) { |repo| "https://github.com/#{repo}.git" }

gem 'rails',                      '6.0.3'
gem 'image_processing',           '1.9.3'
gem 'mini_magick',                '4.9.5'
gem 'active_storage_validations', '0.8.2'
.
.
.

$ bundle install

表示用のリサイズ済み画像を追加

app/models/micropost.rb

class Micropost < ApplicationRecord
.
.
.
  # 表示用のリサイズ済み画像を返す
  def display_image
    image.variant(resize_to_limit: [500, 500])
    # variantメソッドで変換済み画像を作成できる
    # resize_to_limitオプションを用いて,
    #   画像の幅や高さが500ピクセルを超えることのないように制約をかけます。
  end
end

リサイズ済みのdisplay_imageを使う

app/views/microposts/_micropost.html.erb

<li id="micropost-<%= micropost.id %>">
  <%= link_to gravatar_for(micropost.user, size: 50), micropost.user %>
  <span class="user"><%= link_to micropost.user.name, micropost.user %></span>
  <span class="content"><%= micropost.content %></span>
  <span class="content">
    <%= micropost.content %>
    <%= image_tag micropost.display_image if micropost.image.attached? %>
    <!--image_tagヘルパーを用いて、関連付けられたmicropost.imageを
    　　　描画（レンダリング）できるようになります-->
    <!--画像がアタッチされていたら画像を表示させる-->
    <!--image.attached?されたら画像の編集される-->
  </span>
  <span class="timestamp">
    Posted <%= time_ago_in_words(micropost.created_at) %> ago.
    <!--メソッド名の表すとおりですが、「3分前に投稿」といった文字列を出力します。-->
    <% if current_user?(micropost.user) %>
    <!--もし自分の投稿だったら-->
      <%= link_to "delete", micropost, method: :delete,
                                       data: { confirm: "You sure?" } %>
    <% end %>
  </span>
</li>

演習

解像度の高い画像をアップロードし、リサイズされているかどうか確認してみましょう。画像が長方形だった場合、リサイズはうまく行われているでしょうか?

アイコンが出てきた。

本番環境での画像アップロード

AWS用のgemを追加する

Gemfile

source 'https://rubygems.org'
git_source(:github) { |repo| "https://github.com/#{repo}.git" }

gem 'rails',                   '6.0.3'
gem 'aws-sdk-s3',              '1.46.0', require: false
gem 'image_processing',        '1.9.3'
gem 'mini_magick',             '4.9.5'
.
.
.

$ bundle install

ストレージオプションにAWSを追加する

config/storage.yml

test:
  service: Disk
  root: <%= Rails.root.join("tmp/storage") %>

local:
  service: Disk
  root: <%= Rails.root.join("storage") %>

amazon:
  service: S3
  access_key_id:     <%= ENV['AWS_ACCESS_KEY'] %>
  secret_access_key: <%= ENV['AWS_SECRET_KEY'] %>
  region:            <%= ENV['AWS_REGION'] %>
  bucket:            <%= ENV['AWS_BUCKET'] %>

本番でAWS S3を使うよう設定する

config/environments/production.rb

.
.
.
  # config.active_record.database_resolver_context = ActiveRecord::Middleware::DatabaseSelector::Resolver::Session
　
　# アップロードされたファイルをAWSに保存する
  config.active_storage.service = :amazon
end

困ったこと

git push heroku masterをすることができなかった。