【個人開発】プロ野球のおたくが勉強のためだけに作ったお遊び診断サイト

2021年からWebプログラミングを勉強している素人の会社員です。

HTML/CSS、PHP、MySQLの基礎の基礎をひと通り学習後、練習も兼ね友人に楽しく遊んでもらえそうなサイトを作ってみようと考え、趣味のプロ野球を題材にした簡単な診断サイトを制作しました。

※本当に何の役にも立たないただのお遊びサイトです（）

概要

• 生年月日を入力すると、どうぶつ占いのロジックを使って「あなたと最も相性が良い現役NPB選手」を教えてくれます。

サイトはこちら↓

開発リポジトリ

制作目的

• MVPモデルの実践開発をすること
• VPSを使用した本番環境構築をすること
• 友人に楽しく遊んで拡散してもらえるものにすること

使用した技術

フロントエンド

• Bootstrap4
  • HTML/CSSのフレームワーク
• Font Awesome
  • かわいいアイコンがたくさん

バックエンド

• PHP 7.3

DB

• MySQL 5.7

開発環境

• Docker

インフラ

• conoha VPS

開発にかかった期間

• プロトタイプで2w程度
• デバッグ・改修で2w程度
• 本番デプロイで2w程度 ←本当に苦戦しました（）

機能の紹介

• 生年月日を入力すると、あなたのどうぶつ占いでのタイプと、最も相性が良いタイプをもつNPB現役選手がわかります
• 結果は60パターンあります（本家のどうぶつ占いをそのまま踏襲しています）
• 占い結果はTwitterでシェアできます。
  
  

制作工程

1. 手描きでワイヤーフレームを作る
2. DB設計・実装
3. 結果データの作成
4. デバッグ・改修
5. 本番デプロイ

1. 手描きでワイヤーフレームを作る

• 画面構成のイメージをノートに描き起こしました。※雑で見苦しいのでモザイク←
• この段階である程度DB構成を考え、表示する要素のテーブル・カラム名などをメモ

2. DB設計・実装

• とてもシンプルでベーシックなformのページ遷移になっています。

  • top_viewからPOSTメソッドで送信した値をresult.phpで受け取り
  • 有効な日付かどうかをチェックする簡単なバリデーションを挟む
    • 2/30とか存在しない日付を弾く
  • 取得した生年月日からどうぶつ占いのロジックを介して結果のパターンを算出
  • resurl_viewで算出した結果パターンの情報を表示

• どうぶつ占いには決まった計算方法と結果ナンバー、結果の動物名（占いによって若干の表現違いはあるものの、基本の「動物ｘタイプ」の組み合わせは共通）、それを導き出すための早見表があり、検索するとごろごろとリファレンスが出てくるので容易にプログラム化できました

  • 早見表は丸ごとコピーしたものを専用のテーブルにして参照
  • ※これ作る過程でだいぶ動物占いに詳しくなった（）

• テーブル構成は以下のような感じになっています

  • 占いのロジックに使う早見表
    • 生まれ年と生まれ月の組み合わせにより固有の番号を指定。これをもとに計算します
  • 結果ナンバー1～60に対応する選手名のリスト
    • これを作るのが一番楽しかった（後述）
  • 結果ナンバー1～60に対応する「動物占いの結果情報」
  • 結果ナンバーと一意に対応する「最も相性のいいタイプ」の結果ナンバーのリスト
    • いつか使うかもと思いこのテーブル上で「最も相性が悪いタイプ」のナンバーのレコードも保持しています（結局使ってない）
  • 存在しない月x日付のリスト
    • バリデーション用

テーブル定義書にメモしてから各種データを作成

3. 結果データの作成

• ただひたすら楽しかったプログラム一切関係ない作業
  • 動物占いの全結果ナンバーにそれぞれ対応する生年月日の現役選手をNPB公式サイト等から探し、12球団バランスよく分布するようリストに埋める
  • テーブル定義書などと同様のファイルで設計書としてひとまとめに管理
    
    技術一切関係なしの何の訳にも立たない作業工程なので詳細は割愛します

4. デバッグ・改修

• システム自体はかなり簡易的で難しいことをしていないので、バックエンドの不具合で詰まることはほぼなし
• フロントエンドのPC/SPにそれぞれレスポンシブにいい感じに対応するところでちょっと苦戦
• Docker開発環境によりテスト→修正のセット繰り返しが非常に楽でした
• 基本機能が出来上がってから、Twitterシェア機能やOGP設定などを追加

5. 本番デプロイ

大苦戦。
やったことは大まかに以下です

• apacheのVirtualHostを設定
  • サーバー1台で複数のドメインを運用できる
  • 今後複数の制作物を別ドメインで管理していきたかったため
• conohaのVPSホスティングを利用
• DNSのAレコードを設定し対象のドメインをサーバーと紐付け

オンラインスクールの頃の先生に相談して一連の処理を教えてもらいましたが、これは人に教わらないと無理。
デプロイの仕方ってプログラムの書き方よりも調べる難易度が段違いで高いと思うのですが、未経験独学で個人開発してる方々はどうやって習得してるの？？？？？？大尊敬しかありません

総括

• 超基礎的なDB操作を伴うMVCモデル開発の実践練習にはちょうど良い物量と内容でした
• ネタがネタなので友人が面白がって遊んでくれたという点でも目標達成

おまけ

結果データ作成時の調査中、個人的に粒ぞろいだと思った動物占いの結果タイプは以下

#31 「リーダーとなるゾウ」

• 松井 裕樹（東北楽天）、鈴木 誠也（広島 ※制作当時）、栗山 巧（西武）など

#35 「頼られると嬉しいひつじ」

• 牧 秀悟（DeNA）、岡本 和真（巨人）、島内 宏明（東北楽天）、會澤 翼（広島）など

この診断結果をきっかけに、野球に興味がある人もない人も、「あなたと相性最強選手」を応援してみるのはいかがでしょうか？（雑なまとめ←）