サービス概要

文字通り「バチェラー・ジャパンシーズン4」の優勝予想をするシンプルなゲームです。
1分で遊べて人間観察力の自慢ができるサービスです。

使用技術

Ruby
Ruby on Rails(API)
- slim
- sorcery
- jwt
- meta-tags
JavaScript
- axios
- bootstrap
Vue.js
- Vuex
- VueRouter
- VeeValidate
Heroku

##　ルール

「途中で予想を変えるとマイナスだが、予想した人が脱落するともっとマイナスになる」
というルールを作ることでゲーム性も持たせました。

使い方

基本的には①ユーザー登録と②候補者BETの2アクションで完結します。

①ユーザー登録は手軽さ重視でメールアドレスを要求しなかったところと、
　ニックネームにTwitterユーザー名を登録してもらい番組終了後の上位者発表ツイートで
　メンションすることで盛り上がりの一因となるようにしたところが工夫した点です。
VeeValidateでのユニーク制約がどこにも書いてなくて苦戦しました。

②BETは「一覧から1人選択」→「確認モーダル出現」→「BET」の3フローです。

びっくりするくらいドンピシャのイラストが見つかったのが思い出です。

ちなみに今回使ったイラストサイトは以下の2つです。
どちらも無料で登録不要で商用利用可でカラー変更可でSVGダウンロード可という神サービスでした。
https://undraw.co/illustrations
https://storyset.com

頑張りポイント

###　①時間との勝負
もうこれがすべてです。
10月末にアイデアを思いつき11月初旬に着手したのですが、11月25日放送開始なので宣伝期間など考えると
2週間くらいしか猶予がないにも関わらず、使ったことのないVue.jsを採用するというドMっぷり。
でも、間に合わないとやってきたことがすべてパーになるというプレッシャーが逆に良かったのかもしれません。

###　②テーブル設計
頑張りというよりは工夫した点です。
今回はユーザーの配点を減らしていく処理が必要なのですが、ユーザーや管理者の「操作」によって処理すると
操作ミスのリスクが残ると考え、ユーザーと管理者の作った「履歴」によって処理する設計にしました。

ER図は以下の通りですが、ここは長くなりそうなので詳細は別記事でフォーカスしていこうと思っています。
（別記事ができたらリンク貼っておきます）

これにより操作ミスのリスクを低減できるだけでなく、コントローラもシンプルなCRUDのみの記述にすることができました。

改善ポイント

###　パスワード忘れた時のパスワードリセット機能
ユーザーがパスワードを忘れたときにメールアドレスのみ送信してもらい、
そのアドレスにパスワードリセット用の特別なURLを送ることで
ユーザーにパスワードを再設定してもらうアレです。

sorceryを使っているのでwikiどおりにやれば簡単にできるはずなのですが、今回は手軽さを求めて
メールアドレスをユーザーに要求しなかったばかりにこれが一気に難しくなりました。

パスワードリセット申請の時だけメールアドレス入力してもらえばいいじゃん！と思いましたが、
ニックネームに秘匿性がないので悪意のある第三者が
自分のメールアドレスを入力することで乗っ取りができてしまうと思われます。
（乗っ取ってもそんなに出来ることないですが、、、）

なので、やるとしたら
　①ニックネームにはTwitterユーザー名の入力を強制。
　　忘れたときはニックネームでユーザーを特定し、DMでパスワード再設定用URLを送る。
　　（使ったことないけどTwitterAPIとか使えばDM自動送信くらいはできそう）
　②そもそもユーザー認証方法をTwitter認証一本に絞る。
　③やっぱりメールアドレスも登録してもらう（めっちゃ謝る）。
のどれかかなーとか考えていたら放送まで5日を切ってしまいタイムアップ。

使っていただく際は、パスワードを忘れないように祈っています。

###他にも使っていただいて改善点などあればご指摘いただけると幸いです。
https://bachelor-derby4.herokuapp.com/

コード：
https://github.com/a0ki-github/bachelor_derby4