プランニングポーカーをVue+websocketでつくってみた
作ったものの雰囲気は以下の画像を見てもらえればわかると思う
プランニングポーカー大きさわかりにくい問題
プランニングポーカーをやる機会がちょくちょくあり、それについて以下のような話を耳にしたことがあった
- ポイントの差異が直感的ではない
- 8ptは1ptの8倍ある。8倍ってことを意識できてるのかな？
最近は趣味でVue.jsを触ってることも多かったのと、今更感あるけどwebsocketを使ってみたいな〜と思ってたので、それらを利用して自分で作ってみた
//hatenablog-parts.com/embed?url=https%3A%2F%2Fgithub.com%2Fmugi-uno%2Fplahhhh
使ったのは
- Vue.js 2.0
- Vuex
- Vuetify
- express
よかったこと
人によって好き嫌いありそうだけど、Vuetifyが結構よかった。
見た目がイケてたので軽い気持ちで突っ込んでみたけど、 必要な要素は一通り用意されてるし、導入も苦労がなかった。
基本的に全てのコンポーネントを *.vue ファイルにしてcssもその中に書いていった。
大きな規模でデザイナーさんがいたりすると違う苦労が出てきそうだけど、個人の趣味で使うぶんには全然コレでいいじゃん！って感じだった。
たいへんだったこと
websocketによるデータのやり取りとVuexによるfluxフローを繋ぐのがややこしかった。
Vuexにプラグインの仕組みがあるので、そこで適宜Vuex向けにmutationをコミットする感じだったけど、なんかどうにもコードが冗長になってワケがわからなくなってた。
あとはまあ、とりあえず細かいことは考えずに作っていったので、
- DBへのデータ保存はまったく考えてない。全部メモリで動いてる
- ソースが汚い
みたいな問題が密かに残っている
つかってもらってみた
実際にお仕事でプランニングポーカーをする際に使ってもらってみた。
結果として、当初の動機だったポイントの大きさの可視化ではなく、 コンセンサスが取れた場合に派手に表示されることのウケがよかった。
コンセンサス＝良い！という考えはそれでいいのかという気もするが、 とりあえず賞賛されて嫌な気持ちにはならないし、それがよかったのかもしれない。
おためし
herokuボタンがあるので、自由に試してもらえば良いかなと思う。
私の無料dynoに乗ってるのも適当に公開してます↓