学園祭で売上をリアルタイムに公開するサイトを雑に作ると盛り上がる

先日の学園祭で友人のオタク達とやきそばを焼いて原価ギリギリで売ったところ予想以上の盛況でした*1。色々と工夫点はあったのですが、その一つとして売上杯数を Web 上で登録してリアルタイムで雑に public internet に公開するという試みをしてみところちょっと盛り上がったため、その経緯を書いていきたいと思います*2。

つくったもの

会計を登録するシステムとその集計結果を表示する Web サイト（＋付随する簡単な API）を作りました。フロントエンド側のコードは GitHub 上に公開しています*3。

github.comサイトは以下のページから構成されます。フロントエンドはすべて public になっているため、簡易的な認証として API 側で Authorization ヘッダ内のトークンの有無を検証し、不正なトークンが送付された場合は 401 を返す設計としました*4。

トークン登録ページ
https://kyogaku.yokohama.dev/admin/token?token=foo
売上登録ページ
https://kyogaku.yokohama.dev/admin/
「現在の売上」ページ
https://kyogaku.yokohama.dev/realtime/

構成としては、みんな大好き Cloudflare（Pages/Workers/D1）上にすべてを載せることでサーバレスで完結します。エッジ上で動くため読み込みも高速で、当日システムが落ちるなんて心配もない……はずだったのですが。

当日の運用と反響

当日は以下の通りに運用しました。

管理者（私）
- 当日の朝に Workers の環境変数にトークンを設定する
- Discord 上でトークン付きリンク（/admin/token?token=foo）を共有する
販売者（友人）
- お手持ちのスマホから共有されたリンクを踏む。端末にトークンが保持される
- やきそばを売る
- 売上登録ページ（/admin）から売上を登録する
来場者
- 売上確認ページ（/realtime）から売上杯数が確認できる

当日は Twitter 等で宣伝したほか、店頭にディスプレイを設置して杯数が分かるようにしました。10 秒毎に fetch が走ってリアルタイムで売上杯数が更新されていきます。

何時に何円で何杯売れたか、といった情報はダッシュボード*5から確認することができます。クラウドって便利！

得られた知見等

素の HTML を書くとデプロイが 10 秒で終わる

1990 年の Web 1.0 風サイトを志向していたためフレームワーク等を一切採用しなかったところ、デプロイが超高速に終わるという恩恵にあずかることができました。

最近は Next.js に慣れすぎて、ミニマムなアプリケーションであってもデプロイに数分を要することが必然と考えていましたが、素の HTML + CSS + JS を用いるとビルドという工程が不要になり、なんとデプロイが 10 秒以内に終わります*6！感動できる！これが真の DX*7です。

北米が停電すればやきそばが売れなくなる

前日から当日に掛けてまさかの Cloudflare の大規模障害に巻き込まれ*8、危うくやきそばが売れなくなるところでした。幸いにも当日朝の時点で Cloudflare Pages のデプロイは動いていたため、即席の API 鯖を Express で建て、Vercel Serverless Functions + Supabase 上で動かすことで事なきを得ました。

操作はボタン 1 つで完結すると便利

当日はどうせ忙しくなることが予見されたため、なるべく簡便な操作で売上登録が完了するようにしました。150 円のやきそばを 1 杯売った場合は、単に「送信（連打禁止）」のボタンをタップするだけです。杯数を誤って登録した場合は、☑打ち消しにチェックを入れて再度送信することでミスがなかったことになります。

複雑なスプレッドシートやどこまで書いたかがわからなくなる正の字とはこれでおさらばです！

遠くからでも見栄えする画像を生成する

「現在の売上」ページでは Canvas で画像を生成しています（ソースコード）。

今回の場合は、「驚額の殿堂現在の売上」「損益分岐点まで残り杯」といった部分を予めテンプレートとして用意しておき、その上から装飾済みの数字画像を重畳して出力する仕組みです。Web フォントを使用すると結構読み込みが重くなってしまう傾向にあるため、割り切って画像として用意しておくのも手だと思います*9。