MiHoMo APIをNode.jsで叩いてみる 後編
はじめに
この記事は前回の続きです。まずは前編記事から読むことをおすすめ致します。
なお、この記事ではビルドカードを作る流れをまとめたもので、作り方を解説する記事ではありません。
今回のコードについて
前回はhttpsモジュールを使ったリクエストを行いました。
しかし知人から「fetchのほうが扱いやすいよ！」と聞いたので、この記事ではhttpsではなく、fetchを使った開発を行っています。
どちらがいいかはわかりません。
動作環境
前回と同じです。
- OS: Windows 11 pro
- Node.js v18.16.1
- Windows ターミナル
- VScode
ビルドカードを作る
今回の記事ではビルドカードをある程度形にするところまでを考えています。
順番に行った作業について記載していきます。
必要な情報を取得する
まずはビルドカードで必要な情報について考えていきます。
前回に引き続き 崩スタ - 遺物スコア計算機 を参考に考えていきます。
取得する情報
取得する必要のある情報を軽くまとめるとこんな感じですかね。
- キャラクターステータス
- レベル
- 属性・運命
- HP・攻撃力等のステータス
- 軌跡
- 星魂
- 装備
- 光円錐
- 遺物
文字にすると割りと少ないように見えますが、これに加えてそれぞれのアイコンのパスやレベル、ステータス、スコアの計算などがあります。結構大変です。
スコア計算に付いて
計算式については前回も記載しましたが以下の通りになります。
- メインスコア
遺物のメインステータスのスコア
スコア = (遺物のレベル + 1) ÷ 16 × 重要度 × 50 - サブスコア
遺物のサブステータスのスコア
スコア = 値 ÷ 理論上の最大値 × 重要度 - 遺物の最終的なスコア
遺物スコア = メインスコア + サブスコア
重要度と最大値につきましては、上記で挙げた 崩スタ - 遺物スコア計算機 と 【崩壊：スターレイル】遺物のメイン・サブステータスの種類と最大値 を参照して作成をしていきます。
これらを元に情報を取得・計算していきます。
なお画像につきましては、MiHoMo APIの方で公開されている Image resources repo をcloneして使用します。
デザインについて
デザインを語るほどデザインができるわけではありませんが...デザインも大事であるということだけは書いておきます。
視覚的情報 は人間がものを認識するとても大きな要素になります。
今回のビルドカードに関して、ダサい・見にくい等の問題があっては良いデザインとは言えないでしょう。
...と言いましても実際にこれをクリアできるかどうかは私もわかりません。
そんなこんなで深夜に私の頭の中にあるイメージを実際に形にしたデザイン案がこちらです。
Aviutlで作成
途中であきて途中までしか作ってませんしかなりズレてて雑ですが、あくまで雑な案ですからこちらで問題ないでしょう。
実際に完成したものについてはデザインが異なりますが、こちらのデザイン案を元に作成しました。
生成方法
ではビルドカードを生成する方法を考えていきましょう。
ビルドカードは最終的には画像形式で出力をしますから、何かしら 画像を生成する 技術が必要になりますよね。
今回は色々試した結果、一番やりやすかった node-canvas を使用します。
web開発で使うcanvasをnode.jsに移植したやつですね。
こちらを使って画像を生成していきます。
完成(仮)
悪戦苦闘の結果、なんとか形にすることができました。
実際に実行をして完成したものがこちらです。
当初のデザインとは背景や配置が代わりました。
制作期間中もかなりやり込んでいましたので、スコアも結構伸びましたね。
コードにつきましてはここで掲示すると長くなりすぎてしまうことや、まだ開発版であるので控えさせて頂きます。
また、今後についても公開をする予定はございません。
今後の予定としては
- ステータスをすべて表示させる
- スコア表示のデザインの変更
- 遺物のセットボーナスの表示
- 実機の作成
- 速度を上げる
などを行っていきます。
理想はWeb環境での実装なんですが、難しそうならDiscord botにでもしようか検討中です。
ソフト(アプリ)は勝手が悪いので避けますが。
感想
とっても大変だった、というのが一番の感想です。
APIを使うということや実際に何かを作り上げるということ、知らなかった技術を初めて使うなど、やったことがないことばかりでした。
ずっとVScodeとブラウザとにらめっこです。それゆえとても大変でしたが、実際に少しづつではありますが形になって、完成に近づいていくのは達成感があり非常に楽しかったです。
この1週間とちょっとを費やした価値があったと思います。
最後に
二回に分けてMiHoMo APIを使ったスターレイルのビルドカードを作成する過程について書いてきました。
何かを作り上げたことが私はあまりなかったので、この機会に開発版ではありますが開発をすることができて良かったと思います。
既存のものの方がデザイン面も速度もクオリティも高いので、わざわざ私が作る必要はありませんでしたが...やっぱりやりたいと思ったことをやりたいうちにやる、これは大切だと思いました。
時間が経つとどうせやらないし....
これにてMiHoMo APIをNode.jsで叩いてみるは完結致しました。
執筆はまだまだ初心者ですので、ご意見・ご感想等ありましたらお願いします。
参照
崩壊: スターレイル
MiHoMo API
崩スタ - 遺物スコア計算機
【崩壊：スターレイル】遺物のメイン・サブステータスの種類と最大値
Image resources repo
Discussion