ミスコン2019のWeb投票ページを公開しました

去年もやったのですけど、今年も作りました。

Web投票ページ

投票ページはこちらです。

各候補者の名前や写真の下にある「投票する」と書かれたオレンジ色のボタンを押すと投票できます。

票数はリアルタイム(正確には3秒毎に)で更新されるので、誰かがどこかで投票したら勝手に数字が増えていきます。

投票ボタンを連打するとその分だけ票数は増えます。

候補者の下のところにはインタビューへのリンク等も載せておきました。

常任とは無関係

ミスコンを運営している常任とは一切関係がありません。勝手にやってるだけです。
なので実際の審査にこの投票は何も影響を与えません。

昨年の様子

Web投票は昨年から始めました。

こんな風にどっかの誰かが投票してると勝手に数字が増えていきます pic.twitter.com/DaLiX6EEYT

— 渡辺和希 (@watatanabe) October 10, 2018

投票期間が10日間しかなかったにも関わらず、8万票近くの投票をいただきました。

小森すみれさん

ネタ枠として勝手にすみれさんを入れておいたら、票数の過半数である45,572票を獲得して一位になりました。

すみれさんを含まない投票数は34,326票。

【プリコン2018 Web投票結果】
プリコンのWeb投票結果が出ました！以下の通りです！
優勝景品とかはありません！
合計34326票の投票ありがとうございました！ pic.twitter.com/LvWuSGDFUf

— 渡辺和希 (@watatanabe) October 20, 2018

すみれさんを含むと79,898票。

【プリコン2018 Web投票結果】
プリコンのWeb投票結果が出ました！以下の通りです！
優勝景品とかはありません！
合計79898票の投票ありがとうございました！ pic.twitter.com/l8Q4AwqUcD

— 渡辺和希 (@watatanabe) October 20, 2018

実施意図

昨年の渡辺が説明してたのでツイートを載せておきます。

プリコン、公式でWeb投票やった方が良いと思うんですよね…。
現状投票できるのは当日その時間にその場所にいた人だけ。
ステージ見た上で判断しようねというのも分かるけど、対象少なくないですか。

— 渡辺和希 (@watatanabe) October 10, 2018

せっかくのイベントなのに人が集められてない気がする。
たくさんの人が関われるようにしたらもっと関心が向くのでは。
他にも色々出し物がある中で、その時間に数時間拘束されるほどプリコンに関心持ってる人が何人いるのか。

— 渡辺和希 (@watatanabe) October 10, 2018

渡辺、一昨年は丁度通りがかった時に投票タイムだったので投票したけど去年はステージでなんかやってるのをチラッと見て終わってしまった

— 渡辺和希 (@watatanabe) October 10, 2018

Web投票可能にして、候補者が投票をさせるためにWeb投票する層にTwitterでアピってるの見たい…
プリコンの盛り上がりとか以外に、単純に美男美女が各々のやり方で有権者に媚びてるのが見たい…

— 渡辺和希 (@watatanabe) October 10, 2018

とのことです。

技術解説

別に興味ないと思いますが、投票ページの実装にあたっての技術解説します。

ベース

「ボタンを押したら数字が増える」「それがリアルタイムで見てる人全員に共有される」という仕様のサイトとして「にゃんぱすーボタン」というのがあります。

メインがJava Scriptでの実装なので、そのままパクれるのですよね。

丸パクリではなくだいぶ簡略化してはいますが、仕組みとしてはこれを参考にしています。

昨年からの仕様変更

昨年はこんな感じの実装をしていました。

知ってる方は知ってると思うのですが、Webページに表示されてる内容というのは(自分が見てる画面だけであれば)自由に書き換えることができます。
デベロッパーツールであったり、ブックマークレットであったり…。

なので、例えば書き換えでとてつもなく大きな数字にされた場合、③④あたりの工程でその数字が投票されてしまうのですよね。
また、数字以外のものに書き換えられた場合、1増やすのが上手くできなくなって動かなくなります。

自分でやっといてアレなんですけど、数値が減る事はないという前提でサーバーに保存してる数字と表示してる数字の大きい方に合わせる仕様にしたせいで、修正しようにも誰かがページ開いてる限り大きい方の数字に引っ張られてしまいます…
どうやって直そう…
全員ページ閉じてくれ…

— 渡辺和希 (@watatanabe) October 10, 2018

正規の数字に戻そうにも、誰かがページを開いている限りそれに引っ張られて修正ができないという…。
かなり致命的な不具合なので以下のように修正しました。

表示の数字によってサーバーの数字書き換えるのやめたので多分大丈夫なはず…！
ただボタン押すタイミング(押してからサーバーに送られるまでと数値更新のタイミングが重なった時の数ミリ秒)によっては数字が反映されず書き戻されるようになりました。 https://t.co/iAJQC19gBZ

— 渡辺和希 (@watatanabe) October 10, 2018

当初の実装ではボタンが押された直後に表示上の数字を増やしていたものの、修正後は表示上の数字を変更するのがだいぶ後になったのでボタンを押してから更新までにタイムラグが生まれてしまいました。

とはいえ表示上の話だけで、押した回数自体は反映されてるのでいっかと。

今年の仕様

一から考えるのは面倒なので基本的には全部流用しています。

大きな変更は1増やすのをサーバー側でやることにしたことです。

今思えば「なんで最初からそうしなかった？」と思うのですが、数字は必ず1ずつしか増えないのでユーザー側で数字を計算してサーバーに伝える必要はなかったのですよね。
押されたことさえ伝われば後はサーバー側でどうにかすれば良いだけです。

例によってタイムラグはだいぶあるのですが、まあ大した問題ではないでしょう。

おわりに

公開から20時間ぐらい経った現時点で、既に6,200票ぐらいが投票されています。

中には1人で3,000回ぐらいボタンを押し続けてる人もいます。さすがに人じゃなくて連打botに任せてると思いますが。

そんなに押してるのに票数が6,200ってことはもしかしたらちゃんと全部を拾いきれてないのかも…？

全部で何票入るのか楽しみですね。