フォトグラファーやデザイナーのみなさん、写真の納品にどんなサービスを使っていますか？日本語に対応したものだと、ギガファイル便やfirestorage、Dropbox、Google Drive、Googleフォトがほとんどではないでしょうか。ファイルを送るだけなら無料〜低コストで使えて便利なのですが、どうもかゆいところに手が届かない‥。ということで、自分がほしいアプリを作ることにしました。

有名サービスのココが気になる

広告だらけで見づらい

ギガファイル便やfirestorageは大容量のファイルを簡単に送信できる便利なサービスです。利用料は無料ですが、それと引き換えに広告がずらりと並び、画面が美しくありません。最近ではダウンロード画面にポップアップが表示されるようになり、クライアントが間違って広告のアプリをダウンロードしてしまい、「写真がダウンロードできない」などというクレームが入ることも‥。

ブラウザで写真を見られない

ギガファイル便やfirestorageには基本的にフォルダごと圧縮してアップロードします。ダウンロードが高速にできるというメリットはあるものの、解凍しないと見られないというデメリットも存在します。外出先でメールが届いても気軽に見られないというのは、一部のデザイナーさんにとっては不便ではないでしょうか。

表示が遅い

上記２つの問題はGoogle DriveやDropboxでは解決できます。ブラウザで写真を表示することができ、選択した写真だけをダウンロードすることもできます。しかし、１枚写真を表示するごとに元ファイルを読み込む仕様のため、プロユースの高解像度の写真の場合は、回線状況により１枚表示するのに２秒以上かかることも。次々と写真を見ていこうとするとストレスになります。

また、写真がすべて正方形にトリミングされて表示されるため、写真が縦なのか横なのか表示するまで分かりません。これもセレクトには不便でしょう。Googleフォトではこの問題は解決できますが、アルバムの管理がしにくい印象。

代替サービスはあるか

まずは問題を解決しているようなサービスがあるか徹底リサーチ。クライアントが日本語しか分からない場合もあるので日本語に対応したサービスに絞ったところ、「NOHIN」「Phototree」「Pro Photo.Online」などいくつかのサービスが見つかりました。

シンプルで使いやすそうなのは「NOHIN」。zipをアップロードするだけで使えて、ブラウザから写真を表示することもできます。しかし、ギャラリー画面のデザインが好みではないのが個人的マイナスポイント。

ほしい機能を搭載していたのは「Phototree」。ギャラリーで写真を綺麗に見せることができ、動作も軽量です。ダウンロードボタンがギャラリーの最下部にあり、ダウンロードまでの導線が遠いのはマイナスポイントですが、上記すべての問題を解決しており、導入の第一候補に上がります。

写真のセレクトが非効率問題

それではPhototreeを使えばいいということになるのですが、もうひとつ業務の中で感じていた課題がありました。それは写真のセレクトの効率が悪すぎる問題。おそらく多くの広告代理店やデザインナーさんは、フォトグラファーからもらったコンタクトシートに印をつけたり、ファイル名をメモしたりして、フォトグラファーにセレクトした写真を伝えていることでしょう。

セレクトしたファイルを受け取ったフォトグラファーは、フォルダの中からファイル名が一致する写真を探さないといけません。これはデザイナーとフォトグラファーのどちらにとっても手間のかかる作業です。

アプリ開発の方向性

まず、アプリを作るにあたって、最低限実装したいのは上記の課題を解決するものです。また、できる限り説明などなしに直感的に操作できるUIを目指します。優先順位は、使いやすさ > 見た目の美しさ > 動作の軽さ > コスト。

技術選定

とはいうものの、実はアプリ開発などしたことがないので、イチから学びます。何からやっていいかも分からないので、ChatGPTに相談してアプリ開発のプロセスを教えてもらいながら以下の技術を選定しました。

【フロントエンド】

• HTML / Javascript / CSS：習得済みのため
• React / Next.js：習得中のため

【バックエンド】

• Python（Django）：Pythonは学習経験があったため

【インフラ/その他】

• AWS（EC2、S3、RDS、Route53、CloudFront、Certificate Manager、SES）：いずれも未経験ですが、経験してみたかったため
• Github：ソース管理で利用しているため
• Docker：初利用

上記の技術スタックで開発することにし、まずは１ヶ月間Udemy漬けで基礎から学習。ドキュメントや参考になりそうなブログも読み込んで、簡単な練習アプリを作りながら技術を習得していきます。

開発中に直面した問題

ログイン機能などWebアプリに必要な機能を備えたDjangoとChatGPTのおかげで、未経験ながら撮影の合間に作業を続けて、制作開始から１ヶ月足らずでローカル環境では写真のアップロードからダウンロードまでの一連の動作はするようになりました。しかし、いざAWSにデプロイしたところ問題が発生。

AWSとNginxの設定難しすぎ問題

まずは定番・本番環境で動かない問題。ローカル環境で使っていたSQLiteからMySQLへの切り替え、https接続への切り替え、独自ドメイン接続のためのRoute53やCloudFrontの設定など、１つクリアするごとにまた１つサーバーエラーが発生。３日かけても１ミリも進まないことがあり、ChatGPTもお手上げで、何度も挫折しそうになりました。ただ、原因の多くは単純なところにあって、１つずつステップを見直していくことで解決していきます。

EC2のリソース不足問題

最初にAWSの無料トライアルで使えるtc2.microインスタンスにデプロイしたのですが、写真をアップロード/ダウンロードしようとするとサーバーが落ちる問題が発生。原因はメモリ不足でした。そこでサーバースペックを上げてデプロイし直すことで対応。解決したように思えましたが、アップロードする容量が一定の値を超えるとまたサーバーが落ちてしまいました。原因はメモリを大量に消費するバックエンドの処理でした。

写真の処理が難しすぎ問題

文字やPDFだけなら難しくないのに、写真に関わったとたんにエラー祭りになってしまいます。１枚20MB〜50MBにもなる写真はサーバーのリソースを大量に消費してしまう厄介者。これを解決するのが大変でした。おもにやったことは以下の通り。

• アップロードの非同期処理：Javacsript
• サムネイル作成の非同期処理：Celery/Redis
• ダウンロードの非同期処理：Javacsript
• zip作成の非同期処理：Celery/Redis
• zip作成時に一時ファイルをS3に作成

ユーザーはエンジニアが思っている以上にITに疎い問題

アプリが最低限動くようになったところで、会社のフォトグラファーにも使ってもらいました。通常、Chromeならダウンロードボタンを押すと画面の右上のダウンロードアイコンがくるくる回りだしてダウンロードが始まったことが分かります。けれども、ファイルが１GB近くあるためダウンロードに時間がかかり、それに気づかずに何度もダウンロードボタンを押してしまっていました。などなど、開発側は当たり前だと思っていることでも、ユーザーには分からないことがあるので、１つ１つの操作にアラートやメッセージを表示するなどする必要がありました。

これが完成したアプリ(β)です。

まだまだ開発中ですが、とりあえず動くようになった状態です。仮に「prebeu」と名付けています。

簡単アップロード、簡単管理。

prebeuの1つめの特徴は、プロジェクトごとに「アルバム」で写真を管理できることです。サムネイルの一覧、またはリストでアルバムを管理できます。クライアントに写真を納品する時は、まずアルバムを作成して、そこに写真をアップロードするだけでOK。任意でアルバムの詳細情報を入力したり、請求書やコンタクトシートなどのPDFを添付することもできます。

ゲストユーザーの発行

必要に応じてユーザーアカウントを発行することもできます。これにより、アルバムを不特定多数に見られないように保護することができるほか、後述の「いいね」機能により、誰がどの写真にいいねしたかを管理することができます。

簡単ダウンロード、高度なダウンロードも。

ダウンロード画面はリンクを踏むだけでアクセスできます。フォトグラファーがゲストユーザー機能を有効化している場合は、ログインが必要です。ページを開いてすぐにダウンロードボタンを設置。迷わずにダウンロードできます。

また、写真のギャラリー機能もついているので、外出先でも写真を見ることができます。さらに写真のセレクト機能もついており、選択した写真だけをダウンロードできます。

ユーザーのダッシュボードでは、自分がいいねした写真だけを見たり、それらをまとめたzipをダウンロードすることもできます。

クライアントの「いいね」を高速管理

フォトグラファーの管理画面では、誰がどの写真に「いいね」をしたかを見ることができます。ユーザーごとに「いいね」した写真をzipでダウンロードできるだけでなく、ファイル名の一覧を表示/クリップボードにコピーできる機能も実装しています。LightroomやCaptureOneのフィルタにそのまま貼り付けるだけで、クライアントが選択した写真を表示することができます。これが個人的に一番ほしかった機能。

アカウントのランク

一般公開した場合を想定して、ストレージの容量ごとにユーザーのランク（プラン）を設定しています。仮に以下のようなイメージです。

フリー：1GB
スターター：10GB
スタンダード：100GB

そのほかの機能

• ブランディング：独自ドメインの設定（実装中）や、ロゴの挿入ができます。

今後の予定

すでに社内システムとして稼働させていて、いまのところはエラーもなくクライアントに写真を納品できています。セレクト機能ができたことで効率化が進みました。今後は一般公開に向けてエラーハンドリングの強化やセキュリティの向上、最適化などを行っていく予定です。

また、最終的には写真の納品やセレクトだけでなく、これ１つあればフォトグラファーの業務が完結するような統合アプリを目指します。現在はメールで受けた依頼をNotionで管理し、スプレッドシートで請求関係を管理し、個人のクライアントの場合はSquareやStripeで決済を行っています。これらの分散したツールを１つに統合することで、業務の効率化を行っていきたいです。

また、写真館や出張フォトグラファーにも利用してもらえるようにスマホ対応も必要になるでしょう。その場合、スマホで写真を一括ダウンロードできるようにネイティブアプリを開発する必要も出てくるのですが、フロントエンドがReactベースなのでReact Nativeでの開発になりそうです。

利用や開発に興味のある方がいらっしゃれば、ぜひお問い合わせください！