# 第五世代乱数調整webアプリを再構築した話

こんにちは。[ニアト](https://twitter.com/21i10r29) です。

~~この記事は[Pokémon Past Generation Advent Calendar 2025](https://adventar.org/calendars/11526)の84日目の記事となります。~~

つい先日、[Switch版FRLG](https://www.pokemon.co.jp/ex/switch-frlg/)の発売が告知され、過去作界隈は大盛り上がりしていますね。私も初めて触ったポケモンがリーフグリーンで、非常に思い出深い作品だったこともあり楽しみにしています。

それはそれとして、実は年明けから性懲りもなく乱数調整ツールを作成しておりました。

テーマは 「第五世代乱数調整webアプリの**再構築**」 です。さっそく参りましょう。

## はじめに
この記事のタイトルをご覧になられた方の多くは次のように思われたのではないでしょうか?

「なんで[この前](https://hackmd.io/@niart/rktr1xJfbg)も第五世代向け乱数調整ツール作ったのに同じことやってるの?」

**結論から言うと、\*\*同じこと\*\*はやっていません。両者の建付けはかなり異なります。**(ChatGPT並感)

...まあ実際のところ、今回のアプリ改修理由は9割がた "**しゅみです**" の五文字で終わ...りません。

先日公開した [Pokémon BW/BW2 Initial Seed Search](https://niart120.github.io/pokemon-gen5-initseed/) は、実はもともとは初期Seed検索機能に特化したアプリとして公開する想定で作成していたものです。

[GitHub Spark](https://github.com/features/spark?locale=ja) という非エンジニア向けのwebアプリ作成SaaSを用いて乱数調整アプリを作れないかな、と思い立ち色々試行錯誤したものの成れの果てがあのアプリです。

そこからWebGPU対応、個体生成機能、レポ針機能、ID調整、プロファイル機能にi18n対応、... といろんな機能をVibeのままに継ぎ足ししたせいで改修コストが爆発的に増加しており、アプリ自体のアーキテクチャもぐちゃぐちゃになっていたりと地獄の様相を呈しています。

(地獄の様相を可視化した図。若干不正確というか盛っている部分もありますが、だいたいイメージはこんな感じ。)

UIもレスポンシブ対応がお粗末だったり、モバイル版の表示がちょちょぎれて結果が確認しづらいなどの重篤な欠陥を抱えている状態で、改修したいが手を出しづらい、さあどうしよう、、、

ということでいっそのことスクラップ＆ビルドじゃ！と踏み切ったのが今回の開発の経緯となります。

折角拙作のwebアプリの紹介記事や解説記事を書いてくださった方々がいらっしゃたのは重々承知しておりますが、なにとぞお許しください。。。

## アプリの概要
改めて再構築したwebアプリの紹介に移りましょう。

**[5genSearch-Web](https://niart120.github.io/5genSearch-web/)**

主な機能：

- **検索**タブ
- 時刻検索機能 (MT Seedを指定して起動時刻を検索する)
- 孵化検索機能 (親個体の条件などから希望個体を検索する)
- **個体生成**タブ
- ポケモン生成一覧機能 (固定・野生・御三家・etcで出現する個体を一覧表示する)
- タマゴ生成一覧機能 (孵化で出現する個体を一覧表示する \[BWのみ\])
- **ツール**タブ
- 針読み機能 (起動時刻・LCGSeedから現在の消費位置を特定する)
- TID調整機能 (所望するTID/SIDが出る起動時刻を検索する)
- MTSeed検索機能 (所望する個体値となるようなMTSeedを検索する)

機能は以前のwebアプリとほぼ同等のものを受け継いでいますが、UI配置を大きく刷新したほか、こまごまとした拡張を加えています。折角なので幾つかこの場でご紹介します。

### バッチ検索機能
上のアプリ画面に "個体リストにコピー" というボタンがあるのにお気づきになられた方はいらっしゃるでしょうか?

このボタンをクリックすると...

"個体生成"タブのSeed入力欄に追加された "インポート" セクションに自動転記されます。もちろんこのまま検索も可能です。条件の厳しい野生乱数とかLv1ギャラドスとかを狙う際に役立ててください。

それ以外にも、検索結果のエクスポート・インポート(JSONは両対応、CSVはエクスポートのみ)も対応しています。

### 針読み機能
こちらは旧アプリでも部分的に実装していましたが、正式に実装しました。

[ジラーテ](https://x.com/namofure)氏作成の[レポ針ツール](https://github.com/namofure/RepoHariTool)とは異なり、単一時刻/単一LCG Seedに対する検索を行います。前後n秒の検索を行いたい場合はそちらをご利用ください。

### 検索結果のコピー機能
時刻検索機能の詳細表示ダイアログにある"Seed入力にコピー"ボタンをクリックすると、個体生成タブやツールタブのSeed入力欄に起動条件やLCG Seedの情報がコピーされます。

コピーした結果を用いて個体生成を行うことが出来るほか、針読み検索もできます。

### ライトモード/ダークモードの導入
どうせゼロから作り直すんだから、ということでライトモード・ダークモードを実装してみました。
|  |  |
| - | - |
| ライトモード | ダークモード |

ライトモードはレシラムをイメージした白+暖色(橙)を基調色に、ダークモードはゼクロムをイメージした黒+寒色(青)を基調色にしています。夜間などで明るい画面だと目が疲れる、という方にも安心ですね。~~(自分みたいな根暗人間にもありがたい)~~

### モバイルレイアウトの見直し
以前から指摘・要望を頂いていたものの直せていなかったモバイルレイアウトにも手を加えています。

|  |  |
| -------- | -------- |
| メイン画面 | DSコンフィグ |

設定画面などを横メニューに押し込んで格納することでメイン領域を広げたり、画面下に切り替えタブを配置したりして見た目を整えてみました。

ツールの要件上、横に長大になりがちな結果テーブルとかについてはまだ工夫の余地はありそうですが、少なくとも下スクロールできなくて結果が見れない、、、なんてことにはなってない筈。

### PWA対応(WIP)
まだ完全ではないですがPWA(Progressive Web Apps)対応を進めています。

こいつは何者なん？って話ですが、簡単に言うとwebアプリを普通のスマホアプリみたい起動できるようにしたアプリケーションのことを言います。
[プログレッシブ ウェブアプリとは | web.dev](https://web.dev/articles/what-are-pwas?hl=ja)

ブラウザの"共有"ボタンから"ホームボタンに追加"を選択していただけると↓みたいにアプリとしてDLできます。

残念ながら今はまだWeb App Manifestを整備してアプリっぽい形で起動できるようになっただけですが、ゆくゆくはService Workerという仕組みを導入してやることで、一度アプリをインストールすればオフラインでも起動できるようになる予定です。

### (その他)アプリアイコンの追加
今回の開発に当たってこっそりアプリアイコンを追加しています。2匹とも凛々しいですね。

こちらのイラストは [KEN Naganawa](https://x.com/ken_naganawa_) 氏に作成頂きました。この場をお借りして感謝申し上げます。

## 旧アプリの対応について
今後はこちらの 5genSearch-webの方をメインにメンテナンスを行う予定です。

旧版アプリについてはリポジトリは完全アーカイブ化、アプリ本体は残しますが新アプリへの誘導リンクを出すなど、移行に向けた対応を細々とやっていくつもりです。ご不便をおかけし恐縮ですがご理解のほどよろしくお願いいたします。

## おわりに
というわけで今回は第五世代乱数調整webアプリをリビルドしてみたよ、というお話でした。

ひとまず目に見える範囲で実施した機能改修をご紹介しましたが、それ以外にもこまごまとしたバグ取りとかプロファイルのエクスポート・インポート機能の実装とか色々やってます。

出力結果の不備やバグなどが見つかった際は[Twitter](https://twitter.com/21i10r29) or [Discordの乱数調整サーバー](https://discord.gg/TwjZmRg) or [GitHubリポジトリのIssues](https://github.com/niart120/5genSearch-web/issues) までご連絡ください。個体生成周りとかはきちんとテストしきれていないので抜け漏れがあるかも。

以前のツールよりも幾分使いやすくなっていると思うのでご活用いただければ幸いです。

:::spoiler 余談
今回のwebアプリの再構築には大体一か月掛かっています。(1/21に初回コミット → 2/22リリース)

規模としては TypeScript:27 kSLoC / Rust(WASM):13 kSLoC (データ・コメント・空行を含めず) で、そこそこの小規模アプリのサイズ感って感じですね。

既存資産の流用などもあることを考えると胸を張って威張れるほどのものではないのですが、それなりの速度で開発が出来たのかなと思っています。

- 新アプリのアーキテクチャってどうなってるの?
- そもそも前のwebアプリってどういうところに欠陥を抱えてたの?
- それをどうやって改善したの?
- 開発の進め方を知りたい!

みたいな 開発者目線での話は別途どこかでまとめたいです。まとめます。がんばるます。
:::