2016.03.11

プランニングポーカーのWebアプリを作った話

亀山大樹

リーン開発チームの亀山（ @kametec_jp ）です。最近のブームは、Kotlinです。

私が所属する開発チームでは、案件見積もりの際にプランニングポーカーを活用しています。
活用してるメリットとしては、見積もり段階でさまざまな観点（デザイナーやエンジニアやQA等）の意見を聞けるので、どのように仕様変更するのが工数が少なくリリースが可能かの議論する場として非常に役立っています。

ただ、何度も行っているうちに下記のデメリットが気になるようになってきました。

（1）ディレクターから「毎回カードを配ったり回収したりするのが面倒」という意見
（2）人数が多くなった際に、それぞれのポイントと意見を把握するのに手間取る

不を解消するべく要件を考える

1つの画面に全員のポイントを表示できる
データを保持する必要がなさそうなのでDB不要、ログもためる必要なし
サーバーを立てても良いけど、野良サーバーは増やしたくない
他チームのディレクターも簡単に扱えるように、導入＆起動が簡単なのものが良い

当初は、iOSやAndroid、Windows Phone、Firefox OSのスタンドアローンアプリを作ろうかと思ったのですが、
「（2）人数が多いとき分かりにくい問題」に対応するために、プロジェクターに参加者の選択したポイントを表示できた方が良いのではという結論になりました。

やりたいことのイメージとしては下記の図のような形です。

システム構成を考える

リアルタイムに皆で投票してる感を演出するため、1つのWeb画面に対して操作を行う

WebSocket対応必須。（同じネットワーク内で使用する想定なので、難易度は低い）

WebSocketをサポート、かつWebシステムの環境構築＆実行が簡単なもの

GoでWebSocket、Scala＋Skinny、Java＋Dropwizard、いっそKotlin……
考えれば考えるほど、個人の好みで良い気がしました。
ただ、ディレクターでも簡単にサーバー実行環境の構築含めきる必要があったため、JavaのSpringBootを採用しました。
ディレクターのPCにはJavaがデフォルトでインストール済みなので、java -jar hoge.jar で実行できるのは強いです。

当初は選択画面と投票結果画面の2画面での構成を予定していたが、1画面でもできそうなのでSPA化

選択画面：「名前」と「ポイント」を選択するとリアルタイムに投票結果画面へ通知
投票結果画面：初期表示は「名前」のみの表示、【show】ボタンを押すと投票者全員の「ポイント」が表示

考え出すときりがない

SPAでやるならReactで作ってしまおう！とか、テスト書いてないとかお前それ……とか思うことは色々あるのですが、業務の空き時間に作成するものに対して、そこまで時間を掛けたくなかったので、テストは書かずに作成してました。
（Mavenのオプションでテストをスキップする形で実行用のjarを作成）
mvn package -DskipTests=true

完成に向けて

あれこれ考えても物ができなければ始まらない！ということで、プロトタイプ版を2、3日で作成。
チーム内で何度か使用＆フィードバックを得て改良し、画面仕様がほぼ確定した際に、デザイナーが画面をデザインしてくれたり、フロントエンドエンジニアにアニメーション付けたりしてもらい、いい感じになりました！

投票結果画面