土星の環の上から

自分の好きなことを自由に書き留める備忘録。

ヴァンガード(遊戯王)プロキシ作成用html - ver.2.01

最新版 サイトにしました。

saturnchro.hatenablog.com

 

 

ヴァンガード遊戯王のプロキシが作りたい

前回のカードサイズが間違ってました。

ヴァンガード遊戯王)のミニサイズは、

8.6*6.0 → 8.6*5.9

スリーブサイズで88*60とか見てるせいで間違ってました。

 カードゲームのサイズ規格統一してくれれば色々いいのに。スリーブとか。

TCGにおいて試運転はとても大切。付箋を挟むも良し、印刷するも良し、頭の中で回すも良し。

そんなお供に。

 

そんなわけでバージョンアップしました。ver.2.01です。

(リンク削除しました。)

※使い方

chromeで開く(それ以外で使ってないのでどうなるか不明)

・下のテキストボックスに画像のURL入れる

・右クリック→印刷→詳細設定→「余白:なし」で印刷

・点線に沿って切る

 概ねこれでいけるはずだけど環境によって大きさ変わると思うので適時調整で。

 なにかあればコメント(機能としてあるか知らないけど)等でください。

 

 

作業してる時に思った。

これコピペするよりドラッグドロップでできたほうが良くないかって。

9箇所の入れたいところに画像を引っ張るとサイズ合わせて表示されるので、あとは印刷余白なしで。

あと対策になるかわからないけど下に線と円を用意しました。

それぞれ6cmと10円玉のサイズになってるはず(1pxくらいずれてるかも)なので、印刷して定規当てるなり10円玉置くなりするとどのくらいずれてるかわかるんじゃないかなと。

これみて印刷の%といじってもらえればよりよくなると思いますので。

 

あと友人の希望によりカードとカードのスペースがなくなりました。

裁断機使う時別に空白なくていいとのこと。

 

それと、バージョンアップしてから思ったのが、

モニタ2枚で作業してるからコピペよりドラッグしたほうが楽なわけで、

モニタ1枚の人はドラッグして運べるスペースあるのかどうか。

なので前のURLをテキストに貼るタイプもカードサイズ合わせてバージョンアップしておきます。

(リンク削除しました。)

 

サイズ合わせ用のメモリと10円については設計の甘さですぐにきれいに追加

とはいかなそうなので要望あったらつけるくらいの感じで。

また、現状の仕様だとテキストボックスに画像ドラッグしてURLペーストしてもちゃんと表示されないのでご了承ください。そうゆうひとはver.2.01を。

 

 

技術的な話

最初はクリップボードにコピーされた画像URLをボタンで吐いてimgに入れようと思ったんだけどクリップボードの扱いは思いの他面倒だったのと、

画像ドラッグした時はなんの情報をドラッグしてるんだろうって思ったわけで。

どうやらURLをドラッグしてるらしいってわかったので、じゃあこれテキストボックスに入るじゃん(いろんなサイトのテキストボックスに画像ドラッグしてURL入るの確認してました。)

テキストボックスじゃドラッグ先小さくて誤操作したりちょっと面倒そう

じゃあこの四角にドラッグするか。

ってなわけで作りました。

 

テキストのDragDrop-JavaScript入門(HTML5編)

まんまテキストのドラッグドロップついて書かれていたので、ここからスタート。

どうやってマウスカーソル下の要素取得しようかなと。

divについたclass一気に拾ってfor文で全部に

ドロップされた時にこの要素の最初のimgタグにURLいれる

って感じな処理を追加

あとドラッグ関係はデフォルトの動作切らないとちゃんと動かないらしいですね。

(ドロップ操作の概要のところにかいてます。)

 

あとは体裁整える周りは

このあたりからうまーくやりました。

 

文字に起こすとすごく簡単そう。調べながらだったのでめちゃくちゃ時間かかりましたが。

だいたい「あーこんなんあったあった。」って言いながら作りました。

こんなんあったついでに