ねこでじ(Nekodigi)

Nekodigi’s diary

学習中の気づきをまとめています。応援よろしくお願いします

旧版【原神】原神の聖遺物スコアを予測できるWebアプリを作った。

※最新バージョンが利用可能です

【原神】最小のモラで、最高の聖遺物を!新しくなった自作ツールを紹介。|聖遺物Sim - Nekodigi’s diary

概要

ダメージや聖遺物のスコアを計算するサイトとして、Genshin Optimizerや原神シミュなど有名なサイトがいくつかありますが、聖遺物のスコアを「予測」できるサイトが意外にも見つからなかったので作ってみました。 聖遺物のレベルとステータスを入力すると、期待できる最大スコア,平均スコア,最小スコアを予測し、スコアが高い順に並び替えてくれます。 また、大量のステータスをなるべく早く入力できるように、以下のようなステータス部分を部分スクショしたものをCtrl+Vで貼り付けるだけでAIが文字を読み取り自動入力できるようにしました。

使い方

以下のリンクから移動できます。サーバー処理を一切含んでいないので、完全に無料で提供しています! どんどん広めてください! nekodigi.github.io

Step 1 聖遺物を選ぶ

まずは、持ち物画面から調べたい聖遺物を選んでください。予測は星5聖遺物で4ステータスが揃っている場合のみ機能します。画像のような3ステータスの星5聖遺物は、Lv4で必ず4ステータスになるので、Lv4まで強化するか、強化後のステータスを仮定して次のステップに進んでください。

Step 2 聖遺物を追加する

操作画面の大きな「+」マークをクリックして、画像のような追加画面を開いてください。聖遺物のステータスとレベルを全て入力すると、警告が消えて予想スコアが画面下に表示されます。そのまま「+ Add」ボタンを押すと一覧に聖遺物が追加されます。 加えて、上記のようなステータス部分だけ切り取った画像をコピーした状態でCtrl+Vを押すと、ステータスを自動入力できます。この機能はまだ実験段階で、英語のみサポートしています。

Step 3 聖遺物を比較する

いくつかの聖遺物を追加すると、このようにスコア順に並び替えてくれます。聖遺物を強化した場合は、追加した聖遺物をクリックすると編集画面が開くので、強化後のステータスを入力してください。そうすると、予想スコアが更新され、再度スコアが高い順に並び替えられます。

おまけ

このアプリを使って実験して見たところ、始めに4ステータスが揃っていない場合はスコア50に到達するのは絶望的だということが分かりました。 一見理想の聖遺物に見えてもスコア50に到達する可能性すらないという場面も多くあり、無駄な強化を大幅に省くことができました。 このアプリを使って自己ベストのスコア49の熟知時計を作り出すことができました。

ソースコード

Githubにてソースコードを公開しています。 サーバー処理を含まずReactだけで完結しているため、比較的単純です。 画像処理にはTesseract.jsを用いています。 github.com

また、今回の制作にあたってGenshin Optimizerのサイトデザインを参考にしました。 github.com

工夫点や改善点

工夫点

Reactを使うのは初めてでしたが、値の更新に応じてリアルタイムで表示が変わるのが魅力的だったので採用しました。今回はできるだけコストをかけないことを目標に、Github Hostingを使用し、画像処理もクライアント側のTesseract.jsを使用しました。

改善点

初めてReactを使用したため、コードにかなり冗長な部分があります。特にuseRefを使っていない点や、データ保存にObjectの代わりにClassを用いている点は大きな問題点になっています。 また、デザインはFigmaで開発しましたが、Material UIを用いるとより簡単で綺麗にデザインできるので最近はそちらを使っています。