【個人開発】リアルタイムな写真アルバムを作った話

はじめに

先日、友達が結婚されました。
私が、2次会の幹事に任命されたため何かやりたいなと思いました。私は写真を撮ることが好きなので写真関係が良いなと思い、リアルタイムな写真アルバムを作ることにしました。

作ったもの

Real-time photo album

• ユーザーがLineBotに写真を送信すると、ポップアップする形で表示されます。最大8枚の写真が一度に表示できます。8枚表示された状態で新しい写真が送信した場合は待機され、8枚未満となったら先入れ先出しで表示されます。（キューの動き）

• 送信された写真がアルバム形式でランダムに表示されます。写真はフリップするごとに更新されます。

↓デモ動画。右端の画面はLineBotのチャット画面です。動画の14秒くらいで写真を送信しています。
この写真たちはデモ用でAIで生成したものや自分で撮影したものです。

• 管理用の画面として、アルバムに表示するか非表示にするかの機能も作りました。
  不適切な写真や重複の写真を非表示にするのに役立ちます。

↓グレーアウトしてるのが、非表示状態です。（私だけしか見ないので雑になってしまいました）

用意したもの

LineBotアカウントのQRコードを参加人数文用意して、受付で配布しました。

（このQRコードはダミー）

ソフト：Adobe Photoshop
印刷：メガプリントさんの 55*55 mmのスクエアカードにしました。紙はヌーボー180kgで両面モノクロ100枚で1,140円。

構成

ちょうどAWSを勉強していたこともあり、サーバーレス構成にしました。
初心者なので構成図の矢印の向きがおかしいかもしれませんがご容赦ください。

バックエンド

LambdaのPython3.9を採用。LineBotからのwebhookを受けるLambdaに全ての処理を書くと画像処理が遅かったので、複数のLambdaに切り出し、非同期で呼び出し形式にしてみました。

フロントエンド

OSに依存しないブラウザアプリケーションにしました。React＋GSAPを採用。GSAPは初めてでしたが扱いやすかったです。
CloudFrontでS3に置いた静的ファイルを配信する形式にしました。参列者はこのアプリを使用しないので、Cognitoの認証は不要でしたが勉強を兼ねて使用してみました。

大変だったこと

本のアニメーションってどうやればいいの？

こちらなどを参考にしながら試行錯誤しました。

S3の静的ホスティングの認証はどうすればいいの？

このUdemyが参考になりました。(LambdaなどやRoute53も）

デザリングのネットワークが遅すぎる！！！

会場にwifiはなさそうだったので、スマホのデザリングでネットワーク環境を用意しようと思ってました。
前日にいざテストをすると、私が格安Simを使っていたこともあり遅延が発生しまくりに・・・
仕方ないので、povoのeSimを契約して事なきを得ました。（もっと早くテストしとけばよかった）

その他もろもろありますが、わからないところは流行りのChatGPT先生に聞くことが多かったです。

結果

投稿していただいた写真は110枚。40人程度の規模だったのでまずまず。自分の経験にもなり、楽しんでくれたようだったのでやってよかったと思います。

改善点

• 同じページに同じ写真が表示されてしまう問題がありました。写真が増えてくれば発生確率は下がるのですが・・・時間がなかったので妥協しました。

• 会場の関係でスクリーンが80インチ程度となり写真が小さく見えた。もう少し大きくするべきだったと思います。

• 投稿してくれた中から新郎新婦がベストショットを選び、選ばれた方にはちょっとした景品を贈るとかにすれば、もう少し投稿していただけたかな。

• 投稿された写真を使用して最後に音楽に合うようなエンドロールを作れればよかった。（ただ新郎新婦に関係ない写真もあったのでそれを除外する必要がある）

まとめ

2カ月前に思い立ち、なんとか形にすることができました。私は仕事でちょっとしたアプリを作成することはありますが、バックエンドも含めたアプリ作成は初めてだったのでいい経験になりました。
せっかく作ったので、他でも使えればいいなと思います。