勝敗カウントページの製作

好きなVTuberの生配信用に勝敗カウントページを作成したお話。

Transcript

1. 勝敗カウントページの製作 5/21 やましょう会
2. 自己紹介 HN:朱雀 匠(本名:鈴木 拓眞) Twitter: @suzakutakumi3
5. 他にも Web ・Flask ・Go言語(最近) ・React(最近)
6. 最近は見ているVTuber 三ヶ野エンタさん 6ボールパズルをメインでプレイしているVTuber(オス)
7. 動画URL:https://www.youtube.com/watch?v=8DHUgCvj9yw
8. 手で再入力するの面倒くさそうだな...
9. そうだWebページを作ろう! ・簡単そうなプログラム ・Reactの練習したい ・好きなVTuberに使ってもらえたら嬉しい
10. 初期の構想 ・たぶんOBS Studio使ってるだろうから、トリミングはできそう ・「何勝 何敗 何連勝 最大何連勝」のそれぞれに「+」と「-」のボタンを作ろう ・「何勝」の「+」ボタンを押すと「何連勝」と「最大何連勝」も変化させよう ・「何敗」の「+」ボタンを押すと「0連勝」と変化させよう ・押し間違いがあるかもだから、テキストボックスで変えられるようにしよう ・文字サイズの変更も可能に使用 ・ちゃんとした見た目はあとでいいや
11. 実装 ReactJSを利用して実装しました 今回、発生した問題 ・表示部分でforを使う方法 ・文字の大きさを変える方法
12. 表示部分でforを使う方法 return( <div> {column[0]} {column[1]} {column[2]} {column[3]} </div> ) return( <div> { for(let i=0;i<4;i++){ {column[i]} } } </div> )
13. 表示部分でforを使う方法 return( <div> {column[0]} {column[1]} {column[2]} {column[3]} </div> ) let showColumn=[]; for(let i=0;i<4;i++){ showColumn[i].push( <span>{column[i]}</span> ); } return( <div> {showColumn} </div> )
14. 文字の大きさを変える方法 let [fontS,setFsize] = useState(20) let columnFont={ fontSize: fontS, } return( <div> <span style={columnFont}> {column[i]} </span> </div> ) ・スタイルに関する変数はフックを使わ なくていい。 ・font-sizeのようなハイフンが入ったも のは、ハイフンを無くし次の文字を大文 字にする。
15. 出来たページ 次は見た目をしっかりさせよう。
16. ちょっと待った!!!!! 表示させる文字が白色だ!
17. 構想2 ・文字色を変えられるようにしよう ・背景を透過させよう ・見た目を良くしよう
18. 文字色を変えられるようにしよう let [fontColor, setFcolor] = useState("#000000") return( <input value={fontColor} type="color" onChange={ (e) => { setFcolor(e.target.value) } } /> ) 簡単! e.target.valueで色の値が持ってこれる!
19. 背景を透過させよう ブラウザ自体の透過は無理 諦めるか... 待てよ! OBS Studioでうまくやればいけないか?
20. 背景を透過させよう ウィンドウキャプチャ じゃなくて、 ブラウザからなら行けるのでは
21. 背景を透過させよう
22. 出来たページ2
23. 待てよ! 完全な透過じゃない! <input type=”color”>がOBSだと使えない
24. 構想3 ・透過の％を設定できるようにしよう ・OBSで文字色を変えられるようにしよう
25. 透過の％を設定できるようにしよう return( <div　style={{backgroundColor:"rgba(255,255,255,"+opc+")"}}> … <input min="0.0" max="1.0" step="0.1" type="range" onChange={(e)=>{ setOpc(e.target.value) }}/> </div> ) これもe.target.valueで簡単に実装できた!
26. OBSで文字色を変えられるようにしよう <input style={{width:200,height:60,fontSize:"1em"}} value={fontColor} type="text" onChange={(e) => { setFcolor(e.target.value) } } /> またまた、これもe.target.valueで簡単に実装! ただ、本当は入力を16進数のみにしたかった。
27. 出来たページ3
28. 出来たページ3 出来たページはGitHub Pagesを利用して公開しました また、README.mdに使い方を書きました https://suzakutakumi.github.io/result-page/
29. その後 VTuberさんにTwitterでDMしました! https://twitter.com/mikeno_enta /status/1394254953019895810
30. 結果(まじめ) ・Reactの基礎的な技術について学べた ・Github Pagesで初めてWebページを公開した
31. 結果(感情) ・好きなVTuberとDMができた ・また、フォローもされました ・自分の作ったものが動画で出る ・ニューラルネットワークが完成した時より、嬉しかった
32. 今後 ・背景色を変えられるようにしたい ・フォントを変えられるようにしたい ・数の前後の文字も変えられた方が便利かもしれない
33. まとめ Reactの勉強にも、好きなVTuberの応援にもなった 皆さんも好きな人にプログラムのプレゼントはいかがです か?