へんてこのブログ

日々気づいたことや、最近やっていることを書いています

「マーダーミステリーをユナドリウム対応する時に必要なアレ」を作るツールを開発した話

マーダーミステリーを作ってユナドリウム対応する時って、こういった証拠カードみたいなの必要ですよね。

証拠カード裏
証拠カード表

こういったカード画像を作るツールを開発した、という話です。

Card Maker Kunを作りました

こういうのって凝る人は凝るけど、凝らない人は凝らずに、誰かが用意したテンプレを使いたいですよね。
そして大体凝る人はイラレなどを使うと思います。

今回は凝らない人向け、サクッと作りたい人向けのツールを作りました。
プロトタイプにも使えるかなと思います。

https://henteko.github.io/card-maker-kun/

Card Maker Kun

使い方は簡単。

  1. 色を選択する
  2. 文字を入力する
  3. Exportする

これだけ。
色もカードデザインの装飾も、シンプルなものを選んでみました。

作った理由

初めてマーダーミステリーを作ってみました。

blog.henteko07.com

その中で、絶対にユナドリウム対応を行いたかったので、ユナドリウム用の画像をどうにか用意する必要がありました。
しかし普通にイラレとかで作るのはなんか違う……そもそも今クリエイティブクラウドのサブスク解約しちゃったし……。

ということで、イラレがないならHTMLで作ればいいじゃない、と思いCard Maker Kunを作りました。

HTMLって文書用の仕組みかと思いきや、画像生成ツールでもあるんですね、便利ですね。

CSSでスタイルを付けて、Canvasに変換してます

Card Maker Kunの仕組みは簡単です。
CSSでスタイルを付けて、Canvasに変換後、画像としてダウンロードするようにしています。
全てブラウザ上で完結しているので、GitHub Pagesで公開しています。

github.com

DOMをCanvasに変換するのにはhtml2canvasを使っています。
今回初めて使いましたが、便利ですね。

html2canvas.hertzen.com

今回もHTML手書きです

最近謎にReactとかVueを使わずに、HTMLをそのまま書く、みたいなのにハマってます。
というかこの程度のHTML手書きじゃなくReactとか使ってたら重すぎる気もしますね。

HTMLは手書きが一番ですね。
Buildとかしなくて済むし。

まとめ

Card Maker Kunというマーダーミステリーの証拠カードを作るツールを開発した話でした。
マーダーミステリーを作った際は、ぜひ使ってみてください。

https://henteko.github.io/card-maker-kun/