見出し画像

はんじゅくはどのようにしてJSONを作成したのか

なんて書くと、まるでクリエイターのよう。

気取ったタイトルにはしてみたんですが、アイテム全文検索ツール「ROアイテム検索くん」は、作成するにあたって大した知識も技術もない自分がほしかったから勉強して作ってみただけ。
そんな中で少しでも楽にするためにデータをこんな風に作ったよっていうだけの、本日はそんなお話。

記事が長い割に、大したことないじゃんとか、そんなことわかるよっていう人も多くいると思うんですけど、細かいことは気にしないでほしい。

ツールを作成する上でこれだけは外せない条件

メンテナンス(データの追加)が楽なこと

ぼくは本当に飽き性で怠け者なので、毎週のパッチからデータを追加するのが大変なのだけは絶対に避けなければならなかった。

例えば、「パッチのテキストを見て、新規追加アイテムや説明文が更新されたアイテムがどれなのかを自分で確認する」なんてものは論外で、テキストファイルから自動でJSON(の元となるcsv)が作成できないとツールのメンテナンスなんてできない。
※現実にはエンチャント情報だけはどうにもならなかった

いっぱい頑張った結果、毎週のデータ追加・更新は本当に楽で、アイテム情報だけなら10分かかるかどうか程度で更新できる。
毎週一時間かかります、とかそういうのはお話にならない(やりたくないっていう意味で)ので、よくできたと思います。

ざっとやったこと

テキストファイルをcsv形式に

テキストファイルは、アイテム名のファイル、説明文のファイル、スロット情報等のファイルがあるので、それぞれを予め作成したサクラエディタのキーマクロで変換する。
やることはコメント行の削除や文字色定義の置換など。
コメント行になっている箇所を見れば追加・更新箇所はわかるんだけれど、アイテム名や説明文が修正された場合、元々は上部に存在していた記述が最下部に移動したりするので、なるべくテキスト丸ごとをcsv形式にして一括で全件更新するような作業にした。

csv形式のテキストをスプレッドシートに貼り付け

スプレッドシートのシートたち(右に職業一覧シートもある)

シートはある程度細分化して、関数でデータを作成する。

雑に関数を作ったけれど、基本的に何もしなくても説明文のテキスト情報から部位や系列を特定
そしてインデント変なことに今気がついた
部位や系列は不統一な説明文を補正

こうみると、兜の表記って結構バラバラなんすねって感じ。

スプレッドシートからJSONにしてツールに食わせる

おわり。

…とはいかず、ちょっと細かい話

不統一な表記をどう見つけようか(例は破壊不可について)

取り敢えず何でもGrepする。

破損だとか
破壊だとか

Grepする文言は何ていうかもう勘に近い。
不足があれば後から新たに見つければいいだけなので、取り敢えず思いついた文言でやってみる。

重複した記述を排除する(画像は一部のみ抜粋)。

簡単な操作はExcelくんの方がいい
本当に楽な時代ですね
なるほどね

破損しない、破損 : しない、破壊不可
なんて言うのがあるみたいですね。

スプレッドシートに関数作る。

見つけた記述に加えて元々破壊されないものを一覧に追加
TEXTJOINで正規表現用の文字列を作成
何か関数に無駄ありそう

正規表現にあてる文字列を自分で編集するとミスが出るので、まずは一覧に。
その上で、一覧を「|」つなぎにする。
あとは改行を排除した説明文から正規表現で引っ張って破壊不可なのかどうかを判定する。

こんな感じで作りました。

装備可能職業はどうしようか

まずは装備とか装備職業でGrepして頑張って見繕う。

職業に番号を付与して、ある程度の区切りで装備可能と判断する文言を決める
こいつも全部くっつける
こういう文言があれば装備不可だよ、っていうのも作る

例えばソードマンについては、「ソードマン系」は装備可能だけれど、「3次職ソードマン系」は装備不可だよねっていうそういうやつ。

否定形を先に判定して、該当無ければ肯定形を判定
装備可能なら、先に振っておいた職業の番号を設定
各職業の列をTEXTJOINでくっつけて一つの要素に
あとはQUERY関数でまとめて終わり

ベタなテキストで保持しているのは、

  • vuetifyに検索させるのにその方が楽だから

  • 何かのときのために(何のとき?)、ソースをコピーすればローカルでも動くように

そんな理由から。

エンチャント情報

こればっかりは自動化ができなかった。
エンチャントの種類ごとにもう記載がバラッバラ。
なんともできなかったので…

ニーヴ・エクセリオン・オートマティックは対応できていない

一旦は自力で全部作成して、あとは毎週差分とって更新箇所のみコピペで何とかすることに。

今作業中のやつ

こういうのは絶対に手入力してはいけない。
ミスがでるから。全部関数で作るべし。

新たなエンチャント情報を取り込むためのテンプレート

エンチャント名称から何から、無理なことを除いては関数にする。絶対に。

各エンチャントのシートを一纏めにする
アイテムIDがないと紐づけができないから、ミスがないことを確認するためのシートも作る
一纏めにした一覧から重複を排除し、番号を振る
データ量を減らすために各項目は番号だけで作成する

これでデータは出来上がり。
あとはjsで加工してvuetifyに食わせる。

終わり。

さいごに

本当はもっと細部まで記事を書けばいいんですけど、面倒でできませんでした。

まともにjs書いたのもvuetifyも初めてだったので本当に何も知識がなかった。
でもある程度ちゃんと動くものになったので、まあまあいいんじゃないでしょうか。

今まで培ってきた言語(COBOL, Java, VB.net, Delphi, Objective-C, C#)なんかは、それ自体が役に立った気はあまりしませんでしたが、ある程度の経験があれば飲み込みも早くなると思うので、何事も無駄じゃないなっていう感じでした(感想が幼稚)。

たかが娯楽でお遊びレベルのツールなんですけど、いい勉強になりました。

vuetify側の記事も書きたくなったら書くんですが、その前にまずはコードを綺麗にしてからかな…

この記事が気に入ったらサポートをしてみませんか?