読者です 読者をやめる 読者になる 読者になる

てくすた

ピクスタ株式会社のエンジニア・デザイナーがつづるよもやまテクニカルブログです

fotowa における大量画像のアップロードと加工に関するシステム構成とライブラリ

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

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

背景

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

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

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

f:id:necojackarc:20170403102153g:plain

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

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

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

大まかなシステム構成

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

f:id:necojackarc:20170403102149j:plain

大まかな流れ

  1. アプリケーションサーバがユーザから受け取った画像を S3 に配置し、画像加工を行うジョブを作成する
  2. バッチサーバが画像加工を行うジョブをバックグラウンドで実行し、その結果を Pusher に通知する
  3. ブラウザが Pusher からメッセージを受け取り、結果を画面に表示する

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

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

利用したサービス・ライブラリ

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

サービス

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

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

ライブラリ

  • CarrierWave
    • 画像アップロード処理と加工処理を行う
  • CarrierWave Backgrounder
    • CarrierWave のバックグラウンド化を行う
  • Sidekiq
    • CarrierWave Backgrounder のバックエンドとして利用

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

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

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

まとめ

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

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

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

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

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

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

デザイナーが人生で初めて登壇した話

皆さん、こんにちは。 PIXTAの悩めるデザイナー、たかせです。 Nintendo Switchおもしろそうですね。 買うべきか、今は待つべきか。。。

先日「みんなのウェディング」さんのデザイナーの方々と合同で勉強会を開催しました。 この勉強会では、「インハウスデザイナーの面白さ&タイヘンなこと」をテーマに、PIXTAとみんなのウェディングのデザイナーの方々が発表しました。

そこで、人生で初めて発表する機会をいただいたので紹介します!

準備

発表内容

自分は以前、受託制作の業務をしていましたが、2016年9月からPIXTAのインハウスデザイナーになりました。 そのとき、受託制作とインハウスデザイナーの作業内容の違いに困惑することがたくさんありました。 そこで発表では、困惑したことについての対処方法を紹介しようと考えました。 今後インハウスデザイナーになりたい人や、中途入社のデザイナーの教育、フォローアップに役立てていただけると思っています。 f:id:kazunori-takase:20170329105638j:plain

前日

資料作成と発表練習

発表資料はそこまで苦労せずにまとめることができました。 しかし、同僚に発表をきいてもらったとき、思っているようにはできませんでした。 その原因は、自分の考えを話すことが少なく言葉が出てこなかったことと、資料がまとめきれていなく不十分だったことだと感じました。

精神と時の部屋(ただの会議室)を1時間ほど借りて、大慌てで資料の修正やカンペの作成、時間を計測した練習をしました。

当日

業務時間中

今回の会場はPIXTAのカフェスペースで、完全にホームゲームでした。 しかし、もともと緊張するタイプで、発表は19時半からでしたが、昼過ぎから緊張していました。 緊張して発表内容が頭に入りそうにないので、午後に予定されていた会議を週明けにずらしてもらいました。

発表中!

会議をずらしてもらったおかげで発表内容をしっかり記憶できたため、言葉に詰まることなく、時間も予定通りに発表できました! さらに、イベントに参加してくれた方々を意識して、目を見て話すこともできました。 しかし、スクリーンで資料を表示していて部屋が暗かったため、カンペは役に立ちませんでした。 f:id:kazunori-takase:20170329105920p:plain

懇親会中

発表やパネルディスカッションが終わったあと、お酒やピザなどの軽食もある懇親会を開催しました。 今回はデザイナーのあるある苦労話をしたので、懇親会も非常に盛り上がりました! イベントに参加してくれた方々も「自分も同じような苦労をしていて・・・」と話ができ、すんなりと打ち解けられて良かったです。

感想

資料については、実例を加えることができず、デザイナー以外の方々にはわかりにくい内容だったかもしれません。 発表については、もう少しUIデザインの成功談、失敗談など、具体的な話をすればよかったと思いました。 そして、聞いていただいてる方々の反応を見て、笑い話にしたり、真面目に話したりと、内容を変えていけたらいいな、とも思いました。 f:id:kazunori-takase:20170329105654j:plain

次回の発表について

今回はデザイナーのあるある話をしましたが、次回はUIについて少し掘り下げた話をしたいです。 また、自分が学生時代、絵画を学んできたので「有名絵画から見るUIデザイン」でも語ってみたいです。