見出し画像

DoA盤面を画像化するやつ/DoABoardPic

ゆふ


わ～～～～い！！！！！！！！　ツールができたぞ！！！！！

みてみて～～～～～～！！！！！！！！！！！！！！！！


これはなに？


TRPG「Dead or AliCe」の……ログをつくるときとかに使えるツール！！！

引いたカードをこうやって入力して、あと画像を設定して、あれそれすると……

こういう画像がつくれます！！！

そんな感じのツールです！！！！！！！！

界隈ではカードを引いたとき、こういう感じで引いたカードをログに残しているのでコマンドはこれに準拠しています

Chrome以外では動作確認してないです。Firefoxでレイアウトが壊れるかもって噂があったりなかったりする。とはいえざっくり見てみたところ大丈夫かも。
ふるいブラウザはわかりません。

くわしいつかいかた


ボード設定

まずは画像の設定から！

これを
こう！

＊アイコン設定

「アイコン設定」を押してキャラの顔アイコンを設定します。
顔を載せたくない人はなんか透明な画像とか作って設定してください。

ボタンを押すと普通のファイル選択画面が開きます

画像を選んだらボード左上に反映されているはずです。かわいいね！

＊技能設定

これも普通のファイル選択画面が開きます

技能設定も普通のファイル選択画面が開きます。

DoA公式ルールブックのシート類から技能アイコンをダウンロードして、それを設定してください。

（技能はプルダウンで選ぶ形にするのもいいかなと思ったんですが、アップデートやサプリで技能が増えたりするので、都度サポートをし続けるのがたいへんだからこのような形にしました）

また、圧縮などの装備技能、勤勉・凡庸などの高脅威度帯の技能、希望などの切り札を複数持てる技能用に、1つの枠に複数の技能を置けるようになっています。技能追加ってところをクリックしてみてね。

これでボード設定はおしまい！


カード入力とか

コマンドを読み込んだらカードが表示されます
技能と重なっちゃったら上にずらせる！
めっちゃA引いちゃってJokerと重なっちゃったときにJokerをずらすこともできます

＊カードよみこみ

いつもこういう感じでログにカード残してるならコピペしてボタンを押すだけ！
そうじゃなかったら手動でぽちぽち打ち込んでみてね。

＊上にずらす

選択した枠のカードを上にずらせます。ボタン1ポチで0.5マス。
いっぱい押したら押しただけ上にあがっていきます。
たのしいね。


ダウンロード

アイコンとカードつきの透過画像になります！！！
カードが枠をはみだしてしまった場合は、大きい画像保存ボタンは押さず、その下の画像保存（はみだした）を押してください

ボタンを押したら画像がダウンロードできます。
やった！！！！！！！！

＊画像保存（はみだした）

めっちゃカードを引いた、タワーが立ったりしたなどの理由でカードが枠をはみだしてしまった場合は、画像保存（はみだした）を押してください。
枠の上に2枚くらいはみだしてタワーが立っても拾えます。
拾えなかったらすみません……諦めてください……なんかそういうパターンが増えるなら対応するかもしれないけど……



……と、こういうかんじのツールです。



使った技術


HTMLとCSSとJavaScriptでやってます。なんかサーバーに送信したりとかそういうやつはやってないです。ぜんぶお手元のスマホとかPCとかで動くやつだとおもいます。たぶん。

html2canvas

HTMLを画像化するっていうツール。厳密に言うとcanvas化？　する？　らしい。（から、canvasになったやつをjavascriptで保存させる工程が必要だった）わかんないけどすごいツールらしいです。すごいらしい。すごい。なんもわからんけどべんりだなっておもいました。

普通に各自でスクショ撮ってねって任せてもよかったんだけど、透過画像にしたかったのでなんかいいのないかなって探したら見つかった。

これTwitterで検索かけて初めて知ったんですけどティラノ製ゲームのセーブ画面のスクショのところにも使われてるらしいですね。

こまごまとしたJavaScriptのやつ

splitで入力された文字列を分割して配列にしたりとか、toLowerCaseで文字列ぜんぶ小文字にしたりとか、filter(Boolean)で空の配列を削除してみたりとか、

カード読み込みしたらappendChildで無限にカードが増え続けちゃうのを、replaceWithでカードスロット置き換えしてことなきをえたりとか。

getBoundingClientRectで座標取得したりとか……それで「相対的に25px上に移動させる」みたいな処理をつくったりとか。（絶対位置じゃなくて毎回計算してます）

あと画像プレビュー機能とかに使われてる技術をちょっとこねて画像読み込みに使ったりとか。

なんかそういうやつを都度ググりながらやってました。

あとなんか二次元配列とかいっぱいつかった。一瞬通ってた大学、二次元配列の話が出てすぐやめちゃったので配列とかなんもわかんないなって思ってたんですけど、やってみたらできたのでよかったです（日記）。


スペシャルサンクス

16Jacksでログ担当をやっていたら、参加者全員……計20人くらいのカード宣言ログが私の手元に集まったのでその力を利用しています。

みんなのカード宣言ログのおかげでできています。ありがとうみんな！！！


ほめてほめて～～～～～！


そんなかんじです！！！

ツールをつくるとうれしいな！！！！！

DoAやってるひとはいっぱいつかってください！！！！！！！
ログ作る以外にも「あのときの手札再現してみた」とかの遊びに使えてたのしいです。わーい。

やってない人はなんかツールつくったんだなっておもってください。

なんだかたまにこういう機運がきます　ふって湧いてきて全然眠れなくなってガッとなんかやる期間がくる
生活を代償にできています
もしかしたら天才かもしれん
ほんとか？
生活は？


というわけでこの記事はおわり！　次回の機運にもご期待ください
次回の機運まで生きるために頑張って生活をやります……はい……


ところでツール作ると文章力がすごいだめになってふわふわっとした文章しか書けなくなるのでびっくりしました。なんで？

いただいたサポートは食費になったり医療費になったりしています　よろしければよろしくお願いします