高校生がリアルタイム投票サイトを公開したらいきなり1万PVを記録した話

今回は高校生の私たちが公開した投票サイトが三日で１万PVを記録したので、その経緯をサイトの紹介も含め、全て公開します。
qiitaで後日談を書きましたので、よかったらお読みください
リンクはこちらです

#サイトの内容
名前はAICEVOTE(アイスボート)
リンクはこちら ----> aicevote.com(大量アクセスで現在サーバーが不安定な状況です。ご了承ください。)
このサイトを一言で言うとこんな感じです。

"投票用紙を氷に見立てた次世代のリアルタイム投票サイト"

##AICEVOTEとは
###普通の投票とAICEVOTE（アイスボート）の違い

###普通の投票

普通の投票では、投票箱A/Bに最終的に投票された票の数の比で結果が決まります
###AICEVOTE
AICEVOTEでは投票用紙の代わりに氷を投票します。
それぞれの投票箱の底は網目になっています

時間が経てばあなたが投票した氷は少しずつ溶けて、水となって網目から落ちていきます。
つまり、最近に投票された票の価値を高く、時間が経つほど次第に価値を低いものと捉えるのです。その瞬間に投票箱に入っている氷の量をポイント化した合計をリアルタイムに表示しています。投票箱はいつでも開かれており再投票できます。
要は、こうしていつでも、もしも今「一般的な投票」を行ったらどうなるか？の結果を教えてくれるんです。
##AICEVOTEが可能にすること
サッカーの試合を例にしましょう。従来はどちらのチームが勝利するかみんなで予想する時に、試合前に一度にみんなに投票してもらう必要がありました。
これがAICEVOTEを利用すると、試合前はもちろん、試合中もリアルタイムに投票先を変えたり、それが投票結果にリアルタイムに反映されるのでそのことをサイト内で共有するなどして、みんなでインタラクティブに楽しむことができます。
政治的な問題を例にしましょう。従来はある議題について一度に投票してもらう必要がありました。
これがAICEVOTEを利用すると、ニュースやインフルエンサーの発言などによって新たに投票したり、投票先を変えるなどしてそれがリアルタイムに投票結果に反映されます。
全員に投票してもらう前に、リアルタイムにもしみんなに投票してもらったら？
に答えてくれるんです。
これは、様々なスポーツ、格闘技、esports、エンタメ、配信、政治、経済に関わる投票をupdateします。

##次世代の投票サイトとしての機能
まず時系列グラフです。過去の時点での投票結果を時系列化して知ることができます。
次に自分がフォローする人の投票結果がわかることです。よりオープンな投票を目指してこの機能も作りました。
最後にインフルエンサー枠の導入です。Twitterのフォロワー数が50000人超の方は、棲み分けされて投票先とコメントが公開されます。

#経緯
ここからは、サイトを作った経緯を企画立案から説明していきます。
##企画立案
まずはこちらをご覧ください

これはあるゲームのレビューですが、一見普通に見えるこのレビュー。
しかし、僕たちは疑問を感じました。八年前の星が現在投票された星と同価値に扱われているのです。確かに、八年前のこのゲームはロボットの動きがよくて、心から星５と言える神ゲーだったのかも知れません。しかし、もしかしたら、今のこのゲームはクソゲーと化し、星１にも満たなくなっているかも知れません。だのに、この投票システムでは、八年前の投票の価値は一切消えずにいるのです。これっておかしくないですか？本来八年前の投票なんて価値は少ないはずです。
このことはアプリのレビュー以外にも言えます。食べログの評価やテレビの視聴者投票。そこで、これは投票というガラパゴス化した文化にも言えるのでは？と私たちは、AICEVOTEシステムを開発し、サイトも作ろうと言うことになったのです。

##とりあえず作ってみようはダメ
企画が決まりウキウキしていた私たちは、とりあえず、作ってみようということになり、
試作品を作ってみました。そこで、先輩に見せに行ったところ
**「はっきりいってUIも機能もまるでダメ。もう一回作り直して。」**と言われました。
##サイトの方向性を決める
先輩に相談してみたところ、
**製品要求仕様書(MRD & PRD)**を書いてみてと言われたので
こちらのサイトを参考にし、チームと一緒に書きました。大まかにはこんな感じです。

従来の投票で実現できなかったリアルタイムな投票結果を実現させる
中高生向けの
AICEVOTEというプロダクトは、投票サイトです。
これは、票を氷に見立てたAICEVOTEシステムを使い、リアルタイムな投票結果を実現できます。

これを書いて気づいたことは、私たちの投票システムの大きな特徴は、投票結果がめまぐるしく変わる投票内容でないと面白く無くなってしまうと言うことです。そこで、ターゲットユーザーを意見が変化しやすい中高生ということにしました。また、大まかなサイトの方向性も決まっていきました。

次にこれをもとにカスタマージャーニーを書くことにしました。
カスタマージャーニーとは、簡単にいうとサイトを使ってくれる人たちの気持ちを書くというものです。
こちらのサイトを参考に、実際に書いたものがこちらです。

これを書いたことで、実際にサイトを使ってくれる人の気持ちがよくわかりました。
##UIを決定する
製品要求仕様書(MRD & PRD)、カスタマージャーニーを元にUIを一から見直しました。
サイトのデザインはuberのデザインを参考にしました。次に実際にコーディングにうつります。

##立ちはだかった壁(技術)

使った技術は以下になります。
・node.js
・Express
・MongoDB
・socket.io
・AWS

###F**k ノンブロッキング
私たちのサイトの目玉はリアルタイムな投票結果というところにあります。
そこで非同期通信というものが肝になってきます。そこで使われるのがsocket.io
そのためにnode.jsでサイトを書くことを決めました。しかし、このnode.js特有のノンブロッキングが私たちを苦しめました。何回パソコンを投げたことでしょう。ですが、使っていくうちにだんだんと慣れていきました。

###機械学習
AICEVOTEのAIは機械学習です。特定の個人が投票、再投票する時間間隔を特徴量として抽出し、その時点でもし大規模に投票を行った場合の投票結果が正解データとなりパラメータを調整します。これにより一票の価値が時間を追うごとにどのような加減で失われるのかの関数を作成しています。
こうすることで投票再投票間隔の狭いサッカーの試合は一票の価値が失われるのが早く、
投票再投票間隔の広い政治論点などは一票の価値が失われるのが遅くなります。

###前人未到のグラフ作成
投票結果におけるグラフ作成も私たちを苦しめました。
ある意味私たちは前人未到のことをしようとしていたので、当然前例があるわけでもなく、
一時は途方にくれました。試行錯誤を繰り返した結果、出来上がったグラフがこちら

使ったツールは以下になります
・Chart.js
・chartjs plugin streaming
・momentjs

###Twitter連携
サイトの機能上、Twitterに完全に依存した形になっているので、twitterAPIを利用する必要があります。その過程で日本語ドキュメントも少なく、海外のサイトを翻訳しながらなんとかツイッターとのスムーズな連携を可能にしました。

###AWS
サイトを公開するにあたって、AWSを使用しました。当然AWSなんぞ触るのは初めてだったので、最初に見たときEC2やらS3やら英語の羅列で頭が混乱しました。（今もなお全てを理解していません）流石にネットの知識だけではまずいと感じ、こちらを購入しました。
図解即戦力 Amazon Web Servicesのしくみと技術がこれ1冊でしっかりわかる教科書
この本を見ながら急ごしらえではありますが、一応無事に公開までたどり着けました。

##素直に嬉しかった試作版公開
さあやっとサイトが完成しました。
私たちは次に、クロースでこのサイトを公開することにしました。
実際に使ってもらい、ユーザーの意見が欲しかったのです。
そこで、リア友１０人に使ってもらったところ、ほとんど全員がこのサイトについて好意的な意見をくれました。その時は、何か今までやってきたことが報われたような気がして、
素直に嬉しかったです。
しかし、厳しい意見も多々いただきました。多かったのは、ログインがしづらいというものでした。ログインのUIに関して、あまり重要視していなかっただけに、反省させられました。また、根本的になんのサイトかわからないという意見もいただいたので、サイトに関する説明を一番最初に見せるなどのルーティング処理をしたり、デバックをしました。

##10000pv！
大晦日の日、投票テーマは『紅白歌合戦、リアルタイムに盛り上がってるのは紅組？白組？』。このリンク先のついたツイートをアーティストや、紅白公式アカウントにリプライしました。するといろいろと反響があり、１００００pvを超えました！

これ面白い。思いつかないけど、すごいピッタリのお題がありそう。 https://t.co/MwavSnMRex

— 聖徳犬子🐶ITエンジニア (@shotokuinu) January 4, 2020

おもろそう https://t.co/RVvLX8u8Gg

— Asha_QU_音楽系Youtuber (九大) Áша (@pkMoRcyFYIiUVHa) December 30, 2019

嬉しい声もたくさんいただきました。 きてくれたみなさん本当にありがとうございました。

#AICEVOTEをもっと大きく、自由に...
AICEVOTEはもっともっと大きくなっていきます。
目標のユーザー数500万人を目指して頑張っていきます！
将来は、オリンピックでの、試合中や期間全般に渡った大規模な投票も行う予定です。
ちなみに今、ベーシックインカムについての投票を行なっているので、
ぜひ一度使ってみてください-->aicevote.com
そして、今、投票テーマのホスティングは我々が行なっていますが、将来的には、個人で投票テーマをホスティングすることができるといったような、個人向けのAICEVOTEも作りたいなと思っています。
多くの方に使っていただきたく投票テーマをホストしたい！フォロワーに投票してもらいたい！という方を募集しています。お気軽にフォローDMおねがいします！
こちらまで ----> https://twitter.com/aicevote

##あとがき（2020/1/6 18:30現在）
みなさん！多くのいいねやリツイート、コメントを本当にありがとうございます。
現時点で、ユーザー数は5800人を記録しており、こちらも驚きを隠せない次第です。
※サーバーが落ちてしまうかもしれませんが、ご了承ください。
ここでいただいたコメントに少し、返答させていただきます。

「本当に高校生だとは思えない」
駒場東邦高校と都立高校に通っている高校生でサイトを作っております。
詳しくは、本サイトのAbout_usをご覧ください。
また、twitterアカウントはこちらです --> https://twitter.com/charley_k2
「先輩って何者？？」
先輩は校内の先輩ではなく、エンジニアとしての先輩です。
私の説明不足で、誤解を招いてしまい、本当に申し訳ないです。