背景
遡ること3年前、とある企業のインターン最終面接。
私: 野球アナリストになるために御社でデータ分析を学びたいです。
面接官: 情熱に溢れているね〜。野球アナリストになるためにはデータ分析を学ぶことが最適なの？スポーツ分析を投稿するサイトを作り、スポーツアナリストを輩出する側に回ることもできるよ。
私: そういった視点もあるのですね。今は分析を学びたいので、時が来たらスポーツ分析を投稿するサイトを作ってみます。
インターン中、幸運にもプロ野球球団にシステムを提供する会社から内定をいただき、野球アナリストになること・プロ野球球団に入団するための好スタートを着ることができました。
5ヶ月間の研修を終え、プロジェクトにアサインしたのですが、Rails触ったことないとなり、3年前に面接で言われたサイトを勉強を兼ねて作ってみました。
開発の目的
- 実務で使用する技術を自分のペースで学ぶため
- Web開発を一通り経験することで全体像を掴み、どのフェーズの仕事を任せられても対応できるようにするため
- スポーツ分析を投稿するサイトがなく、同じ志を持った人が集まるプラットフォームを作りたかったため
サービス概要
【今回作ったサービス】
https://sportshack.com/
スポーツアナリストを目指す方とスポーツチーム関係者を繋げたいという想いから生まれた、スポーツ分析投稿サイトです。
QiitaやNoteのように、投稿・いいね・コメント・フォローを行うことができます。
投稿一覧画面
投稿詳細画面
About画面
使用技術
- Rails
- PostgreSQL
- Docker
- Semantic UI
- SendGrid
- Amazon S3
- Heroku
- Cloudflare
サービス開発までのTODO一覧
web開発未経験だったため、最初からTODOが明確になっていたわけではありませんが、
着手する前にある程度TODOを決めスタートしました。タスクの進め方を学ぶことも個人開発のテーマとしていたため、自分なりにTODO一覧表をスプレッドシートにまとめ、開発を進めました。
- 企画・コンセプト決め
- 基本設計
2-1. 機能洗い出し
2-2. 機能一覧表作成
2-3. UIイメージ作成 - 詳細設計
3-1. 画面設計書作成
3-2. テーブル定義書作成
3-3. ER図作成 - 環境構築
4-1. Rails
4-2. Docker
4-3. PostgreSQL - 開発
- リリース前準備
6-1. Herokuでサーバーを立てる
6-2. ドメイン取得
6-3. 利用規約・プライバシーポリシー作成
6-4. コンテンツ作成 - リリース&周知活動
UIイメージ作成
18画面分のUIイメージを非ログイン・ログイン時に分け作成しました。下記はメイン画面の投稿一覧画面になります。
テーブル定義書
ER図
工夫した点
- Semantic UI
デザインを統一するために、Semantic UIというフロントエンドフレームワークを導入しました。boostrapのようにタグを埋め込むことで、レスポンシブ対応やシンプルなUIを構築しました。 - Docker
普段の業務でDockerを使って開発をしているのですが、アサイン当時、Dockerfileの中身を理解しないまま手順書通りに環境構築をしていました。Dockerの参考記事を読んでもイメージがつかず理解できなかったため、自分で0から構築して理解しました。
また、ログイン周りをdeviseというGemで対応しようとしたのですが、パスワードを暗号化する際、bcryptが使われており、M1 Macの影響で使用できなかったためDockerを導入することで解消しました。 - Heroku
なるべくランニングコストを下げて、長い年月使われるサービスにしたかったため、無料枠で使用できるHerokuでデプロイしました。
ただ、11月末に無料枠が廃止するということなので、リリースしたばかりではありますが、別の代替プラットフォームを探しているところです。 - ソーシャルログイン
スポーツアナリスト目指す方はTwitterをやっている方が多い印象のため、新規登録のハードルを下げるためSNS認証を導入しました。
学び
- 普段の業務と違い期限がないため、機能やレイアウトの落とし所を見つけながら開発を進めました
- エンジニアであればサービスを作ることはできると思いますが、実際はサービスを知ってもらい、使ってもらうことがスタートだということを肌で感じることができました(開発初期段階でユーザーを集めておくべきだった)
今後のTODO
- CI/CDツールを導入して、mainブランチプッシュ後、自動でデプロイできるようにする
- Google Analyticsを導入して、アクセス数や流入経路を把握する
- 正直、コンセプトがスポーツ分析を投稿するサイトというだけで変わった特徴がない状況。他のコンテンツサイトと差別化するために何かひと工夫加える必要がありそう
- コンテンツの作成と集客
終わりに
最後までご覧いただきありがとうございます。
個人開発第二弾としてReact Native + Expoで野球日記アプリを開発中です。
アーキテクチャ設計やHooks周りの理解に苦戦しているためメンターになっている方を探しております。もし可能でしたら、Twitter DMにてお声がけいただけますと幸いです。よろしくお願いいたします。
【Twitterアカウント】
https://twitter.com/yuuuusuke1997
【今回作ったサービス】
https://sportshack.com/