去年もやったのですけど、今年も作りました。
Web投票ページ
投票ページはこちらです。
各候補者の名前や写真の下にある「投票する」と書かれたオレンジ色のボタンを押すと投票できます。
票数はリアルタイム(正確には3秒毎に)で更新されるので、誰かがどこかで投票したら勝手に数字が増えていきます。
投票ボタンを連打するとその分だけ票数は増えます。
候補者の下のところにはインタビューへのリンク等も載せておきました。
常任とは無関係
ミスコンを運営している常任とは一切関係がありません。勝手にやってるだけです。
なので実際の審査にこの投票は何も影響を与えません。
昨年の様子
Web投票は昨年から始めました。
こんな風にどっかの誰かが投票してると勝手に数字が増えていきます pic.twitter.com/DaLiX6EEYT
— 渡辺和希 (@watatanabe) October 10, 2018
投票期間が10日間しかなかったにも関わらず、8万票近くの投票をいただきました。
小森すみれさん
ネタ枠として勝手にすみれさんを入れておいたら、票数の過半数である45,572票を獲得して一位になりました。
すみれさんを含まない投票数は34,326票。
【プリコン2018 Web投票結果】
— 渡辺和希 (@watatanabe) October 20, 2018
プリコンのWeb投票結果が出ました!以下の通りです!
優勝景品とかはありません!
合計34326票の投票ありがとうございました! pic.twitter.com/LvWuSGDFUf
すみれさんを含むと79,898票。
【プリコン2018 Web投票結果】
— 渡辺和希 (@watatanabe) October 20, 2018
プリコンのWeb投票結果が出ました!以下の通りです!
優勝景品とかはありません!
合計79898票の投票ありがとうございました! pic.twitter.com/l8Q4AwqUcD
実施意図
昨年の渡辺が説明してたのでツイートを載せておきます。
プリコン、公式でWeb投票やった方が良いと思うんですよね…。
— 渡辺和希 (@watatanabe) October 10, 2018
現状投票できるのは当日その時間にその場所にいた人だけ。
ステージ見た上で判断しようねというのも分かるけど、対象少なくないですか。
せっかくのイベントなのに人が集められてない気がする。
— 渡辺和希 (@watatanabe) October 10, 2018
たくさんの人が関われるようにしたらもっと関心が向くのでは。
他にも色々出し物がある中で、その時間に数時間拘束されるほどプリコンに関心持ってる人が何人いるのか。
渡辺、一昨年は丁度通りがかった時に投票タイムだったので投票したけど去年はステージでなんかやってるのをチラッと見て終わってしまった
— 渡辺和希 (@watatanabe) October 10, 2018
Web投票可能にして、候補者が投票をさせるためにWeb投票する層にTwitterでアピってるの見たい…
— 渡辺和希 (@watatanabe) October 10, 2018
プリコンの盛り上がりとか以外に、単純に美男美女が各々のやり方で有権者に媚びてるのが見たい…
とのことです。
技術解説
別に興味ないと思いますが、投票ページの実装にあたっての技術解説します。
ベース
「ボタンを押したら数字が増える」「それがリアルタイムで見てる人全員に共有される」という仕様のサイトとして「にゃんぱすーボタン」というのがあります。
メインがJava Scriptでの実装なので、そのままパクれるのですよね。
丸パクリではなくだいぶ簡略化してはいますが、仕組みとしてはこれを参考にしています。
昨年からの仕様変更
昨年はこんな感じの実装をしていました。
①ボタンが押される
②表示上の数字を1増やす
③表示されてる数字とサーバーの数字を比べる
④大きい数字の方に合わせてもう片方を書き換える
知ってる方は知ってると思うのですが、Webページに表示されてる内容というのは(自分が見てる画面だけであれば)自由に書き換えることができます。
デベロッパーツールであったり、ブックマークレットであったり…。
なので、例えば書き換えでとてつもなく大きな数字にされた場合、③④あたりの工程でその数字が投票されてしまうのですよね。
また、数字以外のものに書き換えられた場合、1増やすのが上手くできなくなって動かなくなります。
自分でやっといてアレなんですけど、数値が減る事はないという前提でサーバーに保存してる数字と表示してる数字の大きい方に合わせる仕様にしたせいで、修正しようにも誰かがページ開いてる限り大きい方の数字に引っ張られてしまいます…
— 渡辺和希 (@watatanabe) October 10, 2018
どうやって直そう…
全員ページ閉じてくれ…
正規の数字に戻そうにも、誰かがページを開いている限りそれに引っ張られて修正ができないという…。
かなり致命的な不具合なので以下のように修正しました。
①ボタンが押される
②サーバーに保存されてる数字を取得する
③その数字に1を足す
④1足した数字をサーバーに保存する
⑤1足した数字を表示する
表示の数字によってサーバーの数字書き換えるのやめたので多分大丈夫なはず…!
— 渡辺和希 (@watatanabe) October 10, 2018
ただボタン押すタイミング(押してからサーバーに送られるまでと数値更新のタイミングが重なった時の数ミリ秒)によっては数字が反映されず書き戻されるようになりました。 https://t.co/iAJQC19gBZ
当初の実装ではボタンが押された直後に表示上の数字を増やしていたものの、修正後は表示上の数字を変更するのがだいぶ後になったのでボタンを押してから更新までにタイムラグが生まれてしまいました。
とはいえ表示上の話だけで、押した回数自体は反映されてるのでいっかと。
今年の仕様
一から考えるのは面倒なので基本的には全部流用しています。
大きな変更は1増やすのをサーバー側でやることにしたことです。
①ボタンが押される
②サーバーに「押されたよ」と伝える
③サーバーに保存されてる数字に1足す
④その数字を表示する
今思えば「なんで最初からそうしなかった?」と思うのですが、数字は必ず1ずつしか増えないのでユーザー側で数字を計算してサーバーに伝える必要はなかったのですよね。
押されたことさえ伝われば後はサーバー側でどうにかすれば良いだけです。
例によってタイムラグはだいぶあるのですが、まあ大した問題ではないでしょう。
おわりに
公開から20時間ぐらい経った現時点で、既に6,200票ぐらいが投票されています。
中には1人で3,000回ぐらいボタンを押し続けてる人もいます。さすがに人じゃなくて連打botに任せてると思いますが。
そんなに押してるのに票数が6,200ってことはもしかしたらちゃんと全部を拾いきれてないのかも…?
全部で何票入るのか楽しみですね。
コメント