質問サイト「新潟大学 知恵袋」がオープンしました!

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

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

この記事を書いた人
渡辺和希

新大経済
自称美少女

渡辺和希をフォローする

Web投票ページ

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

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

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

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

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

常任とは無関係

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

昨年の様子

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

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

小森すみれさん

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

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

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

実施意図

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

とのことです。

技術解説

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

ベース

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

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

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

昨年からの仕様変更

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

2018年版、当初の実装

①ボタンが押される
②表示上の数字を1増やす
③表示されてる数字とサーバーの数字を比べる
④大きい数字の方に合わせてもう片方を書き換える

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

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

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

2018年版、最終的な実装

①ボタンが押される
②サーバーに保存されてる数字を取得する
③その数字に1を足す
④1足した数字をサーバーに保存する
⑤1足した数字を表示する

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

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

今年の仕様

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

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

2019年版の実装

①ボタンが押される
②サーバーに「押されたよ」と伝える
③サーバーに保存されてる数字に1足す
④その数字を表示する

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

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

おわりに

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

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

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

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

コメント

タイトルとURLをコピーしました