正方形に切り抜くように修正する #7431

yocchan-git · 2024-02-22T13:20:57Z

Issue

ユーザーアイコンを正方形で切り抜きたい #6668

概要

変更確認方法

feature/resize-avatar-to-square-120-120をローカルに取り込む
foreman start -f Procfile.devでサーバーを起動
アイコンが設定されてあるユーザでログイン(後から設定してもOKです)
http://localhost:3000/users にアクセスする
右クリック→新しいタブで画像を開くと名前をつけて画像を保存する
新しいタブで画像を開くでは、正方形になっているか確認する
保存した画像の情報を見て、大きさが120 x 120になっているか確認する

Screenshot

同じ画像でリサイズの違いを確認しました

変更前

変更後

yocchan-git · 2024-02-26T11:16:46Z

@unikounio さん

レビュアーにさせていただきました！
差分がいまいち分かりにくくなっていますが、お手隙でレビューしていただけますと嬉しいです🙏

レビューしていただきたいファイルはuser.rbだけです😆
他の変更はこちらのPRによるものですので、お気になさらずでお願いいたします

そうなんです、１ファイルだけの修正です🫡

unikounio

確認させていただきました～
変更確認手順に沿って確認したところ、「新しいタブで開いた画像」は正方形に、「保存した画像」は120 x 120になっていることが確認できました👍

コードもよく整理されていて読みやすかったです！

１点だけ気になった点をお伝えさせていただきます。
変更確認方法の中でユーザー一覧ページのURL（http://localhost:3000/users）をお示しいただいたのですが、Screenshotではユーザーのプロフィールページ（http://localhost:3000/users/#{@user.id}）での確認の様子が示されているので、ここを統一していただくともっと良くなるかもしれません。

どちらのページからも同様の結果が確認できましたので、アプリの変更作業自体は問題なしとして、私からはApproveとさせていただきます。

よっちゃんさんの卒業前に一緒に開発できて嬉しかったです😄

yocchan-git · 2024-02-27T10:46:19Z

unioさん、レビューありがとうございました！僕も一緒にできて嬉しいです
ご指摘もありがとうございます。助かります😆

@komagata さん、チームメンバーからapproveいただきました！
こちらのPRからブランチを切っていますので、user.rbだけご確認をお願いいたします🙇‍♂️

また、こちらのPRがマージされたら、rebaseしますので、こちらもレビューいただけますと🙏

komagata · 2024-03-07T17:26:52Z

app/models/user.rb

    else
      image_url default_image_path
    end
  rescue ActiveStorage::FileNotFoundError, ActiveStorage::InvariableError
    image_url default_image_path
+  rescue Vips::Error
+    avatar.variant(resize_to_fit: [120, 120]).processed.url


rescue句の中でエラーが発生しそうな処理を書くのはやめた方がいいと思います。
さらに外側のbeginなどでキャッチできなくはないですが、一般的に悪い作法とされているので避けた方がいいかなと思います。

yocchan-git · 2024-03-08T02:46:36Z

@komagata さん

指摘いただいた点の修正しました！
お手隙で再度ご確認いただけますと🙇‍♂️

繰り返しになりますが、見ていただきたいのはuser.rbだけです！

komagata · 2024-03-09T17:33:56Z

@yocchan-git コンフリクトの修正をお願いします。
また、#7397 をマージしましたのでrebaseお願いします。

yocchan-git · 2024-03-11T00:37:08Z

@komagata さん

コンフリクトの解消とrebaseしました。
テストデータについても修正してました...🥲申し訳ございません

お手隙で再度レビューお願いいたします🙇‍♂️

komagata · 2024-03-19T08:13:22Z

app/models/user.rb

@@ -804,4 +810,34 @@ def category_having_active_practice
  def category_having_unstarted_practice
    unstarted_practices&.first&.categories&.first
  end
+
+  def fetch_avatar_size(width, height)


userモデルがfatになりすぎてしまうので別のクラスを作成することを含めて設計してみてください。

単純に別クラスに同名メソッドを切り出すとか、クラスメソッドだけの手続き型のクラスを作ってしまうとかがよくある間違いですが、オブジェクト指向プログラミングのプラクティスにあったように、ゼロからオブジェクト指向で設計してみてください。

下記のＰＲではＯＧＰの画像のリサイズをやろうとしていますが、もしかしたらこちらと合わせて共通化も考えられるかもしれません。 @wata00913 さんと連絡を取り合ってみるのもいいと思います。

#6483

@komagata さん

ImageResizerクラスを作成しました！
お手隙で再度レビューいただけますと嬉しいです🙇‍♂️

また、送っていただいたOGPのリサイズでも使えるクラスにしました。
レビューよろしくお願いいたします🙏

@yocchan-git

@wata00913 さんとまず連絡をとっていただければありがたいとおもいます。
@wata00913 さんもこの部分を長く作業してきているので話がなく勝手に方針がかわったり、共通化されると混乱されるとおもいます。

承知しました！まずwataさんに確認を取ってみます
ありがとうございます🙏

@komagata さん

wataさんとも話をして、結局共通化しなくても良くなりました。
それを踏まえてレビューしていただけますと嬉しいです🙇‍♂️
#6483 (comment)

yocchan-git · 2024-03-26T12:12:56Z

app/models/user.rb

@@ -593,11 +593,11 @@ def avatar_url
    default_image_path = '/images/users/avatars/default.png'

    if avatar.attached?
-      avatar.variant(resize_to_limit: AVATAR_SIZE, autorot: true, saver: { strip: true, quality: 60 }).processed.url
+      avatar.variant(resize_to_fill: AVATAR_SIZE, autorot: true, saver: { strip: true, quality: 60 }).processed.url


resize_to_fillオプションの説明です。(参考)

アスペクト比を維持して拡大(or縮小)する

大きくなった場合は真ん中で切り取る

ざっくりこのようなオプションです。😁
気になる点ありましたら、ぜひコメントください！

よろしくお願いいたします🙇

komagata

@yocchan-git めっちゃすっきりした仕様になってよかったですね。
確認させていただきました。OKです～👌

yocchan-git · 2024-03-29T22:38:07Z

ありがとうございます！

yocchan-git self-assigned this Feb 22, 2024

yocchan-git force-pushed the feature/resize-avatar-to-square-120-120 branch from 6aa3586 to 888ec80 Compare February 24, 2024 01:17

yocchan-git requested a review from unikounio February 26, 2024 11:19

yocchan-git marked this pull request as ready for review February 26, 2024 11:23

unikounio approved these changes Feb 27, 2024

View reviewed changes

yocchan-git requested a review from komagata February 27, 2024 10:46

yocchan-git mentioned this pull request Mar 6, 2024

ImageMagickからlibvipsに移行する #7397

Merged

komagata reviewed Mar 7, 2024

View reviewed changes

yocchan-git force-pushed the feature/resize-avatar-to-square-120-120 branch from 925b8c5 to 945359d Compare March 8, 2024 00:28

yocchan-git requested a review from komagata March 8, 2024 02:44

yocchan-git force-pushed the feature/resize-avatar-to-square-120-120 branch from 945359d to 3ee84fd Compare March 9, 2024 22:18

komagata reviewed Mar 19, 2024

View reviewed changes

yocchan-git mentioned this pull request Mar 20, 2024

サムネイル画像をOGP画像用のサイズに合わせる #6483

Open

yocchan-git force-pushed the feature/resize-avatar-to-square-120-120 branch 2 times, most recently from a97a765 to 7352933 Compare March 22, 2024 08:55

yocchan-git requested a review from komagata March 22, 2024 10:51

yocchan-git commented Mar 26, 2024

View reviewed changes

komagata force-pushed the main branch from 033db0e to 39dc85f Compare March 27, 2024 07:19

yocchan-git added 7 commits March 28, 2024 21:09

正方形でくり抜くように修正する

6eb993c

metadataを追加する

cfbc18a

vipsのインストールを削除する

38240b7

SASSを使わずに画像を正方形に切り取る

6839a2c

同期更新するように変更する

6fa0b83

cropでエラーにならないように小数点を設定する

5186743

エラーの起きない例外処理にする

c4df9db

yocchan-git added 6 commits March 28, 2024 21:09

クラスに抽出して共通化する

09e67f7

テストコードを追加する

f3df1c7

例外処理を他の箇所に移動させる

b03abac

ImageResizerにその他オプションを渡せるようにする

9816551

テストする項目を追加する

b37b151

resize_to_fillオプションを使用する

2f350dd

yocchan-git force-pushed the feature/resize-avatar-to-square-120-120 branch from 32efd05 to 2f350dd Compare March 28, 2024 12:10

komagata approved these changes Mar 29, 2024

View reviewed changes

komagata merged commit fd19b2a into main Mar 29, 2024
2 checks passed

komagata deleted the feature/resize-avatar-to-square-120-120 branch March 29, 2024 16:06

github-actions bot mentioned this pull request Mar 28, 2024

Release 2024-04-11 11:25:49 #7610

Merged

15 tasks

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

正方形に切り抜くように修正する #7431

正方形に切り抜くように修正する #7431

yocchan-git commented Feb 22, 2024 •

edited

Loading

yocchan-git commented Feb 26, 2024 •

edited

Loading

unikounio left a comment

yocchan-git commented Feb 27, 2024

komagata Mar 7, 2024

yocchan-git commented Mar 8, 2024 •

edited

Loading

komagata commented Mar 9, 2024

yocchan-git commented Mar 11, 2024

komagata Mar 19, 2024

yocchan-git Mar 22, 2024 •

edited

Loading

komagata Mar 24, 2024

yocchan-git Mar 24, 2024

yocchan-git Mar 26, 2024

yocchan-git Mar 26, 2024

komagata left a comment

yocchan-git commented Mar 29, 2024

正方形に切り抜くように修正する #7431

正方形に切り抜くように修正する #7431

Conversation

yocchan-git commented Feb 22, 2024 • edited Loading

Issue

概要

変更確認方法

Screenshot

変更前

変更後

yocchan-git commented Feb 26, 2024 • edited Loading

unikounio left a comment

Choose a reason for hiding this comment

yocchan-git commented Feb 27, 2024

komagata Mar 7, 2024

Choose a reason for hiding this comment

yocchan-git commented Mar 8, 2024 • edited Loading

komagata commented Mar 9, 2024

yocchan-git commented Mar 11, 2024

komagata Mar 19, 2024

Choose a reason for hiding this comment

yocchan-git Mar 22, 2024 • edited Loading

Choose a reason for hiding this comment

komagata Mar 24, 2024

Choose a reason for hiding this comment

yocchan-git Mar 24, 2024

Choose a reason for hiding this comment

yocchan-git Mar 26, 2024

Choose a reason for hiding this comment

yocchan-git Mar 26, 2024

Choose a reason for hiding this comment

komagata left a comment

Choose a reason for hiding this comment

yocchan-git commented Mar 29, 2024

yocchan-git commented Feb 22, 2024 •

edited

Loading

yocchan-git commented Feb 26, 2024 •

edited

Loading

yocchan-git commented Mar 8, 2024 •

edited

Loading

yocchan-git Mar 22, 2024 •

edited

Loading