見出し画像

NPB開幕が決まったのでWebサービスを作った話

しまゆ

こんにちは、ちなハムちなヤクです。
NPBの開幕が6/19と決まり、また野球を観られる喜びからWebサービスをリリースしました。
(OGP、Twitterだとちゃんと表示されるんだけど、noteだと表示されない・・・）

なにこれ？

野球ファンなら年に334回は考えるであろう「俺ならこういう打順にする」という妄想を具現化（画像化）するWebサービスです。
一例：なぜ野球ファンは打順を組みたがるのか？

リーグ　→　チーム　→　選手（支配下 + 育成）と順番に選択すると、監督が交換する打順表のようなフォーマットで画像を作成します。

↓こんな感じ↓

画像1

ぜひこのアプリで、
・ガチ考察打順
・期待する打順
・趣味打順
・極端な打順
・妄想打順
...などなど、お好みの打順を組んで開幕まで（できれば開幕後も）楽しんでいただければ幸いです。
※現在はスマホだと使いづらい状態になっています。できればPC、またはタブレットでお試しください

あんた誰よ?

・30代半ばの非えんじにゃー
　趣味で個人開発をしている者だ。
・iOSアプリをリリースしたことがある
　・日ハム応援歌暗記アプリ（非公式）(AppStore)
・Python/Djangoでアプリを作ったことがある
　・栄冠ナインデータベース(GitHub)
・Vue.js + Firebaseで作ったもの
　・ぼく将オーダー(GitHub)
・Vue.jsはどこで習った？
　・入門書を読んだのよ
　　・動かして学ぶ！Vue.js開発入門
　　・改訂新版　Vue.jsとFirebaseで作るミニWebサービス
・他の活動
　・こちらをご参照ください

開発にあたり

git initからこの記事を出すまでに11日かかりました。かけた時間としては50時間そこそこくらいでしょうか。途中進捗０の日もあります。

本来であれば、6/12中（開幕1週間前）の日中にリリースして、「爆速で開発した！」ってドヤりたかったのですが、Vue.jsやFirebaseの技術的にハマる、体調不良、家事に追われる、添い寝したらそのまま寝てしまうなどあったため、開幕3日前のリリースとなりました。
Vue.js + Firebasに慣れている人であれば10時間そこそこで作れるくらいのコード量です。こうかなー？こうしたらいけるかなー？できないから仕様変えるかーなんてやってたら時間かかりました。
まぁそれでも自分にとってはサクッとできた方なのでヨシ！

なんでこのアプリを作った？

・前述のDjangoアプリで溜め込んだデータをいじりたいと思い、Vue.jsに入門した
・入門書を写経しただけでは、どうやって既存のアプリに組み込めるかイメージがつかなかったので、一旦何かVue.js単体でアプリ作ってみようと思った
・NPB開幕決定のニュースを聞き、そういえば我々やきう民って打順組むの好きだよね、と思った
・「マネーボール」とか「セイバーメトリクスの落とし穴」を読んだ影響で、打順って奥深くって個人の野球哲学が反映されるので面白いゾ、と思ったから

工夫した点

とにかく最低限の機能を心がけた
開幕に間に合うようにリリースしたかったので、機能としては最低限を心がけました。MVPですね！
その為にはFirebase使ったり、本当はもうちょっと機能をつけたかったけど妥協したり、実装も賢い実装とは言えないけども、なるべくわかりやすくしつつも妥協してゴリ押したりしました。
ただ、今回無事（？）リリースしたので、ちょこちょことバージョンアップ、リファクタリングしていこうと思います。

今後の課題

・App.vueに全部書いてあるのをどうにかする（全部で200行そこそこだけども）
・素のVue.jsで作っているので、次はNuxt.jsで作ってみたい（もっと楽に開発できるか？）
・使いやすくかつスタイリッシュなページにしたい
　・VuetifyとかVuesaxとか使ってみたい
・画像ではなくOGP画像にしたい
　・質問箱とか、みんなのボタンメーカーみたいなイメージ
・プレビュー画像の部分かなりゴリ押しているのでもっとよい方法があればリファクタリングしたい
・空欄、重複がある状態でボタンを押した場合はエラー表示したい
・スマホでも使いやすいようにしたい
・テストを書く

おわりに

もしよかったらスキ、コメント、拡散、フィードバック（GitHubへのissue、PR）などよろしくお願いします。

開発はいいもんだぞ！開発は楽しいぞ！
プロ野球サイコーーーーーーーーー！！

サポート、私の好きな言葉です。