つくりました記事。
ウデマエ-アーカイブといいます。
実は先週くらいに公開してたので今さら感はあるのですが、もしかしたら知らない人もいるかも知れないので書いておきます。
続きには、いちおう技術なブログなのでそういう内容を書きます。
イカよろしくー。
Overview
このサービスは、
- Vue.jsでできてて
- いわゆるSinglePageAppで
- データはlocalStorageにもってて
- グラフのところはGitHub - chartjs/Chart.js: Simple HTML5 Charts using the <canvas> tagです
ただVue.jsのコードまわりは勢いで作ったので参考にしちゃダメです。
しかるべきComponent化とかまったくやってなくて、無理やりViewModelを階層化して複数使ってるだけなので・・。
いまだにiPhone5sユーザーなので、解像度とかはそこメインでできてます。
PCで見ると画面広っ!ってなるかもw
ViewModel
いったいどういう塩梅でまとめるのが良いのかいつまでたってもわからない・・。
単純明快にやるとモリモリViewModelに育ってしまうし、かといって切り出すと見通し悪いし・・。
今回はストレートにモリモリ育てました。
node-sass
初めて投入しましたが思ってたより簡単に使えました。
開発環境がNodeにだけ依存するようになってスッキリ。
node-sass --output-style compressed src/style/main.scss dist/style.css
手入力辛い問題
でもどうしようもないですし・・。
どっかで画面をキャプチャしてOpenCVみたいなんで解析して・・ってのを見た気がするから、
そういうのとも連携できそうやけども。
勝ったも負けたも噛み締めて、一つ一つきっちり積み上げていくってサービスです、うん。
ほんとは任天堂さまがAPIとか公開してくれてれば自動で集計して云々できたのになー。
それこそ本家がこういうの出してくれれば良いのになー。
display: noneなcanvasに触れると死ぬ
Chart.js絡みなのかなんなのか。
- [v-cloak] で display: noneしてるとcanvasが動かなくて詰む
- タブ切り替えでdisplay: noneになってる時にグラフの更新するとw/hが飛んで詰む
なんなのこれっていう。
後からw/h設定しなおしてもダメでどうしようもなかったので、
初期でv-cloakは使わず、グラフの更新はキロクのタブを開いた時に遅延するようにしたりしてます。
今後
いちおうスプラトゥーン熱がある限り、ステージとかルールの更新は即対応します。
個人で使う分には満足してるので、特にこれといった実装予定はないのですが、
こんな機能欲しいとかあればp-r飛ばしてもらうなり、Twitterで教えてもらえるなりできればなーと。
おわりに
はてさてそんな私ですが、いま現在のウデマエはAで、主にリッター3Kを使ってます。
ここ見てくれてる人でA帯くらいの人と、プライベートマッチでガチマッチやりたいなー(チラッチラッ
NNIDはTwitterとおなじで leader22 ですよ!