本記事は個人開発 Advent Calendar 2019 22日目の記事結婚式の受付システムを作って参列者経験を向上させたのリンク記事です。

つくろうとしたもの

またまたN番煎じの結婚式での写真共有アプリです。
独自機能として二次会での上映用にアップロードされた写真をスライドショーで流す機能をつけようと思いました！（ダイレクトアクセスのみの隠し機能)

上の絵はzoomのホワイトボード機能を使って新郎新婦とWeb通話をしながら描きました。今後の要件定義や顧客との打ち合わせはこんな感じにすると結構楽かもと思ったり・・・。

作ったもの

案内カード

アプリを使うための認証コードと使い方を記載したカードを作成しました。式場にフリーWi-FiがあったのでそのSSIDも記載。

写真共有アプリ

システム仕様

Webアプリ
機能
- 認証コードを使ったログイン
- 写真一覧→タップでちょい大きめの写真
- 写真を一度に最大１０枚までアップロード
- 管理者用認証コードでログインした時のみオリジナル画質をダウンロードできる（新郎新婦&親族用）
- アップロードされた画像をスライドショー上映

言語・フレームワーク

HTML, CSS, JavaScript
Vue.js

ライブラリ

buefy : CSSライブラリ「Bluma」のVue.js用ラッパー

インフラ

Firebase Hosting: ホスティングサービス
Cloud Firestore: DB
Cloud Storage: 写真保存用
Firebase Authentication: ユーザー認証基盤
Google analytics：ロギング

構成&フロー

画面構成


ログイン画面	Firebase Authenticationを使って認証コードログインを実装しました。具体的な方法についてはこちら
ホーム画面	写真一覧が表示されます。
詳細画面	写真一覧でサムネをタップするとモーダルが表示されます。

アップロード画面	アップロードエリアをタップするとスマホのフォトライブラリが開いて写真を選択できます。
スライドショー画面	アップロードされた写真からランダムで15秒間隔でスライドショーが表示されます。Firestoreのリアルタイムリスナーを使うことでスライドショー中に追加される写真も表示対象になります。Fullscreen APIを使うことでフルスクリーンでモニタに投影できるようにしました。