https://rosca.connpass.com/event/299737/

1. Rails でのいまどきの画像
ファイルの取り扱い
SHE株式会社
錦織滉司（ @cotton_ori ）

2. self.inspect
Koji Nishikiori
wataori
@cotton_ori
SHE 株式会社 開発ユニット テックリード
働き始めて半年くらい
Rails 歴 9年くらい

3. 3
© SHE inc. All Rights Reserved.
MILLENNIAL
LIFE - COACHING COMPANY
SHEについて
社会の不均衡を解決する為、創業したインパクトスタートアップ
会社名 ：SHE株式会社
代表者 ：代表取締役社長 福田 恵里
設立 ：2017年4月11日
資本金 ：1億円
所在地 ：〒107-0062 東京都港区南青山3丁目7-21
2017年4月創業
キャリアスクール
SHE Aoyama オープン
2019年7月
オンラインへ
サービスリニューアル
2020年2月
2拠点目SHE Ginza
オープン
2020年6月
全国展開の第一弾となる
SHE Nagoyaオープン
企業沿革
2021年11月
全国展開の第二弾となる
SHE Umedaオープン
参画投資家
その他複数
基礎情報

4. 4
© SHE inc. All Rights Reserved.
MILLENNIAL
LIFE - COACHING COMPANY
Main Service
現在のSHEのメインサービス
学ぶ 働く 仲間
豊富なコースが
学び放題
仕事斡旋サポート
絶対に挫折しない
仕組み
WebデザインやWebマーケティングなど、
PC一台でどこででも働けるスキルを学べる
女性限定のキャリアスクール
7万人
累計会員数 突破！
女性限定のキャリアスクール

5. 5
© SHE inc. All Rights Reserved.
MILLENNIAL
LIFE - COACHING COMPANY
提供サービス
SHElikesは「学ぶ」と「働く」が循環するキャリアプラットフォームへ
働きながら更に学ぶ
人生
観
view
of life
スキ
ル
Skill
価値
観
values
性格
perso
nality
デモ
グラ
demo
graphi
cs
実績
Works
学んだ
スキルを活かし働く
人生レベルの本質的な
キャリア開発
インサイトを捉えた最適な
働き方提案
“働く”領域
“学ぶ”領域
“学ぶ”と“働く”が循環するキャリアプラットフォーム
SHE Value
Database

6. ● Ruby on Rails
● MySQL
● GraphQL
● Next.js
● Webpack
● Kubernetes
● Spinnaker
● AWS
● GitHub Actions
● Datadog
技術スタック・利用サービスざっくり紹介

7. 画像アップロード機能

8. むかしむかし...
https://github.com/kreeti/kt-paperclip
https://github.com/carrierwaveuploader/carrierwave

9. Rails 5.1（ ActiveStorage ）以降
https://edgeguides.rubyonrails.org/active_storage_overview.html

10. リサイズ

11. Rails 5.1以前
https://github.com/kreeti/kt-paperclip
https://github.com/carrierwaveuploader/carrierwave

12. Rails 5.1以降
https://edgeguides.rubyonrails.org/active_storage_overview.html

13. リサイズ
RMagick / MiniMagick

14. リサイズ
RMagick / MiniMagick
ImageMagick / Vips

15. ● 依存ソフトウェアのバージョン依存問題
○ 古いバージョン imagemagick@6 を入れないとうごかない...
● 画像処理はサーバリソース使う
○ 小さいサーバーだと落ちる
○ MiniMagick / Vips を使うと省エネとはいえ
● Model に各サイズの Variant を定義する
○ 画像サイズを決めたいのってほぼ View の都合
○ フロント強いけど Rails あんまり得意じゃない... みたいなメンバーがいる場合に
ハードルが高い
アプリケーション内でリサイズするつらみ

16. 一応こんなこともできる

17. 一応こんなこともできる
🆚

18. 一方最近の CDN
https://imgix.com/solutions/resizing-and-cropping

19. たどりついた答え

20. ● Rails サーバーは ActiveStorage を使ってクラウドストレージにアップロードする
（前にいた開発チームで）たどりついた答え
● クライアントは Rails サーバーへユーザー情報の GET リクエストする
● Rails サーバーは CDN の URL を返却する
● クライアントは受け取った CDN の URL に任意のサイズでクエリパラメータを付与して CDN に
リクエストする
● CDN はリサイズした画像を返却する
● エンドユーザーの画面に画像を表示する

21. ● サイズを変更したいときにクライアント側の変更だけで済む
● リサイズにかかるコンピューティングリソースを気にする必要がなくなる
● 依存ライブラリから少し開放される
CDN にリサイズさせる良さ

22. 他社の事例も知りたいです！

23. コメント確認して