作ったモノ
実際に印刷したもの
ここで実際にクソゲーを作れます
アナログゲームプロトタイプメーカー
github
何故作ったのか
ちょうどreactを勉強したいが、せっかくなので何か作りたい。
同人活動でアナログゲームを作っているが、プロトタイプを作るのが毎回大変だった。
海外産の遊戯王ジェネレータ等を使っても日本語だと文字化けしたり、改行がズレたりといまいち。
そういうわけで、作った。
あと、当時正式版が公開されたばかりのbootstrap4も使ってみたかった。
工夫した点
印刷して使う事が前提だったので、
切り離しやすいよう1枚目の紙と2枚目の紙でカードの位置がズレないようにした。
技術的な点
・印刷時は9枚単位で改ページする
CSSに'page-break-after: always'なるものがいる、便利なものは使う。
・カード3つ毎にdivで囲む。カード9つ毎にまたdivで囲む。
3つで次の行、9つで前述のpage-break-afterをするため、divで階層化したかった。
今思えばCSS疑似クラスでいけそうだけど気にしない。
こういう感じにしたかった。
for(var i=0;i < カードの枚数;i++){
if(i%9 === 0) {
<div className="page-break"> //9枚ごとに次の紙に印刷
if(i%3 === 0) {
<div className="row">//3枚ごとに改行
}
<Card>
if(i%3 === 0) {
</div>
}
</div>
}
}
JSXの中ではforが使えず、上記のコードは上手くいかない。困った。
というわけでこうなった。
{
//this.card_row_limitは3
Object.keys(this.cardlist).filter(key => key%this.card_row_limit === 0).map(
(carddata,i) => {
return React.createElement('div',{className:'row'},((row_data,num) =>
Object.keys(this.cardlist).filter(key => ((key >= num*this.card_row_limit) && (key <= num*this.card_row_limit+(this.card_row_limit-1)))).map(
(row_card_data,in_row_number) => {
var card_num = num*this.card_row_limit+in_row_number
return React.createElement(CardBox, {data:this.cardlist[card_num], index:card_num, ref:"card"+(card_num)})
}
)
)(this.cardlist,i))
}
)
}
皆さんはそれぞれのネストが何しているか分かりますか？
マジな話、オレは分からない
半年前の俺によると
this.cardlistがカードのデータ。3枚目のカードならthis.cardlist[3]。
cardlistからキーを取得して、filterで3の倍数だけ取得、それを1回目のmapでループ。
return React.createElement('div' で divを作る。
第三引数で今度はカードリストのうち、123 や 456 など3つを返すようにしてあげるためまたfilterとmap
らしい。へーすごいね。
・JSXの中でforは使えず、ループはmapで行う
・mapの返り値としてReact.createElementオブジェクトを返す事で,タグとかコンポーネントが生成できる
という感じ。
このときちょうどlaravelも学習しており、JSXもbladeみたいなテンプレートエンジン族だと思っていた。
実際にはjavascriptの拡張記法。
margin-leftがmarginLeftだったりclassがclassNameな事にキレ散らかしていたが、classはjavascriptの予約語だし当然である。
あと、bootstrap4普通にいい感じだった。
今後なんとかしたい点
・バグ潰し(xの調整がうまくいってない)
・canvasにして画像として保存できるようにする
頑張って作ったので使ってね。
クソアプリその２
「React完全に理解したし次いこう」
となってディープラーニングに手を出した。
エロゲの立ち絵っぽいか判定するマン
めっちゃ頑張って正解率96%まで伸ばしたが、
あんまりイイネがつかなくて悲しかったので誰か使ってほしい
何に使うかわからないが、せめて学習済みモデルだけでも。
ちなみに、冒頭で作ったカードゲームはつまらなかった。