見出し画像

【スマホ版】「デッキ分布図つくるマシーン」の取扱説明書

てぃら

はじめに

おはこんばんにちは。
ポケモンカードを触るより、ポケモンカードのためのアプリ開発をする時間の方が長くなりがちな、ゆるふわポケカプレイヤーです。

ありがたいことに、2021年7月に公開したChrome拡張機能版「デッキ分布図つくるマシーン」がじわじわと各所で使われています！
そんな利用者さまから「スマホでもデッキ分布図をかんたんにつくれるようにならない？」という声があったりなかったりしたので、スマートフォンでもデッキ分布図をかんたんにつくれるようにがんばってみました。
たぶん名前は「デッキ分布図つくるマシーン２号」とかです。

これは何？

ポケモンカードゲーム公式ホームぺージ「トレーナーズウェブサイト」のデッキ作成ツールを使って、下のようなデッキ分布図（デッキ使用率の円グラフ）をかんたんにつくれるブックマークレットです。
自主大会の参加デッキを一覧したり、シティリーグの上位入賞デッキをまとめる際などに、ご利用いただけると思います。

✓ 本ブックマークレットおよびその開発者は、「ポケモンカードゲーム」「ポケモン」等の登録商標を有する各企業と一切関係ありません。
✓ 本ブックマークレットの利用によって発生した損害等について、開発者はその責任を負いません。

「そもそもブックマークレットって何？」という人も多いと思うので、少し補足します。
ブックマークレットは、Webブラウザのブックマーク機能を利用して実行できる小さなプログラムです。
通常のブックマークでは、お気に入りページのURL（https://ほにゃらら）を登録しますが、実はこのURLのかわりにプログラム（JavaScriptで書かれたソースコード）を登録することができます。
するとブックマークを呼び出す要領で、現在開いているページに対して登録したプログラムを実行できるのです。なんか悪さできそう(※1)！

※1……実際にいくらでも悪さができます。信頼できない発行元のブックマークレットは、むやみに登録・実行しないようにしましょう。

どう使うの？

1. ブックマークレットの作成

まずはスマートフォンでWebブラウザ（Safari/Chrome）を開き、適当なページでブックマークを作成します。

ブックマークを作成したら編集画面を開き、わかりやすい名前（例えば「デッキ分布図」）に変更しておきます。
[URL] には、以下のソースコード(※2)をそのまま貼り付けます。

javascript:(function(){var%20url='https://blachocolat.github.io/ptcg-chart/generate.min.js';var d=document;var e=d.createElement('script');e.src=url;d.body.append(e);})();

※2……このプログラムでは、別途用意しているもっともっと長いプログラムを読み込んで実行しています。実際にどのような処理が行われているか確認したい人は、以下をご覧ください。
https://blachocolat.github.io/ptcg-chart/generate.js

2. デッキ分布の入力

次に「トレーナーズウェブサイト」のデッキ作成ツールを使って、デッキ分布を入力していきます。

ここで、「デッキ分布図の“デッキ１個”＝デッキ作成ツールの“カード１枚”」と読み替えます。
つまり、ある自主大会で《サーナイトex》デッキを使った参加者が18人いたなら、デッキ作成ツールで《サーナイトex》を18枚選択します。
通常のデッキ構築ではありえませんが、デッキ分布図をつくるために各カードが4枚を超えたり、合計枚数が60枚を超えても気にしないでください。

3. ブックマークレットの実行

ぽちぽちとデッキ分布を入力し終えたら、1.で作成したブックマークレットを実行します。
すなわち、通常のブックマークを呼び出すのと同じ要領で、当該ブックマークを開きます。
ただしChromeの場合、画面上部のアドレスバーから当該ブックマークを検索し、表示された当該ブックマークをタップする必要があります。

ブックマークレットが正しく実行されると、[選択されたカード] にある各カードの下にカード名を編集できるテキストボックスがそれぞれ追加されます。
これは、デッキ分布図のラベルとして表示されるカード名を好きな名称に変更できる機能です。
例えば、《キュワワー》を選択した際にデッキ分布図では《ロストバレット》と表示させる、などの使い方が考えられます。

4. デッキ分布図の作成

画面を最下部までスクロールすると、[デッキ分布図つくるマシーン] の項目が新たに追加されています。
ここでは、以下の設定を変更できます。

✓ デッキ分布図のタイトル
✓「その他」としてまとめる割合
✓ ラベルを隠す／隠さない
✓ 背景を透過する／しない

設定を適宜変更したら、[デッキ分布図をつくる] ボタンをタップしましょう。
しばらくすると、新しいタブ(※3)でデッキ分布図が画像（PNG形式）として表示されます(※4)。
あとは表示された画像を長タップしてダウンロードするなり、煮るなり焼くなり好きにしてください。

※3……Webブラウザ（Safari/Chrome）の設定で、ポップアップウインドウ（新しいタブの作成）が許可されていない場合、デッキ分布図を表示できません。
※4……一回の [デッキ分布図をつくる] では、カードの画像を正しく表示できないことがあります。その場合、同じ操作を何度か繰り返してみてください。

おわりに

あいかわらずめちゃくちゃニッチな用途ですが、人によっては便利なブックマークレットかと思うので、ぜひ使ってみてください。
私はおじさんなので困ったらパソコンをカタカタしますが、最近の若者はパソコンを持ってなくて何でもスマホでやっちゃうらしいし、たぶん便利なんちゃうん？ 知らんけど……

使い方の質問や機能追加の要望などがあれば、開発者のTwitterアカウント（@tilanosaur）までお問合せください。
機嫌がよければ、できる範囲で対応する可能性があります。

最後までお読みいただきありがとうございました！

いいなと思ったら応援しよう！