0
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 1 year has passed since last update.

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

Posted at

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

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

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をすることができなかった。

0
0
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
0
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?