針が動くアニメーションもあるのでUIがリッチに。
with rollup
オプションをつけてGROUP BYしたので最後の行を切り取ってスピードメーターの隣に実装した。
以前はカレンダーの日付全体を囲っていましたが、
バッジで回数も表示するように修正しました。
レスポンシブに対応しきれてなくて、スマホだとなぜかバッジ自体が非表示になる
という問題が。
ホストマシンが再起動した時に自動でコンテナを再起動する設定をdocker-compose.ymlに記述してやります。
UIの調整は多少必要だと思うが、最低限実用できるレベルのものはできたのではないか。UIは個人開発している野球リーグスコア管理システムで使った技術がほとんどなので、あまり技術調査しなくても実装できるようになっていたのが大きい。配色パターンも以前同僚に教えてもらったのでなんとなく理解できており、UIに関するセンスも以前に比べるとだいぶ改善したように思う。
今回はラズパイへのデプロイになるが、nginx
の設定でちょっとしたミスからどハマりするなど、docker-composeに対する理解はまだまだ不十分だと感じる。
どハマりするものの、問題点に自分で気づけて、自分で修正できるのは大きな収穫。
タイピング部分を自前で実装したらchrome拡張とか要らないんじゃ...?
タイピングに使わない区切り文字を使えばよさそう。
wpmの考え方入っているので使えそう。
該当グループに所属するメンバーの成績のサマリを表示します。
そっか、MySQL中央値出ないんだった..(技術選定ミス)
スコアは単純にWPMと正確率に相関があるので、
WPMと正確率をそれぞれ軸に持つグラフを作成してみた。
右に行くほどタイピング速度が速く、上に行くほど正確にタイピングできることを示す。
私はタイピング速度そこそこ早いけどしょっちゅう間違えます
(´・ω・‘)
前回、CSSの書き換えに失敗した話を書いたのですが、
同僚エンジニアさんがサクッと直してくれました(ありがとうございます...!
本システム一番の見せ場...のはずが、CSS書き換え効かない問題が立ちはだかる。
苦手キーの算出ロジックは実装済み。
(文字表示のみ)
組織に所属するメンバー全員のタイピング成績が閲覧できるページです。
コンテンツ未定のため、ロゴしかありません(笑
reactアプリの実装も徐々に進んでいます。
昨日まではデータ登録部分の開発をしていましたが、
今日から登録したデータを分析するreactアプリの実装に取り掛かりました。
基本的に単一のグループで使うという認識ですが、
まあ複数グループがあった方が使いやすいなと思って急遽DB定義などに変更を入れて、ユーザが組織に所属するという概念を取り入れました。
docker-composeを使っているので、初期データを用意しました。
パスワードハッシュ化まだしてないです。
CORS問題、解消していたと思ったのですが、別のマシンからサーバにアクセスする際にmixed contentエラーが発生していました。
結局、chrome extensionのpassing messageを実装することによって対処しました。
苦手キーなどの表示に使おうと思ってますが...。
classをaddする形で書いたのですが、何度やってもDOMに反映されず、実装個所を見たら毎回デフォルトのスタイルを書き戻していました。/(^o^)\ナンテコッタイ
正直ちょっとハマったので、他のライブラリ使ったほうがいいのか、他によりよい実装方法があれば教えていただきたいです。
画像がなくて伝わりにくいかと思いますが。
README
苦労した甲斐あって、Docker-composeで構成したMySQL上にめでたくデータを格納することに成功。
いくつかどハマりした箇所があったので挙げておく。
e-typingサイト上でchrome拡張を動かしており、そこからローカルサーバに通信しようとすると、CORSが発生する。
通信先のサーバをpermissions
に記述することで回避できる。
{
"中略":"",
"permissions": [
"http://localhost:3000/"
],
}
fetchでPOSTする際に変数でencodedBody
などと記述していたが、
nodeJS側でリクエストボディがemptyとなる状況が発生。
リクエストボディはbody
という変数で送らないと認識されない模様。
(根拠はまだ探していない)
あまり時間がないので使い方は後日書きます。
ソースを読んでそのまま使えそうな方はそのままお使い下さい(笑
タイピング練習サイトに「e-typing」があるのですが、
グループ内で結果を共有して分析とか自動化したいね、という話があり、ユーティリティを作り始めました。
github:e-typing-extension
リザルト画面にiframeを使っているので、それが表示された瞬間に処理を開始します。
あとはクエリセレクタで表示されている値を取得して、サーバに送るだけ。
現在のところこんな形で値が取れています。
{
accuracy: "100%",
level: "A",
miss: "0",
score: "237",
weak_point: "",
wpm: "237.25"
}
POST先とタイミングをユーザに決めてもらうので、
サーバアドレスの入力フォームをDOMで追加しないといけないな、というところです。
サーバに送る前の値をchrome extensionでインターセプトすることにしました。
jQueryはもう業務でも使っていないのでpure jsで色々書けるようになった方がいいかなと。react.jsを使ったchrome extensionもあるみたいなのですが。。。
これはReactJS
一択でいいんじゃないですかね。
苦手なキーの表示にキーボードを表示したいけどライブラリあったかな。グラフはChart.js
一択。
チャレンジするならGo
だと思いますが早く実用に載せたいので応急措置的にNodeでもいいかなぁ。
docker swarm使おうかとも思ったのですが、今回はLAN内に限定した使い方にしようかと思っていて、ローカルサーバに2系統は不要ですよね、と。
ローカルサーバじゃなくてラズパイでもいいかな。