タイピングスコア管理システムとは

弊社では、業務以外に社員が自由にものを作る取り組みがあり、
その一環としてタイピングスコアの管理システムを試作、社内で運用しています。
ボードの連載を読んでいただいていた方にはサマリとなってしまいますが。

開発期間

基礎開発：2019/8/4-18(2週間)

開発メンバー

2人(85%:15%ぐらいの割合)

なぜタイピングなの？

弊社では速くて良いコーディングには速いタイピングが必要という考えのもと、社員が週2回以上タイピング練習をするようにしています。
これまでは各自が練習結果をスプレッドシートに記録する形にしていましたが、ふと「自動化したらいいんじゃない？」との一言でまず私が勝手に作り始めました。社内で運用するシステムとして、raspberry piにデプロイして運用しています。

現在のシステム構成

• raspberry pi 3B+ 1台
• google home mini 1台

使っている技術

• docker-compose
  • portainer(dockerステータス管理)
  • nodeコンテナ x2 (APIサーバ、reactビルド用)
  • nginx
  • mysql
  • voicetext変換サーバ
• ReactJS
• NodeJS
• MySQL
• voicetext API(google home miniに結果をしゃべらせています)
• chrome extension

機能紹介

chrome-extension

ブラウザからタイピング結果を取得し、サーバにPOSTするスクリプトをchrome extensionで作成しました。

グループページ

練習履歴

サマリ

該当グループに所属するメンバーの成績のサマリを表示します。

傾向グラフ

スコアは単純にWPMと正確率に相関があるので、
WPMと正確率をそれぞれ軸に持つグラフを作成してみました。
右に行くほどタイピング速度が速く、上に行くほど正確にタイピングできることを示します。

個人ページ

サマリ

テーマでGROUPBYした結果を表示

スピードメーター実装

• react-d3-speedometer

針が動くアニメーションもあるのでUIがリッチに。

ダッシュボード(要約)実装

with rollupオプションをつけてGROUP BYしたので最後の行を切り取ってスピードメーターの隣に実装しました。

練習履歴

• オレンジ中心の配色に
• テーブルヘッダのフォント縮小
• 50%ぐらいレスポンシブになった
• ページネーション追加＆スタイル修正

苦手キー

デザインが得意な同僚エンジニアさんに本領発揮していただいたところ。
失敗した回数が多いほど濃く染まります。

グラフ

日付でGROUP BYした結果をグラフにしました。

実施状況

カレンダーにタイピングの実施状況を可視化しました。

スマートスピーカー連携

voicetext APIを使用してテキストを音声に変換し、google home miniにキャストしてしゃべらせています。
google-home-voicetext