###画像のリサイズ
ユーザーに手元で画像サイズを変更させるのは不便です。
なので、画像を表示させる前にサイズを変更する(リサイズする)ようにしてみましょう。
画像をリサイズするためには、画像を操作するプログラムが必要になります。
開発環境にインストールします。
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をすることができなかった。