見出し画像

イジンデンデッキ作成アプリを作りました


はじめに

▲実際のアプリ画面。

 この記事で紹介するイジンデンデッキ作成アプリは、スマホやパソコンのウェブブラウザで使えるアプリです。カード一覧からカードを選んでデッキレシピを作り、カード画像を並べて表示したり、レシピをブラウザに保存したりできます。

 元々は私自身がブログ用に使うために作ったものですが、それなりにちゃんと使えるものができたので、次のページで公開しています。初めて利用される際には「ヘルプ」をご一読ください。

特徴や機能

カード枚数を数字で表示

▲カード画像を枚数ぶん並べるよりもこういう方が好き。

 ポテト好みの表示方法です。このためにこのアプリを作ったといっても過言ではありません。

 イジンデンの通常構築ルールでは同名のカードは最大4枚ですが、アプリとしては枚数に上限は設けていません。カード資産を一覧にするなど、デッキ作成以外の使い方もできるかもしれません。

メインデッキとサイドデッキを別個に管理可能

▲「メインデッキ」は非公式用語です。40枚以上で作るデッキの方を指します。

 BO3向けのデッキレシピを作れます。もちろんメインデッキのみ利用してBO1向けのレシピも作れます。

 こちらもメイン、サイドとも、アプリとしては枚数に上限はありません。非公式フォーマット「統領戦」のデッキレシピの作成などにも使えるかもしれません。

 デッキレシピを画像として保存したい場合は、この画面を OS のスクリーンショット機能で保存してください。アプリの「ヘルプ」タブには、Android や iPhone の画面外まで含めたスクリーンショットを取る方法のページへの案内を載せています。アプリ自身には画像保存機能はありませんのでご承知ください。

デッキレシピをブラウザに保存可能

▲小さい画像がお好みならこの画面をスクショするのもあり。

 「マイデッキ」機能として、作成したデッキレシピを端末のブラウザに保存し、アプリやブラウザを閉じて開き直した後でまた読み込むことができます。アプリとしては保存できるレシピの数に上限は設けていないので、容量の許す限り保存できます。

 保存先が端末のブラウザのため、ブラウザまたぎや端末またぎでは同じマイデッキを利用できない点にご注意ください。

手札シミュレータ

▲ガーディアンはタップするかマウスカーソルを当てれば見えます。

 ゲーム開始時のガーディアンと手札、およびその後のドローをランダムに選択して表示する機能です。一人回しが捗ると思います。ポテトもこれで執筆デッキの1ターン目ストウ古墳を楽しんでます。

開発の経緯

 このアプリは、自分の note に貼るデッキ画像を作れるアプリが欲しい、という経緯で作り始めました。同様のアプリでは先人・さとりんさんの「イジンウィジェット」があり、私もそのユーザの一人でした。ただ、私は各カードの枚数を数字で表すのが好みなのに対して、イジンウィジェットは枚数ぶんだけ画像を並べるようになっています。

過去記事より、画像編集ソフトで作った、ポテト好みのデッキ画像。
▲同じデッキが「イジンウィジェット」だとこうなります。

 自分が欲しいものはちょっとしたプログラムとデザインで実現できそうだと思い、必要最小限の機能と見た目で作ったのが、今年7月ごろに作った最初期のバージョンです。本当にただデッキレシピを作るだけのもので、スマホ表示にも対応していない、自分用のツールでした。

▲最初期の画面。簡素で、いかにも自分用です。
▲メイン・サイド別個管理や枚数の表示方法は既に確立していました。

 その後、10月頭に技術の勉強がてらスマホ表示に対応させ、イジンデン仲間の友人にこのアプリを見てもらいました。すると結構気に入ってくれて、動作確認してくれたり、要望を返してくれました。そして、せっかくだからと要望に答えていくうちに、作ること自体や作るための技術を学ぶことが楽しくなり、機能も「必要最低限」から増えて、現在に至ります。

ちょっとだけ技術の話

 現在は React Bootstrap で作っています。当初は手軽さを優先して jQuery と Bootstrap で作っていましたが、機能が増えていくにつれて jQuery を用いた命令的なプログラミングが辛くなり、宣言的な React で書き直しました。

 マイデッキを保存するデータベースには IndexedDB を使っています。初めは localStorage に保存していましたが、Mac 系だとアプリに7日間アクセスがないと localStorage のデータが消えてしまう(参考)ようなので切り替えました。

今後の予定

 マイペースで機能追加などしていこうと思います。

謝辞

 友人・Chrono くんはアプリの動作確認、周囲への宣伝、要望出しなどをしてくれて、アプリ改善の大きな助けになってくれました。特に iPhone での動作確認は、ポテトが Android ユーザのため、とても助かりました。ありがとう! 今後もよろしくね!