はじまり
近々結婚式を行うことになり、余興についての情報を調べていたところ、リアルタイムスライドショーが流行っている(?)と知りました。
参列者にスマホなどで写真を送ってもらい、それを会場のスクリーンにリアルタイムで映し出すそうです。
参列者が主体的に参加できるという点では面白そうですが、なかなか良いお値段がします……。
というわけで自分で似たようなものを作ってみることにしました。
事例
パーティー用のリアルタイムスライドショーを作るというのは、結構されているみたいです。
- 結婚式でLINE Message APIを使った写真共有サービスを作った話 - tomoima525's blog
- 親友の結婚式二次会のためにAngularJSでリアルタイムスライドショーを開発した話
私は学生時代にPythonで数値計算したり、今はMATLABで数値計算したりするぐらいで、アプリケーション開発に関してはほとんどわかりません。
HTMLとCSSは大学の研究室のHPを数カ月管理していた程度。
バックエンドまで開発するのは難しいと判断したので、今回はフロントエンドだけ開発することにしました。
先の事例で言うと2番めの形になります。
アプリケーションの構成
アプリケーションの構成は事例2とほとんど同じです。
今のところ次のような流れで行きたいと思います。
- Dropboxのファイルリクエストを使い、参列者のスマホから写真を送ってもらう。
- Dropboxのフォルダをパソコンのローカルのフォルダと同期する。これにより、リアルタイムに写真を取得する。
- フォルダのファイル一覧を元に、JSONファイルを生成する。これはシェルスクリプトで実装する。
- ローカルに保存した写真とJSONファイルを元に、スライドショーを表示する。スライドショーはjQueryで実装する。
jQueryを選んだのは、私がJavaScript初心者なので情報が多い技術を使ったほうがよいだろうとの判断です。
個人的に使う小規模なアプリケーションなので、速度の遅さもそんなに問題ないのではと考えました(使ってみないとわかりませんが……)。
スライドショーの実装にはslickを使ってみたいと思います。
なんとなく使い方がわかったら次回あたりでまとめます。
(追記)目標
- 100人程度のパーティーで使えるようにする。
- スマホ側には特別なアプリをインストールしないようにする。
- 参列者が写真がリアルタイムに反映される様子を実感できるようにする。
- 安定した挙動(式中は流石にデバッグできない……)