BNBのプログラミング勉強記録

ガチのプログラミング初心者が駆け上がっていくブログ

S3での画像投稿機能（導入・圧縮・exif削除・サムネイル）

AWS heroku

主旨

私的メモです。これらをまとめた記事がないので自分用に作りました。なのでかなり省略して書いています。

  1. S3を入れる
  2. 画像を圧縮しexif削除してアップする
  3. サムネイル自動で作る

（いずれも、herokuにデプロイする前提）

前提

  • scaffoldで作ってるとします。
  • git pushやherokuデプロイの記載は省略します。（もしこの記事が参考になる人がいたとしたら、どこでやるべきか分かってるはず。俺がそうなので。）

その1：active storageとs3の導入

導入すると、自分の作ったRailsのサイトに画像をアップロードできます。感動します。そしてherokuでデプロイする度に画像が消えません。（Fileでやると消えるのよ）。下記が手順です。なお、s3に登録する部分は俺の書いた別記事を見てください
https://blue-night-blue.hatenablog.com/entry/2023/06/14/195424

  1. ターミナル：rails active_storage:install
  2. ターミナル：rails db:migrate
  3. モデルrb：has_one_attached :image
  4. コントローラー：permitに:imageを足す
  5. ビュー：フォームに「form.file_field :image,direct_upload: true」
  6. ビュー：図1
  7. storage.yml：コメントアウト解除して自分のS3の情報を入力
  8. ターミナル：EDITOR=vim rails credentials:edit
  9. s3：キー情報をコピー
  10. ターミナル上のvim：コメントアウト解除、前項を貼付け、保存
  11. production.rb：config.active_storage.service = :amazon
  12. development.rb：同上
  13. ターミナル：heroku config:set RAILS_MASTER_KEY=`cat config/master.key`

図1

画像をクリックするとオリジナルのデカい画像へ飛ぶ仕様にしていますので、お好みでlink_toの部分は消してください。ちなみにリンク先をS3じゃなくて自分の所のURLにするにはAWSのcloud frontっていうのを使えばできるっぽい。（cloud frontって「URLを変える」というよりは、「先読みでサイトを軽くする」用のサービスのようですが）

<% if post.image.attached? %>
      <%= link_to post.image do %>
        <%= image_tag post.image %>
      <% end %>
 <% end %>

その2：画像を圧縮かつexif削除してS3にアップロード

これは、「最大幅・高さを指定」「exif削除」という、俺が思う「Webサービスに画像アップした際に、サービス側で最低限やってほしい処理」を入れている。だってさあ、顔写真アップして、鼻毛見えたら嫌じゃん。剃るのもめんどいし。俺はPHILIPSの鼻毛マシーンを使っている。

  1. ターミナル：（初回だけ）brew install vips
  2. ターミナル：（初回だけ）brew install imagemagick
  3. ジェム：image_processingのコメントアウト解除
  4. ターミナル：bundle install
  5. コントローラー：図2を、コントローラーの下の方にコピペ
  6. コントローラー：post_paramsをimage_resize(post_params)に修正

図2

MiniMagickで出来ることに関しては、下記を参照されたし。
https://github.com/janko/image_processing/blob/master/doc/minimagick.md

    def image_resize(params)
      if params[:image]
        params[:image].tempfile = ImageProcessing::MiniMagick
          .source(params[:image].tempfile)
          .resize_to_limit(1024, 768)
          .strip
          .call
      end
      params
    end

その3：サムネイル自動作成

1つのページの中に画像が大量にある場合、サムネイルが必要と思います。以下をやると、なんと自動でサムネイルを成形してくれます。すごいね。

  1. モデルrb：上記で書いたやつを、図3のように書き換え
  2. ビュー：図4のように書くと、サムネイルが作れるぞ
  3. ファイル作成：アプリのフォルダ直下にAptfileというカラのファイルを作る（ジェムファイルみたいなやつです）
  4. Aptfile：図5をコピペ
  5. ターミナル：heroku buildpacks:add --index 1 https://github.com/heroku/heroku-buildpack-apt
  6. ターミナル：heroku buildpacks:add --index 2 https://github.com/brandoncc/heroku-buildpack-vips

図3

数字をいじるとサムネ画像の大きさも変わるぞ

has_one_attached :image do |attachable|
  attachable.variant :thumb, resize_to_limit: [300, 300]
end

図4

サムネを使う場所にこう書こう。ちなみにprocessedは、まずサムネイルが作られてなかったら自動で作る、以降は「サムネイルを過去に作ってるか」を確認し、作ってたらそれを持ってきてくれる。気の利く後輩とでもいいましょうか。

 <%= image_tag post.image.variant(:thumb).processed.url %>

図5

libglib2.0-0
libglib2.0-dev
libpoppler-glib8