ここ最近、豆乳バナナスムージーとコンビニパスタにハマっている id:necojackarc です。

本記事では、fotowa における大量画像のアップロードと加工に関するシステム構成と、そこで活用しているライブラリについて簡単にご紹介します。

背景

fotowa はプロの出張撮影フォトグラファーを簡単予約できるサービスです。代表的な利用シーンとしては、七五三やお宮参り、結婚式や誕生日などがあります。撮影事例はこちらをご覧ください。

サービス開始から1年未満で最大月間撮影件数300件を超えた、成長中のピクスタの新規事業です。

撮影された写真はオンラインで納品され、最低でも75枚の高画質の画像がアップロードされます。

f:id:necojackarc:20170403102153g:plain

多いときでは、20MB 前後の画像が約300枚、およそ6GB もの画像が、1人のフォトグラファーから同時にアップロードされているケースもありました。

また、納品された画像に透かしをつける*1など、加工を行う必要もあります。

そこで、今回は fotowa における、オンライン納品を扱う、大量画像のアップロードと加工に関するシステム構成とライブラリを簡単にご紹介します。

大まかなシステム構成

立ち上げたばかりのサービスであるため、パフォーマンス要件を満たしつつ、可能な限りシンプルになるよう構成しました。

f:id:necojackarc:20170403102149j:plain

アップロード時間を短縮するために S3 に直接ブラウザからファイルを PUT させる構成も考えられますが、アプリケーションサーバを経由したほうが権限管理や画像加工処理がシンプルになるため、現時点では後者の方式を採用しています。

ただし、できるだけブラウザへのレスポンスは早く返したいので、画像加工処理のバックグラウンド化、Pusher を利用したブラウザへの Push 通知などを行っています。

利用したサービス・ライブラリを簡単にご紹介します。

おそらく特徴となるのが、先程から何度か言及している Pusher というサービスになるかと思います。 Pusher はその名の通り、サーバからクライアントへの Push 通知を行ってくれるサービスです。

Pusher 以外でクライアントへの Push 通知はロングポーリングや WebSocket などが利用できますが、少々手間がかかります。そこで Pusher を使うことで、自前でこれらの実装やインフラの構築を行うことなく*2、簡単に Push 通知を実現することができます。

こちらは非常に有名なものしか使用していません。

正しくは、こういった使い勝手の良いライブラリを使用するために、画像のアップロードをアプリケーションサーバ経由にしています。

そのため、画像アップロードや加工処理に関するコードは、非常にシンプルになっています。

fotowa では、画像のアップロードや加工処理をシンプルに扱うために、アプリケーションサーバを経由して S3 に画像をアップロードするようにしています。

また、UX や負荷分散の観点から、CarrierWave Backgrounder と Sidekiq を利用した、画像加工処理のバックグラウンド化、Pusher を使ったブラウザへのメッセージ通知を行っています。

ピクスタでは、新規事業 fotowa を担当してくれるエンジニアも募集してまーす！

ぜひ遊びに来てみてください！

*1:透かしはウォーターマークとも呼ばれます。ウォーターマークの作り方については「RMagick (+ CarrierWave) でウォーターマーク（透かし）付きの画像を作る」にまとめています。

*2:Pusher のトップページにも “Build Apps, Not Infrastructure” と書いてあります！