クリエイター祭り2021 というイベント内で行われるクリエイター多数決にて使用する多数決システムの、pixi.jsを使用したフィードバック機能以外の開発を行いました。
■主な機能
ユーザー用ページ(画像2枚目)、Youtubeライブ配信で流すための司会者用ページ(画像3枚目)、お題の設定や画面遷移操作をする管理者画面(画像3, 4枚目)を作成しました。
▷ユーザー用画面機能
- フェーズにおいて画面が切り替わる
- お題と選択肢の表示
- 投票機能
- カウントダウン機能
- 投票結果の%表示
- Goodボタン、Badボタンを押すと司会者画面にフィードバックを送信する機能
- Twitterへのシェア機能
▷司会者用画面機能
- ログイン機能
- フェーズにおいて画面が切り替わる
- お題と2つの選択肢の表示
- ジャッジするキャラクターの表示
- カウントダウン機能
- 投票結果の%表示
- QRコードの表示
- 準備中画面のときのみ準備中用画像の表示
▷管理者用画面
- ログイン・ログアウト機能
- 現在のお題の表示
- フェーズ切り替え操作
- お題の追加
- お題一覧表示
- お題削除
- 現在のお題に設定
■ 使用ツール・言語・ライブラリ
- HTML/CSS
- Javascript
- React
- Sass
- PixiJS
- Firebase (Realtime Database, Firebase Hosting, Firebase Authentication)
■ソースコード
https://github.com/taisei1989/createrfes-2021-vote
■ クリエイター祭りTwitterアカウント
https://twitter.com/bakuhatsu2015