SvelteKitでカードゲームのプロキシメーカーを作りました

投稿日: 2023-11-04

概要

Magic: The Gatheringのプロキシカード作成にいい感じのWebアプリがなかったので、SvelteKitで作りました。

作ったアプリ: proxy-maker
ソースコード: github.com/tkancf/proxy-maker

背景

趣味でMagic: The Gathering（以降MTGと表記）をやっているんですが、カードが高いです。私が普段やっているルール（モダンフォーマット）だと、高いもので一枚15,000円ぐらいします。
一デッキ揃えると10万円とかになるので、ちょっと試してみようで買うには手が出しにくい値段になっています。そのため、まずは自分好みのデッキか試すためにプロキシカードを作成し、それで遊んでみて楽しければカードを買うという流れを私はよくやっています。

プロキシカードの作成方法は以下のような手順になります。お試し用なので私は印刷も裁断も雑にやってますが、それでも面倒な手順です。

カード画像を検索
- これは公式サイトにカード画像があるので、それを利用します
プロキシメーカーと呼ばれるWebアプリに画像URLを入れる or カード画像をアップロード
- ここでカード画像をまとめて印刷できるように並べてくれる
上記で出来た画像を印刷機で印刷
紙を裁断して、スリーブに入れる
試しに遊ぶ

特に「プロキシメーカーと呼ばれるWebアプリに画像URLを入れる or カード画像をアップロード」については、既存のアプリに不満がありました。

モチベーション

不満に思っていたのは以下の点です。

カード画像アップロードではなく、画像URLを用意するだけでOKにしてほしい
- カード画像は公式にあるので、そのURLを一覧でバーっと書くだけでOKにしたい
画像URLは改行区切りの一覧でOKにしてほしい
- いちいち各画像のURLを別のテキストボックスに入力したくない
画像は9枚ずつとかではなく、何枚でも登録可能にしてほしい
- 一デッキに75枚は必要なので、9枚ずつ登録とかやってられない

上記不満を解決してくれるようなプロキシメーカーは探した限りでは見つかりませんでした。無いなら作るしかありません。フロントエンドはさっぱりですが、やりたいことはシンプルなので、なんとかなるかなと思いつつ作りました。

技術選定

技術選定する上で、検討した事項は以下です。

無料で維持できること
簡単に完成まで行けること

無料で維持できること

これについては機能的にフロントエンドだけで完結させられそうなので、デプロイ先にだけ注意すれば良さそうでした。
今回はCloudflare Pagesを利用しました。

簡単に完成まで行けること

これについては簡単の定義があいまいで難しいですが主な基準は公式ドキュメントだけ読めば大体完成まで行けること、利用者がそこそこいて情報に困らなさそうなことです。

最初はNext.jsで作成したんですが、App Router のルーティングとPages Routerのルーティングの情報が脳内でごちゃごちゃしてしまって、分からなくなったので一度破棄しました。
そのタイミングで、昔少しだけチュートリアルをやったSvelteを思い出したのでSvelteKitに乗り換えました。SvelteKitに乗り換えてからはサクサクっと完成まで行けました。
CSSについては、TailwindCSSが有名所のようだったのでこれを使いました。

詰まった部分

詰まった部分というか、これで良いのか良くわかっていない部分としては、ボタンを押して遷移するときに入力された内容を元に画像一覧を表示するため、入力された画像URL (imageUrls) を遷移先の画像一覧を表示するページへどう渡して上げるのが最適解なのかよく分かりませんでした。
同じ +layout.svelteを使っているページだったので、 +layout.svelte内で以下のようにしたんですが、これで正しいのか？？と思いつつやっていました。
やりたいことは出来ていますが...

 import { setContext } from 'svelte';
 let imageUrls: string[] = [];
 setContext('imageUrls', imageUrls);

該当箇所のGitHubリンク

+page.js を使うことでも出来そうかなと思っていて、どちらがより良い手法なのか分からんな〜と思っています。ちゃんとドキュメント全部読んでいないので、ちゃんと読めば書いてるかもですね。とりあえず完成を急いだので、後ほどドキュメントは全部目を通したいです。

CSSについては初心者なので大体ChatGPTに聞いて解決しました。いい時代ですね。

まとめ

この程度の規模感なら私でもフロントエンドできることが分かったので、前より恐れず色々と遊べそうだなと思っています。
また、SvelteKitも疑問はありつつも簡単で良かったので次もSvelteKit + なにかで作ろうと思っています。