0
Help us understand the problem. What are the problem?

More than 1 year has passed since last update.

posted at

updated at

刀剣乱舞のキャラの経験値を可視化するwebアプリを作った

はじめに

刀剣乱舞というゲームに登場するキャラクターの累計経験値を可視化するwebアプリ「とうらぶ練度チェッカー」を作りました🎉🎉🎉
今回はこのことについて振り返ってみようと思います!

ogp.png

刀剣乱舞公式HP

概要

トップ画面

トップ画面はこんな感じです。
刀剣乱舞のキャラクターは刀剣男士と呼ぶのですが、刀剣男士1人の練度(レベル)を調べるモードと2人の練度を比べるモードがあります。
スクリーンショット 2021-03-29 22.33.08.png

1口モード

スクリーンショット 2021-03-29 22.40.43.png
スクリーンショット 2021-03-29 22.33.33.png
ユーザー名、調べたい刀剣男士とその練度を入力して調べます。今回は「にっかり青江」という刀剣男士を1口モードで調査してみました。にっかりと笑った女の幽霊を切ったことが由来でこのような名前がついています。(にっかり青江
累計経験値をレベル上げによく使われるマップ何周分か、レベル上げ用アイテムのこんぺいとう何個分かに換算しています。

2口モード

スクリーンショット 2021-03-29 22.34.23.png
「源清麿」「水心子正秀」という2人の刀剣男士を2口モードで調査してみました。推しの2人です。好き。(源清麿水心子正秀
練度が低い刀剣男士がどれだけマップを周回したりどれだけこんぺいとうを食べれば高い方に追いつくかを調べられます。今回の場合だと水心子くんはこんぺいとうを467個食べたら清麿くんに追いつきますね:relaxed:🌸

作った動機

自分が育成してきた刀剣男士たちの成長を振り返りたいという思い、そしてあわよくば他の刀剣男士に追いつくために何百個ものこんぺいとうを頬張ったり歯を食いしばってマップ周回したりする刀剣男士の2次創作を見たいという下心から作りました。こんぺいとう食べる推し、絶対かわいいもの....。

使用した技術

サーバーサイドはGolangを使用しました。フレームワークはgin、ログ出力にzap、ORMにgormを使用し、デプロイ先はHerokuにしました。HerokuにGoのアプリケーションをデプロイするためのチュートリアルが用意されていたので基本的にはそれを参考にしました。しかしgormを使用した場合のDB接続に関する情報がほぼ見つからず少し時間がかかりました。そのうちこれに関する短い記事を書こうかなと思います。
フロントはTypeScript + Reactです。ライブラリはreact-hook-formやreact-router-domを使用しました。Reactは以前自分用日報アプリの開発にも使ったので、少し慣れてきたかな?という感じです。デプロイ先はVercelです。相変わらず便利。

公開時ツイート

自分1人で作ったサービスは今回が初めてだったのでツイートする時めちゃくちゃ緊張しました.....。
私をフォローしてくれている方にはほとんど刀剣乱舞に興味がある方はいないと思うんですが、それでも拡散に協力していただいて本当にありがたかったです🙏

振り返って

アイディアを思いついてから開発している間は推しへの想いで正気を失っているので「推しの成長を可視化したい!!!!!!!絶対これみんなも見たいでしょいっぱい使ってもらえるわ〜〜〜〜私もしかして天才か??????」という感じでアドレナリン全開!!超楽しい!!!って感じでやっていたのですが、開発がひと段落すると正気に戻ってしまい、いざ公開しようとした時「え...これ需要ある?いやない....」というお気持ちになってしまいますね。何事も正気を取り戻さないうちに事を済ませるのが大事です。
また、刀剣乱舞は二次創作が活発なジャンルです。イラストや漫画、小説などの形で積極的に推しへの感情をアウトプットしている方がたくさんいます。一方で私はイラストも小説もかけない.....。そんな私が推しへの想いを昇華させる方法としてたどり着いたのがweb開発なのかなと思いました。

お願い

前の項で「需要ある...?」と思ったという事を書いたのですが、実際に今のところあまり使われていません😭
まじで需要ない説ももちろんあるのですが、刀剣乱舞をプレイしている層に届いていないのも理由の1つだと思っています...! (Twitterのフォロワーさん400人中刀剣乱舞プレイヤーは1人のみでした)
ありがたいことに何人かには利用していただいて、「かわいい想像ができていいね」とか「OOくん、こんなにレベル上げ頑張ったのか...感慨深い」など感想をいただいているので刺さる層には刺さる...はずなのです....!!
なので、上記の公開時ツイートをRTしていただけたり、もし皆様の周りに刀剣乱舞をプレイしているご友人がいたらこのとうらぶ練度チェッカーを紹介していただけたら非常に嬉しいです..!!🙇‍♂️🙇‍♂️🙇‍♂️

終わりに

ここまで読んでいただいてありがとうございました!
もし刀剣乱舞を始めたら、皆様もぜひ遊んでみてください☺️
よかったらツイッター(@hiyoko_coder)もフォヨーしてね🐤

🌸とうらぶ練度チェッカー🌸

Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
Sign upLogin
0
Help us understand the problem. What are the problem?