はじめに
フィヨルドブートキャンプで学習中のツカダです。
今回最終課題である自作サービスをリリースしました。
https://football-myteam.herokuapp.com/
Football MyTeamの紹介
Football MyTeamとは？
Football MyTeamは登録したチームのリーグ戦情報と試合日程を簡単に確認することができるサービスです。
自分が応援しているチームとライバル関係にあるチーム（カップ戦出場権争いをしている, 同じ本拠地にあるなど）の情報をひと目で確認することができます。
解決したかった問題
一般的なサッカーアプリは世界中のチームに関する情報を取り扱っています。
サッカー全般が好きな方にとっては多くの情報を広く拾うことができるので一般的なサッカーアプリは使いやすいです。
その一方で1つのチームを愛するサポーターにとっては自分の好きなチームに関連する情報が埋もれやすく、使いにくさも感じます。
実際、僕も自分の好きなクラブに関する情報だけを簡単に把握できるサービスが欲しいなーと思っていました。
Football MyTeamでできること
Football MyTeamでできることは以下のことです。
- 自分が応援しているチームとライバルチームを登録することができる
- 登録したチームのリーグ戦情報と試合予定（3試合）を一覧で表示できる
- 今シーズンの試合結果と試合予定を表示することができる
自分が応援しているチームとライバルチームを登録することができる
まずは自分が応援しているチームが所属しているリーグを選びます。
リーグを選ぶと、そのリーグに所属しているチームが表示されます。
その中から自分の好きなチームを一つ選びます。
応援しているチームを登録できたら、次はライバルチームを選びます。
ライバルチームは最大で3チームまで登録することができます。
「応援しているチームはあるんだけど、ライバルチームを選ぶほどサッカーに詳しくない...」という方でも安心してください！
ライバルチームの選び方は3種類用意してありますので、自分で選ばない方法も選択することができます。
「昨シーズンの順位が近いチームを選ぶ」を選べば、優勝争いや欧州カップ戦出場権争い・残留争いを楽しむことができますし、「本拠地が近いチームを選ぶ」を選べば白熱したダービー戦やライバル関係の面白さを楽しむことができます！
もちろん自分でライバルチームを選ぶこともできます。
登録したチームのリーグ戦情報と試合予定（3試合）を一覧で表示できる
チームを登録したあとは順位や勝ち点などのリーグ戦情報、今後の試合予定を確認することができます。
上記の例で言えば、5位のアーセナル（一番上）と4位のトッテナム（二番目）の勝ち点差は2。しかも5/12に直接対決を控えてます。
「4位までにチャンピオンズリーグ出場権が与えられる」「アーセナルとトッテナムはどちらもロンドン北部にあり、直接対決はノースロンドンダービーでありイングランド屈指のダービー戦と言われている」ということを考えるとかなり激アツな状況であることがわかります。
今シーズンの試合結果と試合予定
今後3試合の試合予定だけではなく、これまでの試合結果と試合予定も確認することができます。
一覧表の中からチームを選ぶと、そのチームの試合予定・試合結果のページに遷移することができます。
開発について
リポジトリ
開発環境
- Ruby 3.1.1
- Ruby on Rails 6.1.5
- PostgreSQL 14.1
- Vue.js 3.2.31
- Bulma
- RSpec
- Heroku
開発で苦労したこと
フロントの部分をVue.jsで表示させる
Football MyTeamは、ユーザー認証とトップページ、ヘッダーとフッター以外はすべてVue.jsで表示するようにしました。
Vue.jsはプラクティスでもチーム開発でも学んでいましたし、個人的には好きな言語だったので、実装を開始するまではVue.jsを使うことを楽しみにしていました。
ただ実装を始めると、
「Vue.jsだけで表示させる場合って、どうやってページ遷移させるんだ？？？」
「Railsに保存したデータをどうやってVueファイルに持ってくるんだ？？？」
と疑問が山のように出てきました。
RailsとVue.jsで調べると情報は多く出てくるのですが基本的なことばかりです。
当たり前のことですが自分の状況にピッタリ合う情報は落ちていません。
JavaScriptとVue.jsの基本を勉強し直し、仮説を立てて、検証することを繰り返し実践しなければいけませんでした。
分からないときは本当に苦しかったです。。
その一方で、「自分で考える力」はついてきたと思いますし、Vue.jsの面白さも知ることができました！
正確な情報を探し出す
上記のことと重複しますが、自分にとって必要な情報を探し出すことにも苦労しました。
ググってみて記載されてある通りに試してみても上手くいかなかったり、Aというページでは推奨されている方法でもBというページでは酷評されていたり、ワケがわからない状態に何度も陥りました。
当たり前のことですが公式情報を最優先にすることの重要さをあらためて実感しました。
開発で楽しかったこと
ユーザーが楽しめるデザインを実装する
はじめて作ったペーパープロトタイプはこのようなものでした。
これを作ったときは「必要な情報が表示できている」と自分では思っていました。
ですがペーパープロトタイプのレビューで言われたことは「これはただ並べているだけです」でした。
はじめは「ただ並べているだけってどういうこと？？？」とさっぱり理解できませんでした。
そんな僕に対して町田さんが、なぜダメなデザインになっているのかを丁寧に説明してくれました。
そのおかげで少しずつ「ユーザーにとって使いやすいデザイン」というものを考えられるようになってきました。
こちらの画像（一枚目）で言えば、
「試合の予定・結果を確認したいチームって急に言われても。。」
「6チームも選ばないといけないの？？？」
とユーザーに混乱させることがあったと思います。
二枚目の画像は「本当に情報を並べているだけ」という感じです。
たしかに順位や勝ち点、今後の試合がホームで行われるのかアウェイなのか、といった情報が表示されています。
ですがユーザーが直感的に理解しやすいものにはなっていません。
チーム同士の勝ち点の比較で言えば、「このチームは勝ち点〇〇だから、応援しているチームとの勝ち点は〇〇かな？」とユーザーに計算することを求めています。
ホームとアウェイに関しても同じ色で[H][A]と表示されているだけなので、「Hだからホームかな？」と考えさせてしまいます。
どちらも難しく考えることを要求している訳ではないですが、ユーザーに考えることを不必要に要求しています。
「ユーザーにとって使いやすいデザイン」というものを考えるようになってからは「実装するのが難しいけど、この機能が追加されればユーザーは使いやすくなるぞ！」と楽しく思えるようになってきました。
今後やりたいこと
オフシーズンのときに使える機能を増やしたい
欧州サッカーのオフシーズンは2~3ヶ月ほどあります。
そのときに使える機能がありません。。
欧州サッカーファンはオフシーズンの時期になると、選手の移籍情報をあーだこーだ言いながら（または妄想しながら）楽しみます。
ただFootball MyTeamのコンセプトと選手の移籍はマッチしていないように思います。
でも2~3ヶ月使えない期間があるサービスは問題があるのでは？というようにも思います。
いまのところ良いアイデアは思いついていないのですが、なんとかしたいです。。
おわりに
サービスを考えてからリリースするまで本当に大変でした。
ただ分からないことがあったり、落ち込んだりしているときに、メンターの方々と受講生の皆さんに助けていただきました。本当に感謝です！！
皆さんのおかげでリリースまで辿り着くことができました。ありがとうございました！
