MTGカードを検索・画像保存できる自作ツール「Card Codex」を作ってみた

こんにちは、鈴木俊吾（すずしん）です。

以前、MTGの各色（白青黒赤緑）の特徴とは？という記事を書いたのですが、実は私、MTG（マジック：ザ・ギャザリング）が結構好きなんですよね。

そして先日、自作トランプゲーム「オーバーライド」をWebゲーム化してみたという記事で、「SUZUSHINLAB Studio」という開発部門を立ち上げたことを紹介しました。

今回、そのStudioの2つ目のアプリとして、MTGのカードを検索・保存できるツール「Card Codex」を作ってみたので紹介します。

なぜカード検索ツールを作ろうと思ったか
Scryfallという便利なAPIを使った
こんなことができます
触ってみて直したところ
カード画像の扱いについて
実際に使ってみてください

なぜカード検索ツールを作ろうと思ったか

MTGって、とにかくカードの種類が多いんですよね。
色・タイプ・効果・セット・レアリティ…。
条件を組み合わせてカードを探したくなる場面が結構あります。

「そういえば、Studioの2つ目のアプリ、何を作ろうかな」　
「そうだ、自分が欲しいものを作ればいいんだ」

もう一つ、個人的な思惑もあります。
今後、このブログでMTGの攻略記事を書くこともあるかもしれないなと考えていて。
そうなった時に、カードを調べたり整理したりできる自分専用のツールがあると、何かと便利そうだなと思ったんです。

ということで、MTGのカードデータベースを使って、自分好みの検索ツールを作ってみることにしました。

Scryfallという便利なAPIを使った

カードデータの取得には、「Scryfall」というMTGのカード検索サービスが提供しているAPIを使わせてもらいました。
無料・無登録で使えて、色・タイプ・効果テキスト・セット・レアリティなど、かなり細かい条件で検索できる優れものです。

しかも調べてみると、ブラウザから直接APIを呼び出せる設定（CORS）になっていることが分かりました。
なので、自分のサーバーを経由させる仕組みは作らず、ブラウザのJavaScriptから直接Scryfallに問い合わせる作りにしています。

オーバーライド同様、開発言語はTypeScript、サーバーへの反映はSSH経由で安全確認をしてから本番に反映する、という同じ仕組みを使い回しました。
既に一つアプリを作った経験があると、2つ目はこのあたりがスムーズになるものですね。

こんなことができます

条件検索は、以下のような項目に対応しています。

カード名・色・タイプ・セット・レアリティ
マナ総量（範囲指定）
効果テキスト（複数キーワードのAND/OR検索にも対応）
日本語カードのみの検索
フォーマット（スタンダード、モダン、統率者戦など）
検索結果の並び替え（名前順、マナ総量順、発売日順など）

物足りない場合は、Scryfallの検索構文を直接入力できる上級者向けの欄も用意しました。

検索したカードは、1枚ずつ画像として保存できるほか、「保存リスト」にまとめて追加していくこともできます。
保存リストは、デッキリスト形式のテキストとしても、カードを並べた1枚の画像としても書き出せるようにしました。
すでに手元にデッキリストがある場合は、カード名を貼り付けるだけで一括登録できる機能もあります。

触ってみて直したところ

最初に一通り動くものを作った後、実際に自分で使ってみて、気になったところを直していきました。

日本語カードだけ検索したのに英語名で表示されていたので、日本語印刷名を優先して表示するように修正
マナ総量が固定の演算子指定だったので、範囲で指定できるように変更
効果テキストでも検索できるように追加し、後からAND/OR検索にも対応
保存リストの画像が小さすぎて効果が読めなかったので、サイズを大きく調整
デッキリストを一括で貼り付けて登録できる「一括追加」機能を追加
保存リストを空にするボタンや、並び替え機能を追加

一つ作って終わりではなく、使ってみて気になったところをその都度直していく。
このやり方は、オーバーライドを作った時と同じですね。
自分で使うものを自分で直していけるのは、地味に嬉しいポイントだったりします。

カード画像の扱いについて

Card Codexで表示・保存できるカード画像は、Scryfallが配信しているものをそのまま使わせてもらっています。
自分のサーバーに画像を複製したり、加工したりすることはしていません。
ページの下部にも「Powered by Scryfall」のクレジットと、カード画像の著作権がWizards of the Coastに帰属する旨を明記しています。