プロ野球の予想アプリ「日本プロ野球 ファン対抗ペナントレース」を作りました〜

はじめまして！初投稿です！
お待たせしました。いや、お待たせし過ぎたかもしれません。ご存知、八木です。
誰やねん笑笑
はい、一発目のボケが空振りに終わったということで、この度、ポートフォリオとして
野球予想アプリ「日本プロ野球　ファン対抗ペナントレース」を作りました！
まず、野球の予想と聞いて犯罪の匂いが漂うなぁ〜と思ったあなた。
勘弁してください😭
色々と確認をとった上で制作しましたので大丈夫です！
安心してください！
## サービス概要
🔽サービス
「日本プロ野球　ファン対抗ペナントレース」
　https://fan-pennantrace.com
[![Image from Gyazo](https://i.gyazo.com/0c017d3ec343b59b20671bbc2caf945c.jpg)](https://gyazo.com/0c017d3ec343b59b20671bbc2caf945c)

プロ野球のスコアを予想し、にわかではなく本当の野球好きが集まる球団はどこなのか可視化できるアプリです。

みなさんには、先発投手や直近の試合結果を用い試合を分析し、スコアを予想していただきます。

「自分の推し球団だから勝つ」という様な、単純な予想をするのではなく、みなさんの知識をフル活用し冷静に試合結果を予想してください。

その中で、本当の野球好き、試合結果を客観的に分析出来るファンが多く集まる、「ファンの質No.1の球団」というのを決めます。

それをポイント制にし、球団別ランキングとして本当のペナントレースの様に、順位を出します。

みなさんの知識を駆使し、 推し球団を「ファンの質No.1の球団」に導きましょう！

他にも、 個人累計ポイントランキング、推し球団内ランキング、などもありますので「野球予想王」を目指して頑張ってください！
## 作った経緯
プロ野球ファンの中にはリアルタイムで試合を観戦せず、結果だけを調べて楽しむという方が多数います。
そういった方が、勝敗予想や点数予想をあらかじめしておくことでさらに試合結果だけでも楽しむことができると考えました。
私自身もプロ野球が好きで友人と話すと毎回プロ野球の話になります。
よく試合の勝敗予想は仲間内でしていたのですが、もっと他球団のファンの方達と関わりを持ちたいと思っていました。
プロ野球ファン同士が交流出来るコンテンツが少ないと考え、プロ野球を通して色々な球団の方と交流したいと思ったのがきっかけです。


##使用技術
###バックエンド

Ruby 2.7.3
Rails 5.2.5
Rspec 4.0.2
###機能における主要な Gem
bootstrap
font-awesome-sass
jquery-rails
sorcery
ransack
kaminari（ページネーション）
dotenv-rails（環境変数）
whenever（定期更新）
mechanize(スクレイピング）
###インフラストラクチャー
Nginx
unicorn
AWS
VPC
EC2
Amazon Linux 2
S3
ALB
Route53
ACM
##使い方
###1.試合スコアを予想する
試合一覧ページに本日の試合が表示されています。予想する試合を選択し、予想登録ページで予想スコアを登録してください。（予告先発や他のユーザーの予想平均点などの情報を参考にすると良いかもしれません。）
[![Image from Gyazo](https://i.gyazo.com/08f16025f93574d23894fc0ab67a1003.gif)](https://gyazo.com/08f16025f93574d23894fc0ab67a1003)
自分の予想履歴を見たい時はマイページに飛び、予想履歴から確認、編集ができます。
全ての試合が終了した後、予想結果と試合結果を照らし合わせポイントが付与されます。
###2.ランキング
・どちらのスコアも当たっていれば５０p、片方どちらかのスコアが当たれば２０p、勝敗が当たっていれば１０p付与されます。
・個人ポイントランキング、球団内ランキング、球団別ポイント表があり、順位が表示されます。


##工夫した点
###使いやすいようにシンプルに
予想を登録、変更したり、ランキングも３種類あるなど少し複雑で
凝れば凝るほど使いにくく、見にくいデザインになってしまうため、シンプルな作りにすることを心がけました。
また、その上で野球の雰囲気を出すためにデザインにも気を遣いました。

[![Image from Gyazo](https://i.gyazo.com/3b2e28a38024a9960080c224adb8bf4f.jpg)](https://gyazo.com/3b2e28a38024a9960080c224adb8bf4f)
[![Image from Gyazo](https://i.gyazo.com/8585ef96864ef77f76190c686c8cff3e.jpg)](https://gyazo.com/8585ef96864ef77f76190c686c8cff3e)

###プロ野球の日程に対応した自動更新
デーゲームやナイトゲームなど日程によって試合開始時間が変わります。
ですので、定期的に更新をし、試合が始まると予想ボタンが出力せず、
また試合が始まった後でも更新をし、試合の速報を見れるような作りにしました。

###ファン同士が結束して楽しめる作り
ファンの質の高さを競うというコンセプトを持って制作したことで、プロ野球ファンを惹きつける設計にしました。





##追加したい機能
###ファンの方たちがプロ野球のことや試合予想について意見交換、交流ができる場所を作る
実を言うとActionCableを使用したチャットルームを作っていたのですが、
本番環境にあげたら、バグが出て、色々してみたんですが直らず、そして考えるのをやめました（カーズではありません笑）マジでメンタルやられました😭
冗談は置いといて、現在デバッグして追加しようと思ってます。
###本日のヒーロー予想
ユーザーの方からヒーロー予想を機能として追加してほしいと言うご意見を頂きました！謝謝！🙏ユーザー視点で考えることはとても大切なので、意見として頂けたのはとてもためになりました。まだ構想を練っている段階ですが、ぜひ作ってみたいです！

###Twitterと連携させる
これは先輩のアイデアなのですが、自分の予想をツイートできるようにすれば、
拡張性がUPするとのこと。自分にはない発想でした笑　確かにTwitterからアプリを知って登録してくださる方が多いのでこの機能があると面白いですし、
またそれが宣伝にもなりますね！
##反省点
###レスポンシブデザイン
制作期間は約1ヶ月でしたが、機能は２週間もかからず作れました。
ただ、デザインをいじることがこれまであまりなかったため相当に時間を食いました。
特にレスポンシブ対応は慣れるまでどうしたらいいかわかんなかったです笑
また、画面遷移図は描いていたのですが、かなり抽象的だったため、配置をどのようにするのか設計の時点で具体的に決めていれば、迷うことなくスムーズに作れたと思います。

###著作権について
プロ野球の球団のロゴや選手写真の著作権は各球団が保有しているので
僕なんかが使えるはずもなく、球団名や選手名のみ使用しました。
球団毎、チームカラーに合わせて文字の色を変えて表示するなり、そのチームだとわかるようなイラストを入れたりと遊び心を加えられる点はいくつもあったな〜と思いました。

###スクレイピングを使っての情報取得
APIを使い、プロ野球の日程や結果を取得できればもっと簡単に実装できたのですが、良いAPIが見つからなかったため、スクレイピングで情報を取得しました。一通りエラーなく実装できましたが、もっと効率の良い書き方や他の人がコードを見たときにわかりやすいのかなど、改める点はいくつもありそうなので、改善していきます。

##初めてアプリを作ってみて
最初の設計のところを怠らないことがスムーズに開発するためには必須だなと身をもって感じれました。また、今回は、自分の力で実装する「自走力」をつけることを個人的に目標にしました。かなり自分にとってはハードルが高いものと思っていましたが、人間やればできるもんですね笑やはり自分に対して何かを課す事でより成長できますし、自信にも繋がるのでこれからもしっかりと目標設定をしてでっかい男になります！
また、先日Twitterでこのアプリを使っていただいてるユーザーの方からお褒めの言葉を頂き、自分の作ったもので人を楽しませたり、生活を豊かにできる所がプログラミングの素晴らしいところだと改めて感じました。今後も人に影響を与えられるようなアプリを作れるように勉強していきます！

##この記事を読んでくださった方へ
初投稿で、つまらない記事だったかもしれませんが最後まで読んでくださりありがとうございました〜！
関西人のレベルを下げるようなボケ失礼しました。笑
次はもう少しマシな記事が書けるように頑張ります😂
最後に皆様のご健康、御多幸を祈念いたしまして結びの挨拶とさせていただきます。