ユーザページ

苦手キー

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

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

グラフ

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

実施状況

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

グループ(組織)ページ

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

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

トップページ

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

連休初日、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」があるのですが、
グループ内で結果を共有して分析とか自動化したいね、という話があり、ユーティリティを作り始めました。

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系統は不要ですよね、と。
ローカルサーバじゃなくてラズパイでもいいかな。