console.lealog();

@leader22のWeb系に関する勉強めもブログですのだ

スプラトゥーンのウデマエを可視化するサービスを

つくりました記事。
ウデマエ-アーカイブといいます。

実は先週くらいに公開してたので今さら感はあるのですが、もしかしたら知らない人もいるかも知れないので書いておきます。

ika.lealog.net

続きには、いちおう技術なブログなのでそういう内容を書きます。
イカよろしくー。

Overview

このサービスは、

  • Vue.jsでできてて
  • いわゆるSinglePageAppで
  • データはlocalStorageにもってて
  • グラフのところはnnnick/Chart.js · GitHubです

ただ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は使わず、グラフの更新はキロクのタブを開いた時に遅延するようにしたりしてます。

イカモドキ

フリーフォント「イカモドキ」 | あらむぎ

ナイスなフォントです。

ただ欲をいうと、ステージ名だけでも漢字対応が欲しかったです!
あと - (半角ハイフン) がイカっぽいのはなんでなんだぜ!w

今後

いちおうスプラトゥーン熱がある限り、ステージとかルールの更新は即対応します。

個人で使う分には満足してるので、特にこれといった実装予定はないのですが、
こんな機能欲しいとかあればp-r飛ばしてもらうなり、Twitterで教えてもらえるなりできればなーと。

おわりに

はてさてそんな私ですが、いま現在のウデマエはAで、主にリッター3Kを使ってます。
ここ見てくれてる人でA帯くらいの人と、プライベートマッチでガチマッチやりたいなー(チラッチラッ

NNIDはTwitterとおなじで leader22 ですよ!