【遊戯王】ソリティア簡易作成ツールを作ってみました

2023年7月22日 23:17

こんにちは。YPのmira（@aBhs1hpE9cVWYSW）と申します。
ソリティアが好きで、普段はよく展開動画を投稿しています。

今回、そのソリティアを作成するツールを作ってみました。使い方説明の記事になります。よろしくお願いします🙌

キーワード
遊戯王カードゲーム一人回しテストプレイ展開ソリティアシミュレーションシミュレータブラウザオリカが使える無料ツールサービス

ツール

こんな感じのものを作成しました。

竹光展開練習
ディアベルスターとエクスパラディンから
メイン1スキップ、4〜5回妨害、4枚ドロー
蛇眼の炎龍で焔聖騎士2体蘇生するの強すぎ😅
もっと伸びそう🤔 pic.twitter.com/HIE0anuNnQ
— mira (@aBhs1hpE9cVWYSW) December 10, 2023

詰めデュエル💪
（5d's 80話再現）
※ミラフォは伏せられてる状態 pic.twitter.com/MxYatypQhw
— mira (@aBhs1hpE9cVWYSW) July 22, 2023

転生炎獣展開練習
デバッガーとガゼルからロアーレイジ咎姫（3妨害）＋リソース
新規のコード・オブ・ソウル使用 pic.twitter.com/0cVTsO4Sln
— mira (@aBhs1hpE9cVWYSW) November 11, 2023

以前から試作品は何個か作っていたんですが、ようやく違和感のないものが作れたので今回紹介させて頂きます。twitter等で反響やフィードバックを頂けてとても助かりました！ありがとうございます🙏

解説

以下、質疑応答の形式で書いていきたいと思います。

「これは何ができるの？」

・自分の考えた展開やギミックを紹介したい

・プレイングで気になったことや反省をコメント付きでシェアしたい

・詰めデュエルを公開・回答したい

こんなとき、動画の形式でコメントを付けながら簡単に作成できます。

「なんでこのツールを作ろうとした？」

遊戯王のソリティアや展開を考えた時にアウトプットする手段は
・紙のカードを使う
・画像編集ソフトを使う
・ygoproのようなシミュレータを使う
・メモに書いて文章で伝える
・マスターデュエルでCPUと対戦する
など色々ありますが、少し手間がかかることもあります。そこで作成したのがこのツールです。

「これって対人対戦できる？」

あくまでソリティアを作成するためのツールなので、対戦はできません。

「対戦できないならygoproで十分では？」

いえ、どちらも一長一短だと考えています。

ygoproはスクリプトやデータベースの更新が必要ですが、これは不要です。

ygoproはスマホでやるのが少し難しいですが、これは楽にできます。

ygoproでは展開の途中でコメントを残しにくいのと、操作を間違えた場合最初からやり直しになりますが、これは簡単です。

一方で、

これにはカード毎のスクリプトがありませんがygoproはあるので、アンジェリカ戻し忘れ等のルールミスがありません。また、隣の芝刈りを使ったランダムな展開が得意。

これは自分好みにカスタマイズするには若干のコード知識が必要ですが、ygoproはダウンロードするだけで済みます。

場合に応じて使い分けたいところ。

「スクリプトが無いって？」

ygoproではなくマスターデュエルと比較してみます。例えばMDで羽根箒を発動した場合、相手の魔法罠が破壊され墓地に行きます。さらにコナミが用意した効果発動エフェクト（羽根がふわっと動くモーション）が表示されます。

一方、このツールで羽根箒を発動すると、相手の魔法罠は1枚ずつ墓地へ移動され、モーションも用意されていません。

「詳しく」

MDではスクリプト（のようなもの）があるおかげで、羽根箒は必ず「相手の」「魔法罠すべてを」「破壊し」「墓地ゾーンに送り」ます。間違っても自分のカードを破壊したりはしません。スクリプトで制御されているためです。もしマクロコスモスが適用されると墓地に送られず除外されますが、それもスクリプトのおかげです。

ですがこのツールではスクリプトがないので、極端な話をすると羽根箒で「自分の」「全ての手札を」「除外する」動きも作れたりします。ニビルで10枚ドローできたりも。動きが決まっていないのでどうとでもできるんです😅
カードの位置や表示形式だけを変えるという意味では、DuelingBookに近いかもしれません。（ツイートを引用）

Don't you hate it when you brick? Well we've added a new button to solve the problem! Introducing the Mulligan button. If you're not happy with your starting hand, simply click this button to shuffle your hand back into the Deck, and draw 5 new cards. Give it a try! pic.twitter.com/wqFBm2MolE
— Duelingbook (@Duelingbook) April 1, 2021

これがスクリプト無しの意味です。自由な動きが作れる反面、紙の遊戯王と同じように制約などを意識する必要があります。ルールミスには気をつけていきましょう💪

使い方

「アプリのダウンロード必要？」

ブラウザでできます！
こちらのURL

にアクセスするだけで使えます。※ただし、カスタマイズしたい場合はHTMLを編集できるアプリが必要になります（後述）。※また、使用する環境はPCよりはスマホがおすすめです（スマホで開発したため）。

「ページを開いてみたけど、このまま使える？」

だいたいいけます。「使いたいテーマを選ぶ：（選択）」を押すと色んなテーマ名が出てくるので、いい感じのやつを押してみてください。

ここでは宝玉獣を押してみましょう。すると画面が移り変わりました。

テーマ専用のスリーブや背景とカード群が出てきました。
初めから表示されているカードはお試し感覚で動かせます。試しに宝玉の絆を手札に加えてみましょう。カードをクリックすると

このように薄くなって、クリックしたとわかります。
今回は宝玉の絆をドローしたことにしたいので、次に移動先のゾーンを選択しましょう。手札の真ん中のゾーンを押すと

また透明度が変わります。次に移動ボタンを押しましょう。

すると効果音とともに宝玉の絆が手札へ来ます。

同じ手順で「カード発動」のボタンを押すと、狙いのゾーンに発動することができます。

「ドローしたならデッキから手札に移動するべきでは？」

おっしゃる通り、本来なら宝玉の絆をまずデッキの位置に裏側で置いてから手札に移動するべきですが、それは大変なのでデッキを経由せず移動しています。実際そんなに違和感はないので別にいいかなと。

「カード発動するとき「召喚」ボタンを押してもいい？」

ぶっちゃけ全然大丈夫です。前述の通り、スクリプトがないので、「カード発動」を押しても「召喚」を押しても制御にはなんの関係もありません。
強いて言えば、見え方というか、カードが発光する・しない、効果音が召喚っぽい・発動っぽい等の点が違います。見栄えを意識するなら正しいボタンを押したほうがいいと思います。

「墓地の一番下のカードを操作したい時はどうしたらいい？」

そのカードがある"ゾーン"をクリックしてください。"カード"を押してしまうとカードがクリックに反応してしまうので、ゾーンが見えている僅かなスキマを押しましょう。拡大表示などしてください。

無事にゾーンを押すとそのゾーン上のカード達がずらっと一覧表示されます。（もし画面を拡大していたら手動で元に戻しておいてください。）その中で目的のカードを押すとカード達は自動でゾーンに戻り、押されたものが一番上に浮かび上がります。あとは「効果発動」ボタンを押したり、移動先のゾーンを押して「移動」を押したりしましょう。参考動画があるのでどうぞ。↓

https://video.twimg.com/ext_tw_video/1683593352334430208/pu/vid/540x950/QoIpwSTSIMTNOxPC.mp4

「ここにないカードを操作したいならどうやったらいい？」

自分好みのを動かしたい場合、JavaScript（ジャバスクリプト）コードを書き換える必要があります。

「javascriptって？」

雑に言うとブラウザの動作を表すプログラミング言語の一つです。（今回カードゲームの動きを作るにあたって最適だと考えました。）

「コードはどこにある？」

↓のページから「◯◯.html」「◯◯.css」「◯◯.js」の3つのファイルをダウンロードして、「◯◯.html」を実行してみてください。（バージョンの数字が最新のをダウンロードしましょう😀）

「HTML…？？」等よく分からない場合は↓の解説サイトを参考にしてください。

https://wa3.i-3-i.info/word11717.html

難しい場合はdropboxからhtmlを直接ダウンロードできます。↓

「どうやったら編集できる？」

PCなら「プログラムから開く」でメモ帳を指定するとHTMLを開けて、Google Chrome等ブラウザを選ぶと実行できます。
スマホならHTML編集できるアプリ等ダウンロードして開いてみてください。アプリは色々ありますが、AndroidならAcodeが広告ないので結構いい感じです。

「どんな風に編集すればいい？」

「〇〇.js」ファイルを編集していきます。jsはjavascriptを意味する拡張子です。（〇〇.htmlの中の<script>タグで書いている場合もあります）
「//好きなテーマのカード群やスリーブ、背景を表示する」と書いてある箇所を探してみてください。
いろんなテーマが書いてありますがSPYRALを例にあげます。

      //スパイラル
      case 'spyral': {
        sessionStorage.clear();
        createCardElement('card1', 'https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQkuE5L5eZWTYwe78pUJBR6VK28OREmV-sq-w&usqp=CAU');
        createCardElement('card2', 'https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcT4OPcYYD46FT49JL3S3yBeEV8vcEYrd-Po4g&usqp=CAU');
       （中略）
        const optionalProtectorUrl = 'https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcRmFJIJ2gvQrUcjVCbPqcQ46fEhuUa5tSaW1Q&usqp=CAU';
        sessionStorage.setItem('selectedProtectorUrl',
          optionalProtectorUrl);
        const optionalBackgroundUrl = 'https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcTQ265lmcrktgrrfueZOIh1w36c8omKELbZGQ&usqp=CAU';
        sessionStorage.setItem('selectedBackgroundUrl',
          optionalBackgroundUrl);
        location.reload();
      }

上のように表示されていると思います。
createCardElement…の行ではその名の通りカード要素を創造しています。「card1」や「card2」は通し番号です。

createCardElement('card1', 'https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQkuE5L5eZWTYwe78pUJBR6VK28OREmV-sq-w&usqp=CAU');

唯一無二なので他のカードと被らないように設定しましょう。「https:なんちゃら」は画像URLなので、ここを変えればカードの画像も変わります。
ここにカードを追加したいときは、通し番号を他と被らないようにして（card50まで書いていたらcard51にするとか）画像URLを追加するだけです。
テーマのスリーブや背景を変えたいときは、

const optionalProtectorUrl = 'https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcRmFJIJ2gvQrUcjVCbPqcQ46fEhuUa5tSaW1Q&usqp=CAU';

const optionalBackgroundUrl = 'https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcTQ265lmcrktgrrfueZOIh1w36c8omKELbZGQ&usqp=CAU';

と書いてあるところの「https:なんちゃら」の部分を好きなURLに変えればOKです。

「新しいテーマを追加したいときは？」

もし別のテーマ（ドラゴンメイドとか）を追加したいときには、

case 'dragonMaid': {

のように書いて同じノリで追加します。
あとは、HTML上で

<option value='rokket'>ヴァレット</option>

などと書かれているところがあると思うので、

<option value='dragonMaid'>ドラゴンメイド</option>

の文章を付け足して完成です。
※javascriptで「case 'dragonMaid': 」と名称設定したら、HTML上でも「<option value='dragonMaid'>」と書かないといけません。アルファベットの大文字小文字が区別されているのでご注意を。（dragonmaidやDragonMaidと書くと合致しません）

「画面に"検索"ボタンがあるけど、これはどういう時に使う？」

ここですね。展開を作成している途中で、別のカードが必要になったとき用います。

「どういうこと？」

基本的に、カードを操作したいなら、事前にjs（javascript）のコードを改変して「//好きなテーマのカード群やスリーブ、背景を表示する」でカード画像URLを設定しないといけないです。

例えばスクラップ・リサイクラー1枚からの展開を作りたいと思ったら、リサイクラー・オライオン・幻獣機トークン・ワイバーン・ゴーレム・・・の画像URLをすべて自分で探してコピーしてJavaScriptコードに貼り付けないといけない。

でもそれは大変ですよね🤔一時的に必要なだけのカードのためにそんなことしたくない。
そこでこの検索欄を使って、ちょっと必要なカードがあったら検索して表示できるようにしているんです。
（逆に、よく使うカードはAPIで毎回呼び出すのが面倒だからテンプレートとして記しておくという見方もできます。）

「検索ボタンを押しても反応しない」

使用するにはAPIキーが必要なため、そのままでは使用できないようにしています。

「どうやったら使える？」

Googleアカウントを使用して、カスタム検索のAPIキーと検索エンジンIDを発行します。

「APIって？」

ざっくり言うと何かのサービスの機能を別のサービスで使えるようにするためのものです。Googleカスタム検索APIならGoogle検索の機能を今回のツールで使えるようにします。

「APIキーはどうやって発行すればいい？」

こちらのサイト

が分かりやすいです。

APIキーとIDを発行したら、JS（javascript）コードの最初にある文

const apiKey = 'sample';
const searchEngineId = 'sample';

の記述を探して、

const apiKey = 'A1b_C2d_E3_fG4h_I5jK6_lM7nO8_p';
const searchEngineId = '9m87mh6541j321';

のように書き換えてください。

「なんでAPI設定しないと使えないようにした？」

私が発行したAPIキーを隠さず共有することもできますが、その場合第三者に悪用されるリスクがあるためです。それで利用者自身が発行する形にしています。

※ご自身で発行したAPIキーも他者に知られないようご注意ください。

「万が一APIキーを知られたらどうなる？」

あくまでGoogle検索APIの話ですが、無料で使うなら検索機能は1日100回までと決められています（毎日夕方5時頃にリセットされる）し、もっと使いたいなら課金設定しておく必要があります。つまり、もし誰かにAPIキーを知られたら、1日100回の上限を埋められたり勝手に課金されたりするんです。

もちろんAPI機能が何回使われたかは常に確認できますし、一度発行したものは捨てて再発行も可能ですが、念のためご注意ください。

「どんなカードを呼び出せる？」

色々できます。

「焔聖騎士リナルド site:db.yugioh-card.com」と検索したら遊戯王データベースの画像が使えます。

「宝玉の絆シークレット」や「SD44-JPP05 シークレット」「LDS1-EN112 secret rare」などと検索すれば、型番やレアリティ、言語を指定できます。

未発売のカードを使いたいときも、現在未発売のカード名で画像検索して掲載していそうなサイトを指定して検索すれば出てきやすいです。

「なら遊戯王カード画像じゃなくても呼び出せるのでは？」

その通りです。原理的にはGoogle画像検索で一番上に出てきた画像をそのまま使っているだけなので、オリカや風景の画像、アニメキャラの画像、他カードゲームの画像も動かせます。適当な語句で検索したら無関係の画像が出てくるし、「ミッ◯ーマウス」と入力したらあのネズミが出てきます。

「画像が何でも使えるというのは良くないのでは？」

仰る通りです。ですので、このツールを使って金銭をやり取りする行為はお控えください。このツールはあくまで展開を簡単に公開するためのものです。

「下の"一手戻して最後のログ削除"や"再生"はどう使う？」

操作ミスしたときに取り消したり、記録されたログを再生したりできます。下の動画を参照ください。

https://video.twimg.com/ext_tw_video/1684945232696328192/pu/vid/540x934/7fXQRJrYB2iIT_ds.mp4

追記

公開後、何点か修正しました！↓の悩みに応えています。

「ゾーンを押しても一覧表示されない」

カードがゾーンに収まっていない可能性があります。画像のような状態ではないでしょうか？

元々、ゾーンを押したら何が起こるかというと、ページ上のすべてのカードのうち対象ゾーンに綺麗に収まっているものだけを抽出しているんです。（javascriptのこの部分です）

return objectRect.top > zoneRect.top  && objectRect.bottom < zoneRect.bottom && objectRect.left > zoneRect.left && objectRect.right < zoneRect.right;

上辺・下辺・右辺・左辺すべてがゾーンの内側にあるようなカードだけをフィルターしているため、画像のように少しはみ出している状態だと抽出できない可能性があります。
→条件が厳しかったため少し緩くしました。

return objectRect.top > zoneRect.top - 15 && objectRect.bottom < zoneRect.bottom + 15 && objectRect.left > zoneRect.left - 15 && objectRect.right < zoneRect.right + 15;

15ピクセルほど幅を持たせたので、結構楽になったと思います。

「誤操作で戻るボタンを押してしまい情報が消えた」

これも結構悲しくなるので対処済みです。最新版では戻るボタンを無効化しており、押すと以下のメッセージが表示されます。

また、テーマを変更したときにAPI呼び出ししたカードやログが無くなるんですが、それも注意喚起するように改修しました。

「再生するスピードが遅すぎる（速すぎる）」

今までは1.2秒間隔しか選べませんでしたが、バリエーションを増やして0.8秒・1.0秒・1.2秒・1.4秒・1.6秒から選べるようにしました。お好みのを選んでください。

「音ズレがある」

2023/10/14更新すみません不備です！修正中
→2023/11/03 最新版で修正されました。

「カードリストがバラバラで見づらい」

従来はカードの順番がバラバラになっていて目的のものを探しにくかったですが…

整列できるようにしました。

やり方は簡単で、javascriptコードにある

createCardElement('card1', 'https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQkuE5L5eZWTYwe78pUJBR6VK28OREmV-sq-w&usqp=CAU');

「createCardElement」の行に「, 'ef'」などの言葉を付け足して

createCardElement('card1', 'https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQkuE5L5eZWTYwe78pUJBR6VK28OREmV-sq-w&usqp=CAU', 'ef');

とするだけです。「ef」はeffectの略で効果モンスターを指します。
他のカード種類は、

      const typeOrder = {
        no: 1, //normal通常モンスター
        ef: 2, //effect効果モンスター
        ri: 3, //ritual儀式モンスター
        pe: 4, //pendulumペンデュラムモンスター
        fu: 5, //fusion融合モンスター
        sy: 6, //synchroシンクロモンスター
        xy: 7, //xyzエクシーズモンスター
        li: 8, //linkリンクモンスター
        sp: 9, //spell魔法カード
        tr: 10, //trapトラップカード
        ot: 11, //otherその他。他の種類も追加可能
      };

このコードで定義しています。
「, 'pe'」を付け加えたらペンデュラムモンスターとして整列され、「, 'sy'」と書いたらシンクロモンスターとして並び替えされるということです。（今後カードの種類が増えてもこの部分をカスタマイズして対応可能です）
javascriptで登録しているカードの数が多くなって見づらいな…と思ったときにご活用ください。
※ペンデュラムモンスターとして扱ったからといって、Pゾーンにしか発動できなくなる訳ではありません。（前述の通りスクリプトがないため）
※また、整列させるには自分でjavascriptコードを手入力しないといけないため、そこは頑張ってください。手間なのは最初だけです！javascriptコードで宝玉獣（case: 'crystalBeast'）と焔聖騎士・イグナイト（case: 'infernobleIgKnight'）のところで実際に書いてるので真似てみてください🙌
→2023/10/14更新最新版ではすべてのテーマ（宝玉獣、焔聖騎士イグナイト、SPYRAL、月光、六武衆、ふわんだりぃず、魔界劇団、機界騎士、海晶乙女、ヴァレット、魔術師、転生炎獣、ドレミコード、六花・ナチュル、マジェスペクター等々）が最初から整列されています！より便利になりました。

「JavaScriptコードを書くのが面倒」

2024/03/17追記。作業を簡略化するツールができました！下記投稿のURLからダウンロードしてください。

#遊戯王ソリティアツールテーマごとのJavaScriptコードメーカーができました！
createCardElement('card1', 'https://sample.jpg', 'ef');
と書く手間がなくなりました👏

↓リンクからDLできます。APIキーと検索エンジンIDをコード内に書いて使用してください🙌https://t.co/efeUu10gQo pic.twitter.com/VlAZh7af5v
— mira (@aBhs1hpE9cVWYSW) March 17, 2024

最後に

説明は以上になります。このツールが何かの助けになれば嬉しいです。
使い方についてはある程度説明できたかと思いますが、意味不明な点はまだまだあると思うので気軽に聞いてください。
コードのアルゴリズム改変や、このツールを使った動画投稿などご自由にどうぞ。
ただし、私の勉強のため改変する際はお知らせください。また自作発言はお控えください！

それではよき遊戯王ライフを🙌

2024/03/03追記。

JavaScriptでどんな風に制御したのか分かる説明を書きました！下記リンクからどうぞ。

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