見出し画像

デュエプレのデッキコード自動生成ツール「PictDecker」を作った話

Coco

はじめまして、Coco と申します。

先日、『PictDecker』というWebサービスを公開しました。

PictDecker for デュエプレ（β）

こちらは、デュエプレのデッキ編成画面の画像をアップロードするとデッキコードを生成できるというものです。

この記事では、このサービスの使い方や、開発経緯、どのような技術を使っているかなどを簡単にご紹介したいと思います。

長めの記事なので先に書いておきますが、PictDecker のサービスは現状普通に赤字で、マネタイズできる要素が現状ないので、サービス継続できるかどうかがこの note に懸かっています。

サービスを気に入ってくださった方はぜひサポート頂けるととても嬉しいです……！

自己紹介

簡単に筆者の話をしておくと、本業はWebエンジニアです。デュエプレは3弾あたりに始めて、毎月マスターに上げる程度にはやっています。レジェタッチなどは全く経験ないです。

紙のデュエマは覚醒編～DS期くらいまでやっていて、それ以降も情報だけは追っています。

ツールの使い方

使い方については以下の動画を観て頂くとだいたい理解できると思います。なるべく直感的に使えるように作ったつもりです。

まず、トップページにアクセスして、画像をアップロードします。

「クリップボードから貼り付け」を使えば画像の端末へのダウンロードも不要です。個人的にはクリップボードの方がよく使います。

すると、自動的にプレビュー画面が表示されます。

画像は17弾初期にTwitterで見つけたNエクスです

注意に書いてある通り、デッキ名をトリミングしたり、殿堂改定前のレシピを使わないようにしてください。また、画質はなるべく高いものを使ってください。粗い画像だとかなり精度が落ちます。

「OK」を押すと解析が始まり、数秒待つと、デッキコードを発行できる公式サイトへのリンクと、解析結果の簡単なリストが表示されます。

公式サイトにジャンプし、「デッキコード発行」を押したら完了です。

殿堂非対応のデッキだとここでエラーになったりします

ちなみに、今回の画像では解析が上手くいったので48枚が一致していますが、ここまで上手くいくのは稀です。

特に覚醒編以降、名前のよく似たカードが増えてくることもあり、精度を100%にするのは非常に難しいです。

なので、「最後の数枚を手作業で入れ替えるだけでデッキが完成する補助ツール」くらいに捉えて頂けるとありがたいです。

単にプロメフィウスに置き換わるだけでなく、全く別のカードが紛れ込んでいる場合があるので、デッキコードをアプリで読み込んだ際の「一括生成」ポップアップにはくれぐれもお気を付けください。

私は開発中、試しに読み込んだNエクスのレシピをアプリで開いたところ、誤判定で紛れ込んでいたボルバルザーク・紫電・ドラゴン3枚を一括生成しました。数日後にイベント報酬で手に入ることが確定していたサイバーNワールド4枚目も生成しました。このツールはそんな屍の上に立っています。

開発までの経緯

ツールを作ったきっかけとしては、何よりもまず自分が欲しかったからです。

普段デュエプレをやっていて、ツイッターやYouTubeで見つけた面白そうなデッキを実際に使ってランクマに潜ることがよくあるのですが、

アプリが重いのとカード検索が使いづらいため自分でデッキを再現するのが面倒に思うことがよくありました。

そこでふと、Twitterに貼られているキャプチャ画像のカード名は機械的な文字なので、文字抽出の技術さえできれば自動でデッキコードが発行できるのでは？　と思いつき、開発をスタートしました。

10月後半に画像から文字の抽出ができるかどうかを試してみたところ、思ったより実用的に取れることがわかったので、そこから1週間程度で画面設計、データの取得とカード名検索ロジックの調整、デッキリストの表示などを作っていきました。

やる気のない初期画面（10/22時点）。

11月前半にはほぼ完成していたのですが、Google広告審査を待っていたり（最終的に通りませんでした…）もたもたしているうちに17弾がリリースされたので、そのカードに対応し、12月頭にツイートにて告知を始めました。

https://twitter.com/pictdecker/status/1599735341774094337

そこから1週間ほど経った12/11、デュエプレ界隈で著名なakiraさんにRTされたことで爆発的にリツイートが伸び、その後も継続的にアクセスされている状況です。

サービスの仕組み

どんな技術になっているかというと、ツールの仕組みとしては、おそらく皆さんが想像しているよりも単純かつ力技です。

そもそもデュエプレの公式サイトのデッキURLは、カードごとに振られている4桁のIDが並ぶことで作られており、カード名とIDの対応がもしわかれば、カード名からデッキURLを生成することが可能です。

ただし、この対応表は当然ながら公式では公開されておらず、規則性も見つけられなかったので、完全手作業でデータを集めています。

  1. プロモやイラスト替えを除いた全カードのデータを公式サイトのカードリストから手作業で集める

  2. カードを40枚ずつに分けたデッキURLをひたすら発行し、キーカードを1つ1つ変えることで、カード名とデッキコード用の4桁IDの対応表を手作業で作る

  3. 画像解析APIで画像に含まれるテキストを取得し、②のカードリストと照合してデッキURLを出力する

という仕組みです。

特に②の効率化が不可能に近く、このデータ収集作業に数時間かかりました。（bot的なものは使っていません）

キーコードとカード名の対応表の行数で苦労を察してください

ただ、これは17弾までのデータを一気に集めたからなので、今後の更新作業はそこまで大変ではないと思っています。もし今後、デッキURLの採番ルールが変わったり、4桁IDがリセットされたりしたら……その時は考えます。

最後に

ここまで読んで頂きありがとうございました！

質問箱も作成しましたので、PictDecker への質問や要望など、ぜひお寄せください。（といっても本業の合間かつ非公式サービスなので、大掛かりな機能追加はあまり予定していませんが……）

冒頭にも書いた通り、PictDecker の運用にはコストがかかっております。サービス継続のため、サポート頂けるととても嬉しいです！

有料部分ではもう少し詳しい技術面の話と、今後どうしていきたいかみたいなことを少しだけ書いています。興味のある方、サポート頂ける方はぜひお願いします。


ここから先は

2,614字 / 3画像

¥ 200

この記事が気に入ったらサポートをしてみませんか？