やぎにいのノート 今年の4月にポケモンチャンピオンズが発売されてから、ちまちまとランクマッチに潜っている。
自分は元々ポケモンの対戦は好きなのだが、対戦特化のタイトルということもあって腰を据えて遊べていて楽しい。
で、対戦を続けているとどうしても「さっきの試合、相手の選出なんだっけ」「あの技を外したのが敗因だよな」みたいなのを後から振り返りたくなってくる。以前 Street Fighter VIの対戦データを分析してみた という記事を書いたことがあるのだが、ああいう「自分の対戦を記録して眺める」体験がやっぱり好きなんだと思う。
ただ、ポケモンの対戦は格ゲーと違ってリプレイやバトルログが自分の手元にきれいに残るわけではない。かといって対戦中に紙やメモアプリにカタカタ打つのは無理がある。相手の技を選びながらスマホで文章をメモ、なんて片手ではとても捌けない。
じゃあ自分が使いやすいやつを作ればいいか、ということで作った。PokeBattleBook というWebアプリ。
https://pokebattlebook.vercel.app
今日 v1.0.0 として一旦正式公開ということにした。無料で、Googleログインだけで使える。スマホ前提で作っているので、ホーム画面に追加すればアプリっぽく開ける（PWA対応）。しかし自分がPCでばっかテストしていたのでスマホだといまいちなUXな部分が多い、一旦Issueだけ切って公開を先にすることにした。
対戦しながら片手で記録する
このアプリの主役はこれ。対戦中に、片手のタップだけでターンごとのログを残していく画面。
場のポケモンをアイコンで常に出しておいて、自分の技は登録済みの4つがそのままボタンになっているので1タップで選べる。交代は控えのアイコンをタップするだけ。ひんしになった・状態異常が入った・能力が上がった下がった・メガシンカした・天候が変わった、みたいなイベントはチップをぽちぽち押していく形にした。フォーム入力は極力させない、というのを徹底している。
相手の技だけはさすがにこちらで登録しようがないのでオートコンプリートで打つのだが、一度打った技はそのターンの履歴から選び直せるようにして、2回目以降はタップで済むようにしている。
ターンを送るたびに自動で保存されるので、うっかりブラウザを閉じても途中の対戦はそのまま再開できる。ポケモンの対戦は1試合が長いので、これは自分がいちばんほしかったやつ。
PCのユースケースでも可能な限り入力のコストを下げたくて、わざやポケモンなど数ある選択肢から何かを選ぶときはローマ字入力そのまま入っても（例えば「pika」などでピカチュウがサジェストされる）大丈夫なしぼりこみをしている。これは結構他のプロダクトを使っていて自分がかゆかったポイント。
記録のモードは2つ用意した。1つはこの詳細記録で、ターンを1つずつ刻んでいくやつ。もう1つは クイック記録 で、こっちは対戦が終わったあとに「選出と勝敗だけ」をサッと残すためのもの。毎試合きっちりターンログを取るのはさすがに疲れるので、気合の入った試合は詳細で、それ以外はクイックで、みたいに使い分けられるようにした。
自分はまだ全然ポケモンバトルに詳しくないので、後で振り返るときに「なんのポケモンが何してきて負けたんだっけ……」みたいなのが思い出せないし、スト6みたいにリプレイがあるわけではないのでこのアプリを作ったが、多分玄人は要らないので「相手の選出3体が何で、負けたのか勝ったのか」だけ記録できるようにした。（ちなみに玄人はダメージ計算機能とかもほしいと思っているので、今頑張って作っている）
相手のポケモンは、対戦開始時の見せ合いで6体のアイコンは見えるので、判明した分だけ名前を入れておける。うろ覚えのときは A〜F のプレースホルダのまま進めて、あとから埋めればいい。対戦中に「こいつ名前なんだっけ」で手が止まりたくないので。
ボックスとパーティー
対戦のたびに自分の技を打ち込むのはだるいので、育成済みのポケモンを登録しておく「ボックス」と、そこから選んで組む「パーティー」も用意した。
ボックスでは種族・技4つ・もちもの・とくせい・メガシンカの可否あたりを登録できて、能力ポイントの振りに応じた実数値のプレビューも出るようにしている。
地味にこだわったのが名前の検索で、日本語でもカタカナでもローマ字でも引っかかるようにした。「りざ」でも「リザ」でも「riza」でもリザードンが出る。さらにコミュニティでよく使われる略称にも対応させてあるので、いつもの呼び方で探せる。
もう1つ気に入っているのが、わざ・もちもの・とくせいを選ぶと、その効果の説明文が名前のすぐ下に出るところ。「このもちものどういう効果だっけ」を別のサイトに調べに行かなくていい。ポケモンは技も持ち物も特性も数が多くて、正直全部は覚えていないので、これは完全に自分のために付けた機能。
表記はなるべくチャンピオンズに寄せた
作るうえで結構こだわったのが、アプリに出てくる言葉をなるべくゲーム内の表記に合わせること。
たとえば「瀕死」ではなく「ひんし」、「持ち物」ではなく「もちもの」、能力値も「攻撃・防御」ではなく「こうげき・ぼうぎょ」と書いている。技やとくせい、もちものの効果説明も、できる限りゲーム内の文言に寄せた。対戦のお供として横に置いておくものなので、ゲームと違う言葉が出てくると細かいところで気持ち悪いよな、という気持ち。
ゲームの仕様まわりだと、ポケモンチャンピオンズは今のところテラスタルがなくてメガシンカがあるので、ちゃんとメガシンカ前提で作っている。この手のゲームはアップデートで仕様がちょくちょく変わっていくものなので、あとからギミックが増えても対応しやすいようにデータの持ち方は一応考えてある（この話はしだすと長いので割愛）。
技術的な話
毎度おなじみの構成メモ。今回はこんな感じ。
- Next.js 16 (App Router) + TypeScript
- 認証: Better Auth（Google OAuth）
- DB: PostgreSQL + Drizzle ORM（本番は Neon、ローカルは Docker Compose）
- UI: Tailwind CSS v4 + shadcn/ui
- ホスティング: Vercel
フレームワークは Next.js。画面もAPIも認証も1つのプロジェクトに収まるし、そのまま Vercel に載せられるのが楽なので選んだ。認証は Better Auth を使った。今回はGoogleログインだけ通ればよくて、Drizzle との相性も良かったので特に迷わず。
DBは PostgreSQL に Drizzle ORM。スキーマをTypeScriptのコードで一元管理できるのが good。本業でもRDBは触っているので、この辺はいつもの安心感で選んでいる。
というわけで
改めて、置いておきます。
https://pokebattlebook.vercel.app
Googleログインだけで使えて、料金はかからない。スマホのホーム画面に追加するとアプリっぽく開けるので、対戦のお供にするならそれがおすすめ。
正直まだMVPというか、自分が対戦しながら回してみて「ここ使いにくいな」を潰していく段階ではある。ただ、対戦中に片手でログが残せて、あとから「この試合こうだったな」と眺められる、という自分がほしかった最低限は形になった。
同じようにチャンピオンズをやっていて対戦の記録を残したい人がいたら、よかったら使ってみてください。感想もらえたら普通に喜びます。
アプリ内からもお問い合わせするとすぐ起票されて改善に動けるので何卒。