「e-typing分析プロジェクト」の投稿 - Crieit

8/18進捗

2019-08-18T21:13:15+09:00

個人ページ

「サマリ」タブ

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

スピードメーター実装

react-d3-speedometer

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

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

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

タイピング練習実施状況UI改善

以前はカレンダーの日付全体を囲っていましたが、
バッジで回数も表示するように修正しました。

レスポンシブに対応しきれてなくて、スマホだとなぜかバッジ自体が非表示になるという問題が。

レスポンシブ対応

画面幅が狭まった場合にフォントサイズを縮小
テーブルを要素内スクロール
スクロールバースタイル適用

コンテナ自動リスタート設定

ホストマシンが再起動した時に自動でコンテナを再起動する設定をdocker-compose.ymlに記述してやります。

docker-composeでOS起動時にコンテナを自動起動する方法

総括

UI

UIの調整は多少必要だと思うが、最低限実用できるレベルのものはできたのではないか。UIは個人開発している野球リーグスコア管理システムで使った技術がほとんどなので、あまり技術調査しなくても実装できるようになっていたのが大きい。配色パターンも以前同僚に教えてもらったのでなんとなく理解できており、UIに関するセンスも以前に比べるとだいぶ改善したように思う。

デプロイ/インフラ

今回はラズパイへのデプロイになるが、nginxの設定でちょっとしたミスからどハマりするなど、docker-composeに対する理解はまだまだ不十分だと感じる。
どハマりするものの、問題点に自分で気づけて、自分で修正できるのは大きな収穫。

今後の展望

タイピング部分を自前で実装したらchrome拡張とか要らないんじゃ...？

問題文(日本語)をどう表示するか

タイピングに使わない区切り文字を使えばよさそう。

jqueryでタイピングゲームを作成してみた

reactで作られているタイピングゲーム

wpmの考え方入っているので使えそう。

8/17進捗

2019-08-17T23:38:57+09:00

グループページ

練習履歴タブ

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

サマリタブ

該当グループに所属するメンバーの成績のサマリを表示します。
そっか、MySQL中央値出ないんだった..(技術選定ミス)

「傾向グラフ」タブ

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

私はタイピング速度そこそこ早いけどしょっちゅう間違えます
(´・ω・‘)

ユーザ個人ページ

「苦手キー」タブ

前回、CSSの書き換えに失敗した話を書いたのですが、
同僚エンジニアさんがサクッと直してくれました（ありがとうございます...!

「グラフ」タブ

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

ユーザ＆テーマページ

ユーザページからテーマを選択すると、ユーザとテーマでフィルタした結果が閲覧できるようにしました。

8/12進捗

2019-08-12T22:00:59+09:00

ユーザページ

苦手キー

本システム一番の見せ場...のはずが、CSS書き換え効かない問題が立ちはだかる。

苦手キーの算出ロジックは実装済み。
(文字表示のみ)

グラフ

chart.jsで実装
実は時系列が左右逆
なぜかツールチップ出ない
正確率わかりにくい
レベルの境目で補助線引きたい

実施状況

タイピング練習の実施状況を可視化
スタイルに手を加えた

グループ(組織)ページ

組織に所属するメンバー全員のタイピング成績が閲覧できるページです。

パンくずリスト追加
ユーザページへのリンク追加
タブ色変更
トークン発行(ログイン)ページへのリンク追加
ロゴ変更、キャッチフレーズの追加

トップページ

コンテンツ未定のため、ロゴしかありません（笑

8/11進捗

2019-08-11T23:07:23+09:00

最低限動作するところまで来ました

reactアプリの実装も徐々に進んでいます。

昨日まではデータ登録部分の開発をしていましたが、
今日から登録したデータを分析するreactアプリの実装に取り掛かりました。

急遽グループという概念を取り入れた

基本的に単一のグループで使うという認識ですが、
まあ複数グループがあった方が使いやすいなと思って急遽DB定義などに変更を入れて、ユーザが組織に所属するという概念を取り入れました。

サンプルデータの準備

docker-composeを使っているので、初期データを用意しました。
パスワードハッシュ化まだしてないです。

mixed content...!!

CORS問題、解消していたと思ったのですが、別のマシンからサーバにアクセスする際にmixed contentエラーが発生していました。
結局、chrome extensionのpassing messageを実装することによって対処しました。

react-simple-keyboard

苦手キーなどの表示に使おうと思ってますが...。

CSSが書き換わらない

classをaddする形で書いたのですが、何度やってもDOMに反映されず、実装個所を見たら毎回デフォルトのスタイルを書き戻していました。／(^o^)＼ﾅﾝﾃｺｯﾀｲ
正直ちょっとハマったので、他のライブラリ使ったほうがいいのか、他によりよい実装方法があれば教えていただきたいです。

README書きました

画像がなくて伝わりにくいかと思いますが。
README

chrome拡張でローカルサーバーに結果を保存できるところまで実装

2019-08-11T00:41:22+09:00

連休初日、6時間費やす

苦労した甲斐あって、Docker-composeで構成したMySQL上にめでたくデータを格納することに成功。

いくつかどハマりした箇所があったので挙げておく。

CORS問題

e-typingサイト上でchrome拡張を動かしており、そこからローカルサーバに通信しようとすると、CORSが発生する。

manifest.jsonでpermissionを記述する

通信先のサーバをpermissionsに記述することで回避できる。

{
"中略":"",
"permissions": [
    "http://localhost:3000/"
  ],
}

fetchは変数名とプロパティが同じ!?

ソース上の変更点

fetchでPOSTする際に変数でencodedBodyなどと記述していたが、
nodeJS側でリクエストボディがemptyとなる状況が発生。
リクエストボディはbodyという変数で送らないと認識されない模様。
(根拠はまだ探していない)

残りタスク

あまり時間がないので使い方は後日書きます。
ソースを読んでそのまま使えそうな方はそのままお使い下さい（笑

ReactJSによるフロントUI実装
ReactJSで使用するデータの取得API(NodeJS)

e-typing分析プロジェクト始めました

2019-08-04T21:20:22+09:00

タイピング練習サイトに「e-typing」があるのですが、
グループ内で結果を共有して分析とか自動化したいね、という話があり、ユーティリティを作り始めました。

github:e-typing-extension

原理

リザルト画面にiframeを使っているので、それが表示された瞬間に処理を開始します。

あとはクエリセレクタで表示されている値を取得して、サーバに送るだけ。

現在のところこんな形で値が取れています。

{
        accuracy: "100%",
        level: "A",
        miss: "0",
        score: "237", 
        weak_point: "",
        wpm: "237.25"
}

POST先とタイミングをユーザに決めてもらうので、
サーバアドレスの入力フォームをDOMで追加しないといけないな、というところです。

現在検討中の技術

クライアントサイド

データ収集

サーバに送る前の値をchrome extensionでインターセプトすることにしました。

chrome extension
pure javascript

jQueryはもう業務でも使っていないのでpure jsで色々書けるようになった方がいいかなと。react.jsを使ったchrome extensionもあるみたいなのですが。。。

データ表示

ReactJS

これはReactJS一択でいいんじゃないですかね。
苦手なキーの表示にキーボードを表示したいけどライブラリあったかな。グラフはChart.js一択。

サーバサイド

Go言語あるいはNodeJS/Typescript

チャレンジするならGoだと思いますが早く実用に載せたいので応急措置的にNodeでもいいかなぁ。

docker/docker-compose

Go環境
DB
- おそらくMySQL
react統合するかどうか

docker swarm使おうかとも思ったのですが、今回はLAN内に限定した使い方にしようかと思っていて、ローカルサーバに2系統は不要ですよね、と。
ローカルサーバじゃなくてラズパイでもいいかな。