New3DS から利用可能なロマサガ2 のツールを Elm で作った

昔々、Newニンテンドー3DS (以下、New3DS) からロマンシング サ・ガ2 (以下、ロマサガ2) のデータを参照するツールを Elm で作りました。
作ったものの、これまで特にネタにしていなかったので今回記事にすることにしました。

\# 当記事内では Elm の技術的な話はそんなにしていません。
\# Elm で開発されたツールの事例ということでおひとつ。


## ロマサガ2 って何だ

1993年にスーパーファミコン用の RPG として当時のスクウェアから発売されたゲームソフトで、「フリーシナリオ」「閃き」「陣形」「継承」といったゲームシステムが特徴です。
2010年以降には種々のプラットフォームで移植版やリマスター版が発売されています。


## ツールを作った動機

1. 当時、入浴のお供に New3DS でロマサガ2 をプレイしていた。
2. ロマサガ2 の「閃き」に関する情報を New3DS で参照したかった。
3. New3DS で閲覧するのにいい感じのサイトが見付からなかった (New3DS のブラウザはページの読み込みが遅いので、できれば 1つの画面で完結しているのが望ましい) 。

というわけで自分で作ることにしました。


## 作ったもの

https://romasaga2-spark.web.app/spark_from_chara.html

### New3DS での表示

![Elmアドカレ-New3DS版画面.JPG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/73432/fd6fa56c-751f-647b-4673-59f91faa36ad.jpeg)

### PC での表示

![Elmアドカレ-PC版画面.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/73432/a7969d1d-0b6f-2b8a-85ab-580ccd7ad3bb.png)

### スマホでの表示

![Elmアドカレ-スマホ版画面.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/73432/435e8157-8547-cc9a-663f-fc506da8c775.png)


## ソースとか

https://github.com/ossan-pg/romasaga2_spark


## 何ができるツール？

各キャラクターの閃き可能な技が分かります。
また、技を閃くのに適したモンスターの情報が分かります。

ロマサガ2 ではプレイヤーが「この技を閃かせよう」と思っても、そのためには閃きに関する色々な条件を確認する必要があり、なかなか面倒くさいです。
このツールがあるとその辺を楽できます。
ただし、ある程度のゲーム知識がある前提のため、完全な初心者にとっては若干不親切かもしれません。

<details><summary>**閃きの仕様 (の概要)**</summary><div>

### ロマサガ2 の閃きの仕様

ロマサガ2 では、戦闘中にパーティーキャラクターが攻撃を行うと技を閃く (覚える) ことがあります。
キャラクターが技を閃くための主な条件として「キャラクターの閃き適性」「技の派生」「閃き確率」の 3つがあります。

#### キャラクターの閃き適性

各技に対する「閃き可」or「閃き不可」 (**閃き適性**) が各キャラクターに設定されています。
つまり、閃きたい技がある場合はその技を閃くキャラクターをパーティーに加え、行動させる必要があります。

#### 技の派生

各技について、その技 (**派生先技**) を閃く元となる技 (**派生元技**。通常攻撃を含む) が設定されています。
多くの技は通常攻撃から閃きますが、特定の技からのみ閃く技も存在します。
また、派生元の技が複数設定されている技も存在します。

#### 閃き確率

派生元技と派生先技の組み合わせごとに、**閃き難度**が設定されています。
そして、各モンスターには**技レベル**が設定されています。

キャラクターがモンスターを攻撃したとき、攻撃対象モンスターの**技レベル**と**閃き難度**の差によって**閃き確率**が決定します。
この**閃き確率**が、キャラクターが技を閃く確率になります。
基本的にモンスターの**技レベル**が高いと**閃き確率**も高いです。

</div></details>


## 開発アレコレ

### 開発環境

- Visual Studio Code＋プラグイン色々
  - コード書いたり。
- GitHub
  - コード置いたりタスク管理したり。
- Travis CI
  - テスト実行したりデプロイしたり。
- Firebase Hosting
  - デプロイ先。

当時は GitHub Actions を使えなかったのでこの構成ですが、今なら全部 GitHub に置くのが楽だと思います。

### システム構成

フロントエンド (Elm＋SASS。あと HTML が少し) だけです。
Web API を介してバックエンドと通信し、さらにその先の DB からデータを取得…という構成にはなっていません。
開発当初は DB設計もしましたが、ツールの規模的にそこまでやらなくてもいいかな、と判断してフロントエンドだけで完結させることにしました。

### 画面の制限

New3DS の下画面の横幅は 320px [^1] なので、ページの横幅もこのサイズにしました。
New3DS で表示することを最優先にしたので、ページ内のセレクトボックスや表のサイズは px 指定で固定にしています。

[^1]: [ニンテンドー3DS/3DS LL/2DS インターネットブラウザーの主な仕様](https://www.nintendo.co.jp/hardware/3dsseries/internetbrowser/browser.html)。[New3DS のブラウザの仕様](https://www.nintendo.co.jp/hardware/3dsseries/internetbrowser/modal_net.html) には解像度の記載がないが、実機で確認したところ 3DS と差異はなかった。

### コーディング

Elm でこんな感じにいい具合にコーディング出来ました、みたいなことを述べられたらよかったんですが、特筆するようなことはないです。

画面レイアウトを大体決めた後、画面の上の方から順に実装を進めたら `Model` にフィールドが生えていってツールが形になった…という感じです。
[TEA のカウンタサンプル](https://guide.elm-lang.jp/architecture/buttons.html) の素直な延長線上にある作りだと思います。
追加したパッケージも `elm-community` の [`html-extra`](https://package.elm-lang.org/packages/elm-community/html-extra/latest/) と [`list-extra`](https://package.elm-lang.org/packages/elm-community/list-extra/latest/) だけです。

強いて挙げれば技やモンスターデータの漏れ確認やテストデータの作成が大変でした。
これはデータ量の問題なので、Elm に限らず大変だと思います。
フロント側で全部やろうとしたら必然そうなるのかなと。


## おわりに

ツールの使い心地はなかなかよいです。
New3DS のブラウザでも読み込みを待たずに結果を得られるので快適です。速さは正義。

当記事を読んでロマサガ2 に興味を持った方、もしくは丁度プレイされてる方は、気が向いたら使ってみてください。
割と便利かもしれません。

**おしまり**