はじめに
hmznと申します。名古屋でたまにVJをやっています。先日、クラブイベントの参加者がスマートフォンからVJ映像にスタンプを送れるシステムを作成しました。
こんな感じの
きっかけ
何か新しいことやりたいなと思って調べものをしていたら下記のページを見つけたのが開発のきっかけです。
記事内ではVJPCのToudchDesinger上で映像を生成しているようですがPC負荷を増やしたくないのでシステムはクラウドもしくは外部のサーバーに置く構成とします。
またこんなのやりたいんだよね～と身内で話していたところCloudflareオタクから「それCloudflareで実装すれば無料枠で収まるよ」と言われたのでCloudflareを利用する方針になりました。
なおhmzn本人はNWインフラ屋でWebの開発経験はほぼゼロなのでほとんどのコードはGemini CLIに書かせました。そこそこ使えるコードは吐き出してくれますがwranglerのコマンドは古かったり構文が間違っていたりと詰めが甘いのである程度自分で調べる必要があります。
システム構成
全体的にtypescriptおよびVue jsを利用しています。
大まかな構成図は下記の通りです。
フロントエンドは
画面構成
ユーザー画面
ページを開き名前、セッションIDが入力されるとスタンプ一覧ページが表示されます。スタンプはカテゴリごとにタブに分かれています。現状は、所属イベントのロゴやイラストや、汎用的に使えるBPM、ジャンルなどを登録しています。
スタンプをタップするとWebsocketでバックエンドにスタンプIDなどの情報が送られます。
また、メニューからイベント情報ページに切り替えると接続中のセッションIDに対応したイベント情報が表示されます。（イベント当日は間に合わずハードコーディングしていましたが後日実装しました。）
またWPAとしてインストールで起用にすることでブラウザの余計なUIを表示させないようにしています。
管理画面
管理画面ではスタンプ・カテゴリの登録、イベント情報の作成が行えるようにしています。スタンプは、個別/カテゴリ単位で非表示にできるようにしています。スタンプ登録は専用ページから一括登録できるようにしています。
また、管理画面なのでCloudflare Accessを利用してユーザー認証を行います。Cloudflare Access、URLを指定するだけで簡単にユーザー認証を実装できるので便利。
表示用画面
websocketでバックエンドと通信します。URLに付加したセッションIDに一致するスタンプ情報を受け取った場合に画面上にユーザー名とともに表示します。
また、現場によりスクリーンのサイズが変わるので画面の左右をクリックすることで表示サイズを調整できるようにしています。
スタンプの色が多いためGBやBBではなく黒背景にしてOBSで下記のカスタムCSSを適用することで透過処理をしています。
body, .display-screen {
background-color: transparent !important;
}
実際に使ってみて
会場ではこんな感じの表示を出していました。
イベントの特性にもよるかと思いますがそこそこ盛り上がったし好評だったので良かったなと思います。
さいごに
まだ開発中なのでいろいろ機能を追加していく予定です。いずれ自分以外の人にも使ってもらえるような状態にできたらなとは思っていますがまだまだ先になりそう。
あと現状だと何を思ったかスタンプ情報をKVに格納しているのでD1への移行を予定しています。