半年前に作ったwebサイトを壊した話
半年前に作ったwebサイトを1から作りなおしてリニューアルしました。
デザインほぼ一緒やんけという突っ込みは一旦引っ込めてください。。。
見た目はほぼ同じですが、できることは増えています。
- ユーザーが追加した得点パターンの集計
- スコアの変化と同時にグラフを表示
- スコアと集計データのリアルタイムでのシェア
以上のようなことができるようになっています。
以前のバージョンを公開してから感じたのは、自分で集計するのはめんどくさいけど、集計されたデータなら興味がある人はそれなりにいるということです。
当初の目的は自分の試合で使ってもらい、強くなってもらうことでした。しかし、トップ選手の戦術を分析することのほうが需要があることを知りました。
今後はトップ選手の試合のデータを通して、戦術解釈って面白くね？ってところをもう少し自分でも発信していきたいです。
さらに、せっかくリアルタイムでのシェア機能があるので、YouTubeなどで配信されている試合の集計データをリアルタイムでシェアすることもやっていきたいです。
スコアをライブ配信するサービスはすでにありますが、その卓球特化番みたいなポジションになれればいいかなと思っています。誰でも配信できる仕組みになっているので、独自の戦術解釈を配信してくれる人が出てくると盛り上がるかなあとも思います。
他にも細かな機能は使いやすいものになっているはずなので、触ってみてください。
技術選定
旧バージョンは以下のような作りでした。
新バージョンで使ったフレームワーク、サービスは以下の通りです。
フロント
Vue.js
ミーハーなので流行りのVue.jsで作りました。Vue.jsはおろかJavascriptすらほぼ初心者だったのでいろいろと勉強しました。以前のバージョンはほとんどの処理をサーバーサイドで行っていたので、全く異なる作りになりました。
Vue.jsなり最近のjavascriptのフレームワークを使わないと、スコアの変化と同時にグラフを表示する処理は実現が困難だったと思います。ユーザーがラベルを追加する処理も同様です。
サーバーサイド
Firebase
Firebaseじゃないとリアルタイムでシェアするという機能も実現するのが大変だったと思います。
認証周りも任せっきりになったので、セキュリティも自分で管理するより安全になりました。また、デプロイも「firebase deploy」で終わってしまうので、sshで接続してみたいなことをしなくていいので非常に簡単です。
