4
1

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 1 year has passed since last update.

【個人開発】バチェラーの優勝予想をする放置ゲームを開発しました

Last updated at Posted at 2021-11-21

最初から優勝者を当てていたのに、その証拠がなく誰にも自慢できなかった。

これがバチェラー・ジャパン シーズン2(2018)を見終えたときから
自分の中に残っていたモヤモヤであり、本アプリ開発の背景です。

サービス概要

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

使用技術

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

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

使い方

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

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

②BETは「一覧から1人選択」→「確認モーダル出現」→「BET」の3フローです。
Image from Gyazo
Image from Gyazo
びっくりするくらいドンピシャのイラストが見つかったのが思い出です。

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

頑張りポイント

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

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

ER図は以下の通りですが、ここは長くなりそうなので詳細は別記事でフォーカスしていこうと思っています。
(別記事ができたらリンク貼っておきます)
Image from Gyazo
これにより操作ミスのリスクを低減できるだけでなく、コントローラもシンプルなCRUDのみの記述にすることができました。

改善ポイント

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

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

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

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

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

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

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

4
1
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
4
1

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?