投票の仕組みを作ったけどいまいち不発に終わった話
この記事は、Milkcocoa Advent Calendar 2016の2日目の記事です。
前日は shanonim さんのMilkcocoaまとめ2016 #mlkcca です
TL;DR
Milkcocoa Meetup vol12で、投票の仕組みを作りました。リンクは以下。
★投票側(スマホで見よう)
☆共有画面側(見せながら進行しよう)
React.jsとwebpackが良くわかってないときに作ったのでひどいソースですが、
よかったらタイトルなどをちょっと書き換えて年末年始のパーティーなどで使ってください。
https://github.com/m2wasabi/team_vote_milkcocoa
取扱説明書
投票アプリの設置方法
- GitHubのページからソースをクローンします。
-
public/index.html(63行目)とpublic/master/index.html(9行目)のapp_idを自分のapp_idに変更します。 -
以下コマンドでビルドします。
npm i npm run build -
以下のいずれかの方法でウェブサイトをパブリッシュします。
-
public以下をウェブサイトにアップする -
node add.jsを実行する
-
ゲームの進行について
| 状態 | 共有画面 | 投票画面 |
|---|---|---|
| スタート |
 「投票開始する」を押すとゲーム開始です。 |
 |
| 賑やかしタイム |
 ここで各チームが発表やチャレンジを行います。 チャレンジが終わって落ち着いたらカウントダウンを始めましょう。 |
 見た目のカウントで稼いで相手をビビらせましょう |
| 評決カウントダウン |
 5秒後に投票を締め切り、集計処理を開始します |
カウント0のときに選択しているチームに投票します |
| 集計タイム |  |
 |
| 結果発表 |
 次の対戦がある場合は「戻る」 終わりにする場合は「トータル」 |
 |
| 総合成績 |
 得票数と勝敗結果が出ます |
|
| エンディング |
 勝負はついたけど、最後は仲良く対戦相手を称えましょう! |
 |
当日の様子
本番での出来事
プロジェクターの不調(映らない)や、当日の連携不足から、
結局進行に組み込まれることはなかった。
どうすればよかったか
- 大写しできるモニターが一つしかなかったのでイベント用の別モニタを使うようにする
- もっと早くにアプリを仕上げてデザインを良くすべきだった
- 「任せろ！何とかする!」ではなく共同開発者の方とちゃんと連携すべきだった
- 自分のLTできちんと使い方を説明すべきだった
最後に
アプリは使われてナンボなので、今後こういった死蔵アプリを増やさないように頑張っていきたいです。
さて、次回のアドベントカレンダーは…
Milkcocoa Advent Calendar 2016も明日で3日目、
書いてくれるのはウォンバットエバンジェリストことtseigoさんです