トレーナーズウェブサイトのデッキコードをブラウザを介さずに生成する

iwashi

元々カードの現物をあまり持っておらず、複数のデッキを作成するのが難しいため、スリーブに入れて完成させる前に試運転として、次のリンクのGoogleChromeの拡張機能を利用してひとり回しをすることが多くなりました。

この拡張機能では、トレーナーズウェブサイトのデッキ構築からデッキを完成させた後の画面(「デッキ保存完了」の画面)で使用することで、カードの画像を動かしてひとり回しをすることができるのですが、
いざ新しいデッキを作成しようとすると、デッキに入れるカードは毎回テキストを入力して検索する必要がある上に、検索結果が複数ある場合はページングされており自分が探してるカードが何ページ目にあるか当たりをつけないといけないため、トレーナーズウェブサイトがデッキを作成してひとり回しをする上で一番ネックな部分だと感じています。

そこで、マウスだけで簡単にデッキ作成ができるツールの作成を考えています。画面などはまだ構想中ですが、おおまかな仕組みとしては、

①収録パックでカードを絞り、選択カードをデッキに追加
②作成したデッキのデッキコードを取得
③デッキコードからトレーナーズウェブサイトの「デッキ保存完了」ページに飛び、先述の拡張機能を利用してひとり回し
もしくはツール内でひとり回し

というものを考えています。

このうち一番の要である ②作成したデッキのデッキコードを取得 ができたので、どんなことをしたか書いていきます。

始めに、トレーナーズウェブサイトはソースコードが公開されていないため、操作に対する結果を見て、内部でどんなことが起きているかある程度予想していく必要があります。
今回の場合でいえば、デッキ作成においてデッキ構築画面でDeveloper Toolを使用してhtmlページの中身を見てもデッキコードに相当するものは見当たりませんが、デッキを保存した後の「デッキ保存完了」ページではデッキコードが表示されており、URLにもこの値が入っているため、カードを選択してからデッキを保存するまでの、「レギュレーションチェック」か「デッキ登録」ボタンを押した際に、対応するデッキコードが発行されていると予想されます。

これらのボタンを押した際の通信内容を確認するために、Developer ToolのNetworkタブを利用しました。(下図はデッキ構築画面で開いた例です)

画像1

このタブでは、Developer Toolを開いている画面内で行われた通信内容が確認できます。例えばdeck.htmlという名前のものをクリックすると、下図のように、deck.htmlを読み込んだ際の通信先のipアドレス(この場合はpokemon-card.com)やリクエストヘッダ、レスポンスヘッダの中身がわかります。(この辺のHTTP通信の話をすると本筋から逸れるので説明は省略します)

画像2

このNetworkタブを開いた状態で、「レギュレーションチェック」、「デッキ登録」のそれぞれのボタンを押してみると、それぞれ deckRegulation.php, deckRegistCall.php というphpファイルを読み込んで処理を行っているのが確認できます。

画像4

これらとの通信のうち、こちらに帰ってくる情報が乗っているレスポンスヘッダのCookieの内容に注目して見てみると、deckRegistCall.php のレスポンスヘッダ内に、saveDeckIDの値としてデッキコードが入っていることがわかります。

画像6

「デッキ保存完了」ページに出ているデッキコードの値を見比べても、同じ値となっているので、ブラウザから「デッキ登録」ボタンを押したときと同じ通信ができれば、ブラウザを介さずにデッキコードを得られることになります。

実際にどんなデータを送っているかについて、deckRegistCall.phpのリクエストヘッダとフォームの内容について見てみると、Cookieとフォーム内のそれぞれにデッキのカードの種類と枚数、フォーム内にデッキの合計枚数が入っているみたいです。

画像6

Cookieの中身をよく見てみると、変数名がdeck_staやdeck_supなど、カードの種類によって名前が分けられており、(カードID)_(枚数)_(デッキのメインカードのフラグ)の形になっています。
(ここでいうカードIDとは、カード詳細ページのURL https://www.pokemon-card.com/card-search/details.php/card/?????/regu/XY 内における、?????の部分に入る5桁の数字のことです)
(デッキのメインカードのフラグとは、デッキ保存完了ページでポケモンのところについている「メイン」のボタンの色が赤色か灰色かを表しているようです。値が9なら赤、1なら灰色のようです)

画像5

というわけで、ここまでの内容を踏まえると、Cookie,formの値を適切に設定し、https://www.pokemon-card.com/deck/deckRegistCall.phpに対してリクエストを送ることで、そのレスポンスとしてデッキコードを得ることができます。

具体的にどんなコードを書けばいいかは、Google検索で出てくるのでやりたい方は調べてやってみてください。(私はpythonでできました)
実際にプログラムを動かしてみると、下図のようにブラウザを介さず生成されたデッキコードが得られて、このデッキコードに対応するデッキ完成ページもきちんと存在します。

画像7

HTTP通信に関連した内容がメインで、ポケモンカードとの関連は薄いですが、こんなこともできるということで、何かの参考になれば幸いです。

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