続:MiHoMo APIをNode.jsで叩いてみる
はじめに
この記事は前後編に分けて作成した記事の続きです。もしよければ、前編、後編から御覧ください。
前置き
さて、前回まではコマンド上でMiHoMo APIを動かしていました。
今回ではコマンドライン上で動かしていたものを実際にアプリとして動かします。
アプリといっても、今回は使うのはDiscord.jsになります。
環境
node.jsとdiscord.jsが動けば問題ないと思います。
- OS: Windows 11 pro
- Node.js v21.7.1
- discord.js v14.6.0
- Windows ターミナル
- VScode
Discord Botについて
discord.jsは、DiscordにてBotを作るために使用されるパッケージです。
調べれば詳しい作り方が出てきますので、ここでは省略します。
ドキュメントを載せておきますので、わからない人はこちらを御覧ください。
やいたいこと
今回やりたいこととしましては、コマンド入力→キャラ選択→カード生成の一連の流れを作ることです。
discord.jsには、モーダルウィンドウやボタン、セレクトメニューなどの機能がありますので、そちらを活用していきたいと思います。
前編の方でも軽く触れましたが、私の知人が運営している、 Genshin Impact (JPN) のビルドカードを参考に作成していきます。
作成
ここから実際に作成をしていきます。
ビルドカード生成とbot作成を行っていきます。
ビルドカード生成
APIでの情報取得から画像生成までは前回までの記事で作成をしましたが、残念ならがゲームのアップデートなどでうまく動かないようです。
デザインの調整も必要そうですので、まずは画像生成の部分をすべて作り直します。
基本的な動作やコードについては前回までと全く同じです。
node.jsを使ってapiを叩き、必要なデータのみを抜き出しcavasパッケージにて画像化します。
そしてできたものがこちらです。
前述の通り、デザインの大幅な調整を行いました。前回の記事から1年以上経っていますので、スコアもアップしていますね。
生成の流れとしては今までと同じです。
APIを叩いて、そこから必要な情報のみを抜き出して別のJSONとして保存しています。
少し回りくどいやり方ですが、過去の私が何故かそうしていたのでそのまま使いました。
どうしても素人が作ったデザインにはなってしまいますが、そこそこ見やすくて気に入っています。
Discord bot作成
いよいよbotの作成に移ります。
botの作り方は色々ありますが、今回はdiscord.jsという、JavaScript(Node.js)で作れるものを採用しました。
JavaScript以外にはPythonだったりRubyだったりと色々ありますので好みのものを使って構いません。私のおすすめはJavaScriptです。
モーダルや選択肢などいろいろ触ってできたものがこちらです。
生成については上記の動画の通りになります。
コマンド→UID入力→API取得→キャラ選択→ビルドカード生成の流れですね。
最後に
今回は、前回までに途中だったビルドカード生成機を実際に使えるように形にしてみました。
感想は前回と同じで「大変だった」です。
画像生成の一連は一度作っているので難なくできましたが、Discord bot作成が大変でした。
今までに何度も作ってるので、すぐできると思っていましたが、APIとの兼ね合いや先に作った部分の調整などで結構時間がかかりました。
これにて完成、 MiHoMo APIをNode.jsで叩いてみる シリーズは完結です。
とはいっても、動画を見ていただいた通り生成速度が遅いです。今後は生成速度をあげたいと考えてはいますが、やるかどうかは気分次第なのでやらない可能性が高いです。
全体的に気に入っていますので、作ってよかったなと思います。
ここまでお付き合いありがとうございました。
botのコードは公開予定はありませんが、ビルドカード生成部については後日、GitHubにて公開しようと考えているので、少々お待ち下さい。
リポジトリ
GitHubにてビルドカード生成部のコードをアップロードしました。
分かる人向けなので説明は適当です。
ご自由に使用してください。
参照
崩壊: スターレイル
MiHoMo API
崩スタ - 遺物スコア計算機
【崩壊:スターレイル】遺物のメイン・サブステータスの種類と最大値
Image resources repo
Genshin Impact (JPN)
discord.js Guide
Discussion