こんにちは、鈴木俊吾（すずしん）です。
以前、MTGの各色（白青黒赤緑）の特徴とは？という記事を書いたのですが、実は私、MTG（マジック：ザ・ギャザリング）が結構好きなんですよね。
そして先日、自作トランプゲーム「オーバーライド」をWebゲーム化してみたという記事で、「SUZUSHINLAB Studio」という開発部門を立ち上げたことを紹介しました。
今回、そのStudioの2つ目のアプリとして、MTGのカードを検索・保存できるツール「Card Codex」を作ってみたので紹介します。
なぜカード検索ツールを作ろうと思ったか
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に帰属する旨を明記しています。
実際に使ってみてください
「Card Codex」は、SUZUSHINLAB Studioのページから使えます。
MTGのカードを探したり、デッキリストを整理したりするのに、ちょっとでも役立ったら嬉しいです。
使ってみて気づいた点や「こんな検索条件も欲しい」という要望があれば、ぜひ教えてください。
オーバーライドと同じように、このツールも少しずつ育てていきたいと思っています。
Studioには、これからもオリジナルのツールやゲームを追加していく予定です。
それでは、また次回の記事でお会いしましょう。
コメント