5
1

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 5 years have passed since last update.

Milkcocoaしくじり先生ー紅白編ー

Last updated at Posted at 2016-12-02

投票の仕組みを作ったけどいまいち不発に終わった話

この記事は、Milkcocoa Advent Calendar 2016の2日目の記事です。

前日は shanonim さんのMilkcocoaまとめ2016 #mlkcca です

TL;DR

Milkcocoa Meetup vol12で、投票の仕組みを作りました。リンクは以下。

★投票側(スマホで見よう)
☆共有画面側(見せながら進行しよう)

React.jsとwebpackが良くわかってないときに作ったのでひどいソースですが、
よかったらタイトルなどをちょっと書き換えて年末年始のパーティーなどで使ってください。
https://github.com/m2wasabi/team_vote_milkcocoa

取扱説明書

投票アプリの設置方法

  1. GitHubのページからソースをクローンします。

  2. public/index.html(63行目)とpublic/master/index.html(9行目)のapp_idを自分のapp_idに変更します。

  3. 以下コマンドでビルドします。

    npm i
    npm run build
    
  4. 以下のいずれかの方法でウェブサイトをパブリッシュします。

    • public 以下をウェブサイトにアップする
    • node add.js を実行する

ゲームの進行について

状態 共有画面 投票画面
スタート 001.jpg「投票開始する」を押すとゲーム開始です。 002.jpg
賑やかしタイム 003.jpg
ここで各チームが発表やチャレンジを行います。
チャレンジが終わって落ち着いたらカウントダウンを始めましょう。
004.jpg
見た目のカウントで稼いで相手をビビらせましょう
評決カウントダウン 006.jpg
5秒後に投票を締め切り、集計処理を開始します
004.jpg
カウント0のときに選択しているチームに投票します
集計タイム 007.jpg 008.jpg
結果発表 009.jpg
次の対戦がある場合は「戻る」
終わりにする場合は「トータル」
010.jpg
総合成績 011.jpg
得票数と勝敗結果が出ます
エンディング 012.jpg
勝負はついたけど、最後は仲良く対戦相手を称えましょう!
013.jpg

当日の様子

本番での出来事

プロジェクターの不調(映らない)や、当日の連携不足から、
結局進行に組み込まれることはなかった。

どうすればよかったか

  • 大写しできるモニターが一つしかなかったのでイベント用の別モニタを使うようにする
  • もっと早くにアプリを仕上げてデザインを良くすべきだった
  • 「任せろ!何とかする!」ではなく共同開発者の方とちゃんと連携すべきだった
  • 自分のLTできちんと使い方を説明すべきだった

最後に

アプリは使われてナンボなので、今後こういった死蔵アプリを増やさないように頑張っていきたいです。

さて、次回のアドベントカレンダーは…

Milkcocoa Advent Calendar 2016も明日で3日目、
書いてくれるのはウォンバットエバンジェリストことtseigoさんです

5
1
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
5
1

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?