Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
勝敗カウントページの製作
Search
suzakutakumi
May 21, 2021
Programming
0
15
勝敗カウントページの製作
好きなVTuberの生配信用に勝敗カウントページを作成したお話。
suzakutakumi
May 21, 2021
Tweet
Share
More Decks by suzakutakumi
See All by suzakutakumi
ピクロス作成の中間発表
suzakutakumi
0
80
しゅみろん
suzakutakumi
0
98
trap-search
suzakutakumi
0
33
Pyramid Makerの作成
suzakutakumi
0
14
マークダウンパーサーの自作
suzakutakumi
0
91
絵文字ジェネレータボットの作成
suzakutakumi
0
120
send_discord
suzakutakumi
0
36
独自ドメインについて
suzakutakumi
0
25
ESP32とAlexaを用いたエアコン制御
suzakutakumi
0
1.1k
Other Decks in Programming
See All in Programming
新宿ダンジョンを可視化してみた
satoshi7190
3
390
AWS CDKコントリビュートTIPS / aws-cdk-contribution-tips
gotok365
4
390
Amazon SQSコンシューマー疎結合への旅 - 出張! #DevelopersIO IT技術ブログの中の人が語る勉強会 #3
quiver
0
310
AmperとFleetを使ったAndroidアプリ
yoppie
0
260
Behind VS Code Extensions for JavaScript / TypeScript Linnting and Formatting
unvalley
6
1.2k
敵対的ポイフル
futabato
0
130
サイコロで理解する統計的仮説検定の考え方
tatamiya
4
1k
Ruby GitHub Packages
bkuhlmann
0
640
Fast JSX: Don't clone props object #28768
yossydev
1
190
Micro Frontends for Java Microservices - Utah JUG 2024
mraible
PRO
1
110
Let's learn code review
riofujimon
2
580
CA.swift19 恋するAIアプリ開発の裏側
oskmr
0
380
Featured
See All Featured
Being A Developer After 40
akosma
66
580k
Six Lessons from altMBA
skipperchong
22
3k
The Brand Is Dead. Long Live the Brand.
mthomps
49
29k
How to train your dragon (web standard)
notwaldorf
75
5.2k
Code Review Best Practice
trishagee
56
15k
BBQ
matthewcrist
80
8.8k
Optimizing for Happiness
mojombo
370
69k
The Language of Interfaces
destraynor
151
23k
Product Roadmaps are Hard
iamctodd
45
9.7k
VelocityConf: Rendering Performance Case Studies
addyosmani
321
23k
Imperfection Machines: The Place of Print at Facebook
scottboms
261
12k
RailsConf 2023
tenderlove
8
560
Transcript
勝敗カウントページの製作 5/21 やましょう会
自己紹介 HN:朱雀 匠(本名:鈴木 拓眞) Twitter: @suzakutakumi3
None
None
他にも Web ・Flask ・Go言語(最近) ・React(最近)
最近は見ているVTuber 三ヶ野エンタさん 6ボールパズルをメインでプレイしているVTuber(オス)
動画URL:https://www.youtube.com/watch?v=8DHUgCvj9yw
手で再入力するの面倒くさそうだな...
そうだWebページを作ろう! ・簡単そうなプログラム ・Reactの練習したい ・好きなVTuberに使ってもらえたら嬉しい
初期の構想 ・たぶんOBS Studio使ってるだろうから、トリミングはできそう ・「何勝 何敗 何連勝 最大何連勝」のそれぞれに「+」と「-」のボタンを作ろう ・「何勝」の「+」ボタンを押すと「何連勝」と「最大何連勝」も変化させよう ・「何敗」の「+」ボタンを押すと「0連勝」と変化させよう ・押し間違いがあるかもだから、テキストボックスで変えられるようにしよう
・文字サイズの変更も可能に使用 ・ちゃんとした見た目はあとでいいや
実装 ReactJSを利用して実装しました 今回、発生した問題 ・表示部分でforを使う方法 ・文字の大きさを変える方法
表示部分でforを使う方法 return( <div> {column[0]} {column[1]} {column[2]} {column[3]} </div> ) return(
<div> { for(let i=0;i<4;i++){ {column[i]} } } </div> )
表示部分で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> )
文字の大きさを変える方法 let [fontS,setFsize] = useState(20) let columnFont={ fontSize: fontS, }
return( <div> <span style={columnFont}> {column[i]} </span> </div> ) ・スタイルに関する変数はフックを使わ なくていい。 ・font-sizeのようなハイフンが入ったも のは、ハイフンを無くし次の文字を大文 字にする。
出来たページ 次は見た目をしっかりさせよう。
ちょっと待った!!!!! 表示させる文字が白色だ!
構想2 ・文字色を変えられるようにしよう ・背景を透過させよう ・見た目を良くしよう
文字色を変えられるようにしよう let [fontColor, setFcolor] = useState("#000000") return( <input value={fontColor} type="color"
onChange={ (e) => { setFcolor(e.target.value) } } /> ) 簡単! e.target.valueで色の値が持ってこれる!
背景を透過させよう ブラウザ自体の透過は無理 諦めるか... 待てよ! OBS Studioでうまくやればいけないか?
背景を透過させよう ウィンドウキャプチャ じゃなくて、 ブラウザからなら行けるのでは
背景を透過させよう
出来たページ2
待てよ! 完全な透過じゃない! <input type=”color”>がOBSだと使えない
構想3 ・透過の%を設定できるようにしよう ・OBSで文字色を変えられるようにしよう
透過の%を設定できるようにしよう 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で簡単に実装できた!
OBSで文字色を変えられるようにしよう <input style={{width:200,height:60,fontSize:"1em"}} value={fontColor} type="text" onChange={(e) => { setFcolor(e.target.value) }
} /> またまた、これもe.target.valueで簡単に実装! ただ、本当は入力を16進数のみにしたかった。
出来たページ3
出来たページ3 出来たページはGitHub Pagesを利用して公開しました また、README.mdに使い方を書きました https://suzakutakumi.github.io/result-page/
その後 VTuberさんにTwitterでDMしました! https://twitter.com/mikeno_enta /status/1394254953019895810
結果(まじめ) ・Reactの基礎的な技術について学べた ・Github Pagesで初めてWebページを公開した
結果(感情) ・好きなVTuberとDMができた ・また、フォローもされました ・自分の作ったものが動画で出る ・ニューラルネットワークが完成した時より、嬉しかった
今後 ・背景色を変えられるようにしたい ・フォントを変えられるようにしたい ・数の前後の文字も変えられた方が便利かもしれない
まとめ Reactの勉強にも、好きなVTuberの応援にもなった 皆さんも好きな人にプログラムのプレゼントはいかがです か?