結婚式で夫婦で写真共有アプリを開発しました

morihirok

4月6日に結婚式をあげました。

私たち夫婦は二人ともソフトウェアエンジニアなんですが、結婚式に向けてせっかくなら何かソフトウェアエンジニア感あることをしたいよね、という話になりました。
そこで、以前に結婚式でLINE Message APIを使用した写真共有サービスを作ったというブログを思い出し、これを参考にして私たちもLINE経由で写真共有ができるアプリを開発することにしました。

要件は上のブログ内容とほぼ同じで、
１．席次表にQRコードを印刷しそれ経由で用意しておいたLINEアカウントと友達になってもらう
２．LINEアカウントに向けて写真を送ってもらう
３．リアルタイムに、送ってもらった写真がランダムにスクリーンに表示される
というものです。

さて、夫婦で共同開発することになったわけですが、ただでさえ忙しい結婚式準備。これ以上揉める案件を増やすわけにはいきません。
ですが、共同開発には揉めそうなポイントがいくつも待ち構えています。

例えば何の言語を使うか。スキルセット的には私はRubyかJavaScript、妻はJavaかGoと全く一致していません。
また、どの単位で作業分担するか？バージョン管理はどうするか？どこにホスティングするか？
一歩間違えれば幸せなはずの結婚式が夫婦仲と共に大炎上プロジェクトになりそうです。

ということで、Amazon S3のイベント通知を使用してアプリをふたつのマイクロサービスに分割することにしました。

Amazon S3はただのストレージサービスではなく、ファイルの作成などのイベントをフックにAWS Lambdaなどのリソースに対して通知を行うことができます。
この動作を利用して、S3にファイルをアップロードするシステムとS3からイベント通知されるシステムをそれぞれ開発していくことにしました。

こうすることで、妻は「LINE Messaging APIを使ってS3に画像をアップロードする」というアプリを作りさえすればよくなります。
言語もホスティングサービスも何を使っても良いし、ふたりでバージョン管理する必要もありません。
（実際に妻はJavaで書いたアプリをHerokuにホスティングしていましたし、私は妻がどんなコードを書いていたかほとんど把握していません。）

あとは私がS3からイベント通知されるアプリを書いていきます。
全体の構成はこんな感じです。

まずはS3から通知を受け取るLambdaを用意し、通知されたファイルを別のS3バケットに保存し直します。このときKey（ファイル名）にuuidを振ってその値をDynamoDBにも保存します。
保存し直したのはできるだけLINE側とシステムを疎結合にしたかったのと、画像のリサイズなどを行うならここでやるべきだろうなと思っていたからです。（実際はLINE Messaging APIで画像の処理をしてくれるようだったので必要ありませんでした）

次にAPIGatewayで画像をランダムに取得するAPIを作ります。DynamoDBからKey一覧を取得し、ランダムにKeyを選びS3からSigned URLを取得しその値をレスポンスボディに詰めて返します。

あとはブラウザを使用して、APIを定期的に実行し取得したURLをSwiperというスライドショーのJavaScriptライブラリに渡します。

これでリアルタイムに写真をランダムで表示するWebアプリの完成です。
これを中座以降、披露宴会場のスクリーンに表示してもらいました。

当日はブラウザを起動してWebアプリにアクセスしておくだけでよく、準備も楽でした。
再入場のときに確認した感じだと問題なく動作していたようで、結果合計で300枚以上の写真がアップロードされていたのでひとまず成功だったと言ってよいのではないでしょうか。

実際に開発中はお互いの進捗を気にすることなく進むことができ、依存部分もS3のファイルアップロードというイベントだけなので、結合時にほぼ問題なく動作させることができました。
おかげさまで大きな喧嘩もなく結婚式当日を迎えられ、すごく楽しい１日を過ごすことができました。

Amazon S3に限らず、クラウドサービスのこういったサービスはイベントの発生を他のリソースに通知できることが多いです。
今回のようにイベントの通知を起点にシステムを開発していくパターンは色々と便利なので、ぜひ試してみてください。

相当雑なコードですが参考までに私が作った箇所のリポジトリを晒しておきます。
上がAPI側、下がブラウザ側です。

追伸

妻が「結婚式の二次会でふたりがLTやったらおもしろくない？」と言っていたので上記の内容を用意したところ、本当に顧客が求めていたのは「LT風の夫婦紹介」だったという事案を起こしてしまった様子が以下です。


この記事が気に入ったらサポートをしてみませんか？