Work The Dial - 511V41's diary

<–– Back

CHE READERというツールを作った

前回

カルネージハートエクサ(詳細)からエクスポートしたチームデータを閲覧できるツール。前回はNode.jsで動かすスクリプトでしたが、今回はブラウザ版です。

gh-pages で公開しています。こちらからどうぞ。リポジトリはこちら

とりあえずざっくりと素朴に作って一区切りついたので公開しました。今後チマチマと手を加えていけたらいいかなと…。

進歩した点

  • 誰でもブラウザで簡単に利用できるようになった
  • チームのエンブレム画像を表示できるようになった

技術的なこと

データをデコードする部分はほとんど流用できたので、基本的にはTypeScriptでReactを書いてガワを新作したといったところです。

ただし追加で、エンブレム画像も表示できるようになりました。↓の「アフロ」というアイコンがそれです。

エンブレム画像が取れている様子

エンブレム画像は32x32で、データとしては

  • カラーパレット
  • 各座標がカラーパレットのどれを使っているか

が入っているので、そのとおりにCanvasで描画することで表示できました。案外簡単。

カラーパレットはRGBが28〜228でAが0〜255というなんだか良くわからない感じだったので

// rgbは0〜200に修正済み
const r = (color.r / 200) * 255;
const g = (color.g / 200) * 255;
const b = (color.b / 200) * 255;
const a = color.a / 255;
context.fillStyle = `rgba(${r},${g},${b},${a})`;

こういう風にしました。

また、フォーメーション情報も取れてはいるのですが、まだ表示していません。これもCanvasで描画することになりそう。

ReactでCanvasを扱うのはちょっと面倒なことにならないかな?と不安でしたが useRefuseEffect を使えば案外すんなりいきました。React Hooks最高!

CardやButtonのようなコンポーネントにはMaterial-UIを使っています。簡単に導入できて便利。TSのバンドルなどにはParcel v2を使っています。parcelでTS書くの本当にDXが良いのでオススメ。

今後改善したい点はパフォーマンスですね。というのも、このツールは基本的に「たくさんのチームデータから目当てのものを探す」ために使うものなので、大量のファイルを捌けないと不便です。なんとかします。

なんだかカルネージハート自体を遊ばずに周辺ツールばかり作っている気がしますが…。とりあえず以上。