2019-09-18に更新

タイピングスコア管理システムを作った話

image

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

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

開発期間

基礎開発: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で作成しました。

グループページ

練習履歴

image

サマリ

image

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

傾向グラフ

image

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

個人ページ

サマリ

image

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

スピードメーター実装

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

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

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

練習履歴

image

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

苦手キー

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

グラフ

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

実施状況

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

スマートスピーカー連携

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


ckoshien

個人開発4年目。普段はアプリケーションエンジニア。 ReactJS/NodeJS/ReactNative/Java

Crieitは個人で開発中です。 興味がある方は是非記事の投稿をお願いします! どんな軽い内容でも嬉しいです。
なぜCrieitを作ろうと思ったか

また、「こんな記事が読みたいけど見つからない!」という方は是非記事投稿リクエストボードへ!

こじんまりと作業ログやメモ、進捗を書き残しておきたい方はボード機能をご利用ください!

ボードとは?

関連記事

コメント