めんたいグミの旅日誌

公開

カードを作れるようになりました!


こんにちは。
役に立たないものを作ることに定評のあるめんたいがお送りします。

今回はカードメーカー(仮名)なるものを作ってみました。
https://caravan.amamoring.com/cardmaker/

絵馬のような感じですが、こちらはトレーディングカード風になります。


主な使い方・機能など(アップデート含む)

・各種入力するとカードの内容が更新されます
・「カードの説明」はテキスト無しにするとヒーロー画のみのスッキリパターンになります
・カードの上でマウスを動かしたり、カードをスマホ画面でこすると少し動きます
・「カード画像を保存」を押すと平面のカードをPNG形式で保存します

(アップデート機能)
・条件入力欄を少しタブ化して縦スクロールを少し減らしてみました
・「ヒーローの重ね方」を追加し、「縦横を収める」のオプションも追加しました
 これにより画像が横に大きいヒーローや、縦に長いヒーローもレイアウトの可能性が上がります
・iPhoneでカード画像を保存できるようになりました
 データ出力にしているため、カメラロールに保存や直接X(旧Twitter)にシェアなどできるようになりました
・少しヒーロー画像を追加しました(ファンキット内であればまだ増やせます)
・少し背景画像を追加しました

(1/19アップデート機能)
・入力内容のセーブ/ロードが出来るようになりました
 ブラウザのローカルストレージに保存されます。
 間違えて上書きしやすいUIですが、戻すことはできません。
 間違えてしまったら、また入力し直しになってしまいます。

(イマイチなところ)
・フォントを色々と選択できるようにしたかったのですが、画像保存時のダウンロードに時間がかかったり、問題が多々出てしまい解決に時間がかかり過ぎるためシンプルにしました
画面表示のみならWebフォントを好きに増やせるのですが… (保存がねぇ)

以上です! 作っても物理攻撃力が上がる等のゲーム内影響は全くありませんが、暇つぶし程度でも楽しんでもらえたらと。




過去に作ったあまり使わなくなった遺物達

・料理レシピ
https://caravan.amamoring.com/cooking/

・各地の販売商品
https://caravan.amamoring.com/saleslist/


めんたいグミ

コメント

1

ルル

ID: jsyr9fw6nyvy

たのしそう!!!

2

めんたいグミ

ID: k85hjmw5asvp

>> 1
ありがとー!!

フォントが白でつぶれちゃう問題なおさなきゃだ…
Win PC、iPhone、Kindle Fireタブで試したけど、それ以外だとカード名のフォントが白一色になるのなかな??

macOSのSafari、Android、Firefoxあたりは未確認だけどそのあたりかな

3

ルル

ID: jsyr9fw6nyvy

>> 2

調べてみました。
カード作成は、Windows10のForefoxで作業しました。
Firefoxをダークモード化するアドオン(DARK READER)でダーク状態でカード作成した時に
キャラ名の白フチドリ黒文字が、白フチドリ白文字になるようです。
(キャラの説明文のフォロント色にも影響しているかもです?)

ダークモードを解除すると、本来のフォント色で再現されるようです。

4

めんたいグミ

ID: k85hjmw5asvp

>> 3
なるほど!
詳しい情報、ありがとうございます。

アドオン(DARK READER)と相性がよくなさそうですね。
反転を考慮した対応…何かできるかな

5

ルル

ID: jsyr9fw6nyvy


フォントやキャラが増えていて、すごいですね!


もし、可能でしたら、

カード作成中の中間状態を保存できると
キャラスト年末のビンゴカードのキープのような感じ?

カードを動かしてキラキラさせて遊べます。

中間状態を残せると、文字数を調整したり、フォントを変えたりもしやすくて
遊びが捗りそうです。

6

めんたいグミ

ID: k85hjmw5asvp

>> 5
ビンゴカードはURLがメールに送られてきたような記憶があります。
でも記憶違いで全然違うかもしれません。

・・・そんなこんなで、思い出せないのでブラウザに10個まで入力内容をセーブできるように変更してみました。
※細かい話ですが、サーバー側では保存データーは保持せず、クライアントのブラウザに保存されます

なんとなく古のJRPGのスロットイメージしたUIにしてみました。

間違えて上書きしてしまうと戻せないので注意です。また入力やり直しになります。

(動かなかったらすみません)

7

ルル

ID: jsyr9fw6nyvy

>> 6

早速セーブ機能を追加して下さり、ありがとうございます!
誤字の訂正やロール設定ミスとかに気付いた時に、さ!っと修正できて
めっちゃ使いやすくなりました!!
10キャラ分セーブできるので、思いついたカードを気軽に作れます。

8

ルル

ID: jsyr9fw6nyvy

アカリさんの追加ありがとうございます。
カード内のキャラクターを上下左右移動・拡大縮小が細かく設定出来て楽しいです。

9

めんたいグミ

ID: k85hjmw5asvp

>> 8
ありがとです。

ギャレッド・ハンを選択に追加したのですが、身体が左側に配置されている画像だったので、レイアウト調整用に横移動を追加してみました。

横移動するなら縦移動とズームもあっていいかなと思い、一緒に加えてみました。
他のヒーローでも極端なアップとか、横にこっそり隠せるので作る人により個性が出そうです。

…フォントも変えようとしたんですけど、やっぱりスマホが上手く保存できなくなる