miyauchidp.dev公開 / 更新
4つの遊戯王ツールを作った理由と技術構成
Duel Simulator、Opener Rate、duel-logger、MD パックシミュレーターを個人開発した背景と、ReactやCloudflareを中心とした技術構成、開発で工夫した点を紹介します。
このサイトでは Duel Simulator、Opener Rate、duel-logger、MD パックシミュレーターという4つの遊戯王向け Web ツールを紹介しています。運営している miyauchi は個人開発者で、遊戯王(OCG、マスターデュエル)のプレイヤーとして、自分がプレイ中に「こんなツールが欲しい」と感じた機能を自作し、無料で公開しています。本業は TypeScript を中心とした Web 開発で、これまでも GitHub 上でオープンソースソフトウェアを公開してきました。この記事では、4つのツールをなぜ、どのように作ったのか、その位置づけと技術的な背景をまとめます。
なぜ作ったのか
4つのツールに共通しているのは、「自分がプレイヤーとして使いたかったから作った」という出発点です。デッキの展開ルートを手元で再現したい、デッキの初動率を感覚ではなく数字で把握したい、対戦の結果を記録して後から振り返りたい、パックを引く前に必要なジェムを見積もりたい。いずれも、遊戯王を実際にプレイする中で欲しくなる機能です。既存のツールで満たされない部分を、自分の得意分野である Web 開発の技術を使って形にし、同じニーズを持つ他のプレイヤーにも使ってもらえるよう無料で公開しています。
デッキ調整からパック購入までを支える4つのツールの役割
4つのツールは、それぞれ独立したアプリケーションですが、遊戯王をプレイする一連の判断を支えるように役割が分かれています。まず Duel Simulator は、デッキ画像を読み込んで盤面を再現し、実際にカードを動かしながら展開ルートを組み立てるためのツールです。次に Opener Rate は、組み立てた初動ルートが実際にどれくらいの確率で成立するのかを、組合せ列挙による厳密計算やモンテカルロ・シミュレーションで数値として検証するためのツールです。そして duel-logger は、実戦での対戦結果を記録し、勝敗や先攻、後攻別の勝率としてデータを積み上げていくためのツールです。MD パックシミュレーターは、欲しいURを揃えるための必要ジェムや達成確率を求め、パック購入前の判断を助けます。「盤面で展開を組む」「初動の安定性を検証する」「実戦の結果を振り返る」「カードを揃える費用を見積もる」という役割を、それぞれ専門のツールとして分けて作っています。
4つのツールに共通する技術構成とツールごとの工夫
4つのツールはいずれも React と TypeScript をベースに、Vite でビルドし、Tailwind CSS でスタイリングしています。バックエンドとデータベースには Cloudflare を採用しており、データを永続化するツール(Opener Rate、duel-logger)は Cloudflare Workers + Cloudflare D1 という構成です。Duel Simulator は Cloudflare Pages、MD パックシミュレーターは Cloudflare Workers の静的アセットとして配信しています。同じクラウド基盤に寄せることで、個人開発でも運用の手間を抑えられるようにしています。
技術的な工夫はツールごとに異なります。Duel Simulator では、遊戯王ニューロンのデッキ画像からカード構成を読み取るために、ブラウザ内で完結する OCR エンジンである Tesseract.js を利用しています。サーバーに画像を送らずクライアント側だけで解析が完結する設計です。Opener Rate では、初動条件を満たす手札の組合せを数え上げる厳密計算エンジンを実装しており、条件が複雑になって計算コストが増えても画面が固まらないように、計算処理は Web Worker 上で実行し、既定のタイムアウト(120秒)を超えると計算を打ち切ってエラーを返す仕組みを組み込んでいます。duel-logger では、記録した対戦結果を Google Sheets へ同期できる機能を持たせており、サービスアカウント経由で連携先のスプレッドシートへのアクセス範囲を必要最小限に絞っています。MD パックシミュレーターでは、URの排出率、確定枠、欲しいカードの種類と必要枚数を確率モデルとして分け、期待値と達成確率の両方から結果を確認できるようにしています。
無料でブラウザ完結、プレイヤー目線で改善する運営方針
4つのツールはいずれも無料で公開しており、専用アプリのインストールは不要で、ブラウザだけで一通りの機能を使えます(duel-logger で対戦記録を保存する場合のみ、Google アカウントでのログインが必要です)。個人開発として運営しているため大規模な開発体制ではなく、いずれのツールも自分自身がプレイヤーとして感じた使いにくさや欲しい機能を起点に作られています。
Duel Simulator のトップページです。デッキ画像を読み込み、盤面上で展開ルートを組み立てられます。
Opener Rate のトップ画面です。組み立てた初動条件の成立率を、厳密計算とシミュレーションの両方式で検証できます。
duel-logger のログイン画面です。Google アカウントでログインすると、実戦の対戦結果を記録、集計できるようになります。
MD パックシミュレーターの特設パック計算画面です。カード部分の価値とアクセサリの実質価格を分けて確認できます。
紹介した4つのツールはいずれも無料で、専用アプリのインストールは不要、ブラウザだけで動作します。気になったものがあれば、まずは トップページ から実際に触ってみてください。より詳しい使い方は、Duel Simulator の 基本ガイド や Opener Rate の 計算方式の解説記事 、MD パックシミュレーターの 特設パック比較の記事 でも紹介しています。
記事内容に誤りを見つけた場合は お問い合わせ から報告してください。