リアルタイムスライドショーアプリを作って、披露宴で使った話
こんにちはyasonです。
コロナ騒動が本格化する前の話ですが、結婚披露宴をしました。
挙式は別日に親族のみで執り行ったので、この披露宴は友人たちのみを招いたフランクな雰囲気を目指していました。
肩肘を張らない良い式ができたと思っています。
式の開始前や中座の際、出席者が暇にならないよう考え、『スマホで撮影した写真をリアルタイムでスライド投影するアプリ』を自作して本番で動かしました。
その内容について書いていきたいと思います。
目次
概説
ここではアプリを作った経緯を書きますので、システムに興味がある人は、次の章から読んでいただければ。
さて、最初にも書きましたが、披露宴をしました。
夫婦で相談し、『出席者が飽きない式にする』をコンセプトに、準備を進めました。
まずは自分たちの出席した結婚披露宴の経験をもとに、出席者が飽きるポイントを抽出しました。
- 新郎新婦の中座
- テーブルラウンド
- 他のグループが新郎新婦と写真撮影+会話しているとき
イベントがなく、またテーブルにいる友人たちとも話すことがなくなってしまうとやることがなくなりますよね。
かと言って、この時間に全員が参加せざるを得ないイベントを入れるというのも、会場の雰囲気がとっちらかってしまうし（何よりネタがない…）どうしたものか。
調べてみると、いいのがありました。↓
一言でまとめると、
参加者が撮った写真を、その場でリアルタイムにスライドに表示させるアプリ
です。
これはいいんじゃないかと料金を調べてみると……なかなかのお値段。
前述の通り挙式は別日に行っていましたので、すでにだいぶ出資しておりお財布も寂しく…
どうしたもんかと更に調べていくと、この記事に行き当たりました。
親友の結婚式二次会のためにAngularJSでリアルタイムスライドショーを開発した話
よし、自作しよう。
システム選定
写真アップロードサーバー
まず考えなければいけないのが、参加者に写真をアップロードしてもらうサーバーです。
これについては、先程のリンク先の方が採用していたDropboxのファイルリクエスト機能を利用しました。
ファイルリクエスト機能とは、Dropboxのユーザーではない人からでもファイルを受け付けることができる機能です。
これで複数人からの写真アップロードに対して安定したサーバーが用意できました。
アプリサーバー
後述しますが、アプリのサーバーはざっと以下のような処理を行ってもらいます。
- アップロードサーバーから写真を取得する。
- 写真情報を生成する。
- 写真をスライドショー投影用に変換する。
これには学習コストを考え、Node.jsでサーバーをたてることにしました。
スライドショー部分
日頃業務でガリガリVue.jsを書いているので、これはVue.jsで実装します。
以上でシステム選定が完了しました。
| 役割 | 採用システム |
|---|---|
| アップロードサーバー | Dropbox(ファイルリクエスト) |
| アプリサーバー | Node.js |
| フロントエンド | Vue.js |
システム構成
アプリの構成は以下の通りです。
席次表にファイルリクエストURLのQRコードを印字しておき、参加者にはそこから写真をDropboxへアップロードしてもらいます。
アプリサーバーは定期的にDropboxのAPIをコールし、新しい写真がアップロードされたらダウンロードします。
しかし、ダウンロードした写真は、そのままではスライドショーに映せません。
なぜかというと、
というような問題があるためです。
そのため、写真ダウンロード後、アプリサーバーでExif情報に基づいて向きを修正し、カクつかない程度に圧縮するという2つの処理をpythonで行っています。
処理済みの写真は静的ファイルとして提供しています。
最後にフロントエンドにて、アプリサーバーから処理済みの写真を取得して画面に表示しています。
動作確認
打ち合わせで会場に行く機会が何度かあったので、そこでスライドショーアプリの動作確認を行うことに。
自前のMacBook Airでサーバー起動させ、それを会場のスライドに投影しようと目論んでいましたが、問題が発生。
なんと会場のHDMIケーブルが長すぎるせいか、MacBook Airを検出できず！
しかし、windowsPCなら映せるよとプランナーさんからお聞きし、さらにPCも貸していただけるとのこと。
そこで、プランナーさんのwindowsPCからMacBook Airで起動したアプリサーバーにアクセスし、なんとかアプリをスライドに表示することができました。
プランナーさん、ありがとうございました。
結果
実際に使ってみた結果ですが…
半分成功、半分失敗という感じでした。
出席者が会場に入り新郎新婦入場を待っているタイミングから、運用を開始しました。
最初は調子よく表示できていたようです。
しかし、入場終わってからしばらくすると異変が。
新しくアップロードした写真は優先的に表示するようにしていたのですが、優先表示されなくなってしまいました。
また、スライドショーはアップロードされた直近10枚をランダムで表示するようにしていたのですが、それもあるタイミングの10枚を延々と表示し続けるという…
サーバー再起動してみたものの結果は変わらず。
20枚程度までは動作確認していたのですが、どうも50枚くらいアップロードされたあたりから不具合がでていたようです。
参加していただいた友人たちからは、入場前であらかたアプリを楽しんだから、不具合出ててもあまり気にしてなかったという話を聞きました。
悔しかったですが、まあ、結果オーライといったところでしょうか。
動作確認はしっかりしておきましょう。
振り返り
リアルタイムスライドショーアプリを自作して結婚披露宴で使ってみたところ、デバッグが足りなかったため不具合がでてしまったが、まあなんとかなった、という話でした。
自作することでコストは大幅に抑えられましたが、完璧を求めるなら既製品を使ったほうがよいですね笑
ただ、自作したことで、夫婦にとって思い出深い披露宴にはなったかなあと思います（妻の態度もこころなしか優しくなりました笑）。
細かい実装の話は別の記事でまとめていきたいと思います。
