こんにちは、ツクリンク開発部のてつです。
今回は、ツクリンクでの画像処理についてご紹介します。
私はツクリンクの前にスタートアップ向けのWebアプリ受託の仕事についていましたが、その立場からユーザーが増えると見過ごせないチリツモ要素について、ツクリンクで新しく勉強になったな〜という点を書いていきたいと思います。
概要
この記事では、ツクリンクでの画像の取り扱い方、画像アップロードの処理の流れ、そして画像軽量化についての取り組みについてお話します。
現在直面している課題と、それに対して考えている解決策についても触れます。
ツクリンクでの画像の使い方
ツクリンクでは建設事業者間の取引先を広げるためのマッチングサービスを提供しています。
色々な機能がありますが、画像が絡む主な機能として以下があります。
- 建設業者一覧表示: 職人・建設業者を検索し一覧表示する
- 案件一覧: 条件にあう案件を検索し一覧表示する
- メッセージ: マッチングした建設業者・職人同士でのメッセージのやりとり
そして、これらの画像は、ユーザーが自由にアップロードできるようになっています。そのため、高画質な画像や高解像度の画像がアップロードされることも多く、画像のサイズが大きくなることがよくあります。
画像を取り扱う上での課題
画像を取り扱う上で以下の点が課題となりました。
- 高画質な画像のアップロード: ユーザーはスマートフォンや高解像度のカメラで撮影した画像をそのままアップロードすることがあります。
- 複数画像の一覧表示: 重い画像を複数表示することで、表示速度が遅くなることがあります。
- ユーザー操作への影響: 大きな画像を扱うことで、ブラウザがクラッシュするなどの問題が発生することがあります。
- 実際に発生した弊害として、iOSでは重い画像を含むページを表示しようとするとブラウザがクラッシュしてしまう、という事象が起こったことがあります。
メモリが潤沢な端末が充実している今の時代でもこのような事象が発生することは意外でした。
画像を扱う上で満たすべきこと
上記の課題を踏まえて、画像アップロードをする際には
- 高画質な画像をアップロードされても良い設計
- 複数の画像を一覧表示しても問題のない処理
- ユーザーの操作を妨げないUI
が求められます。それを実現する流れを後述します。
画像アップロードの処理の流れ
課題画像のアップロードは、以下の流れで行われます。
- ユーザーが画像を選択した時点で、一時的な事前署名付きURLをサーバーから取得
- 取得した署名付きURLでS3のtmpディレクトリに画像をアップロード
- フォームを送信
- tmpディレクトリの画像URLが記録されたImageレコードが作成される
- 軽量化処理は非同期のActiveJobで開始される
※ 軽量化処理が終わるまではtmpディレクトリの画像をユーザーに見せる - 軽量化が完了すると、ImageレコードのURL情報は軽量化された画像のURLに更新される
※ これ以降は軽量化処理済みの画像をユーザーに見せる
画像軽量化の取り組み
現在、以下のような軽量化処理を実施しています。
- 画像の縮小
- メタデータの削除
- WebPフォーマットへの変換
これにより、画像のサイズを大幅に削減し、表示速度を向上させることができました。
直面している課題と検討中の解決策
現状では、以下のような課題に直面しています。
- 同時に多数のユーザーが画像をアップロードすると、処理が重くなる
- ImageMagickで扱える画像サイズに制限がある
これに対して考えている解決策としては、フロントエンドでの軽量化処理の実装や、画像処理プロセスの外部への切り出しなどが挙げられますが、コスト等鑑みて検討中です。
まとめ
以上が、ツクリンクで実践している画像処理の概要です。データ一つひとつは小さな負荷ですが、ユーザーが増加すると、その改善はプロダクト全体のパフォーマンス向上にも繋がります。今後もより良いサービスを提供できるよう、継続的な改善を行っていきたいと考えています。
Discussion