シノビガミのアプリつくりました

シノビガミの代用判定時の目標値を表示するWebアプリを制作しました。

この記事は一般向けのアプリの宣伝を目的としたもので、プログラマ向けの開発周りの話は別に記事を書きます。

制作物

Webアプリなのでブラウザで開けばそのまま利用できます。モバイル端末などでブラウザのUI（アドレスバーなど）が邪魔な場合には、アプリをインストールすると普通のアプリのように使うこともできます。

対応ブラウザはChrome, Firefox, Safariの最新版です。 Edgeは今後、内部実装がChromeと同じになることが発表されているため、そのバージョンからの対応となります。 Opera, IEは動作対象外です。『対応ブラウザ』は単にそのブラウザでの使用を想定しているという意味で、動作確認済みを示しているわけではありません。正しく動作しない場合には連絡をもらえれば対応します。その際には後述の既知の不具合を予め確認して、重複のないようお願いします。

開発の経緯

新しいプログラミング言語の勉強をしていて、練習がてら何かつくろうと考えたのですが、手頃な題材が思いつかなかったので友人に何かないかと募ったところ「シノビガミの代用判定とかどうよ？」と言われたのでつくりました。

正直、代用判定で困ってるかと言われるとそうでもないし、提案の時点で「俺は紙鉛筆派だから使わんけど」と釘を刺されたのですが、題材としての難度がちょうどよかったのと、触っていて面白いおもちゃくらいにはなりそうだなという直感があったので採用しました。

開発期間は勉強時間も含めてひと月半くらいで、想定より少しかかりましたがまあ悪くない範囲。出来も弄って遊べるくらいにはなったんじゃないかと思います。

使い方

大まかな使い方として、「設定」画面でキャラクターの設定をして、セッション中は「判定」画面で諸々の操作と目標値の確認を行います。最初の画面で『開始』を押すと、「設定」画面に遷移します。

「設定」画面ではキャラクターの修得特技や忍法、ギャップの設定を行います。ギャップは直接タップして切り替えることもできますし、分野をタップすることで両脇を塗りつぶすこともできます。

モバイル端末などで表の内容を正確にタップするのが難しい場合には、表をタッチしたまま操作対象の上まで指を動かして離すという手順で操作すると、タッチされているセルの色が変わるので対象を確認しながら選択できます。

「判定」画面では特技を選択すると設定に従って目標値が算出され表示されます。「判定」画面には【経路】と【分布】の二つのモードがあり、【経路】では代用する特技とその経路、【分布】では各特技に対する得手不得手が確認できます。

アプリ内にもヘルプを用意したので詳細はそちらを参照してください。

既知の不具合

このアプリにはうまく動作していないことを確認しつつ放置している部分がいくつかあります。これらはブラウザ自体のバグに起因すると思われるため、こちらでの修正は困難です。また、これらはブラウザのバグ修正に伴い、自動的に解決される可能性があります。解決した問題についてはその旨を記述するため、解決を確認した場合にはご一報いただけると幸いです。

縦画面時に表の表示が崩れる
- 対象ブラウザ: Firefox, Safari
- 縦書きモードと表に関する不具合です。
- Firefoxでは画面サイズを変更すると直ったりするようです。
操作時に表の枠線が消える
- 対象ブラウザ: Firefox
- 表中の細い枠線に関する不具合です。
表の外枠の太さが均一でない
- 対象ブラウザ: Chrome
- 表のレイアウトに関する不具合です。
縦書きの文字がずれる
- 対象ブラウザ: Chrome (Android)
- 縦書きモードと日本語に関する不具合です。