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
22
勝敗カウントページの製作
好きなVTuberの生配信用に勝敗カウントページを作成したお話。
suzakutakumi
May 21, 2021
Tweet
Share
More Decks by suzakutakumi
See All by suzakutakumi
ピクロス作成の中間発表
suzakutakumi
0
89
しゅみろん
suzakutakumi
0
140
trap-search
suzakutakumi
0
38
Pyramid Makerの作成
suzakutakumi
0
20
マークダウンパーサーの自作
suzakutakumi
0
100
絵文字ジェネレータボットの作成
suzakutakumi
0
150
send_discord
suzakutakumi
0
46
独自ドメインについて
suzakutakumi
0
38
ESP32とAlexaを用いたエアコン制御
suzakutakumi
0
1.3k
Other Decks in Programming
See All in Programming
Startups on Rails in Past, Present and Future–Irina Nazarova, RailsConf 2025
irinanazarova
0
100
VS Code Update for GitHub Copilot
74th
2
640
#kanrk08 / 公開版 PicoRubyとマイコンでの自作トレーニング計測装置を用いたワークアウトの理想と現実
bash0c7
1
770
PHPで始める振る舞い駆動開発(Behaviour-Driven Development)
ohmori_yusuke
2
390
システム成長を止めない!本番無停止テーブル移行の全貌
sakawe_ee
1
200
初学者でも今すぐできる、Claude Codeの生産性を10倍上げるTips
s4yuba
16
11k
20250628_非エンジニアがバイブコーディングしてみた
ponponmikankan
0
680
Porting a visionOS App to Android XR
akkeylab
0
460
Quand Symfony, ApiPlatform, OpenAI et LangChain s'allient pour exploiter vos PDF : de la théorie à la production…
ahmedbhs123
0
190
今ならAmazon ECSのサービス間通信をどう選ぶか / Selection of ECS Interservice Communication 2025
tkikuc
21
4k
プロダクト志向なエンジニアがもう一歩先の価値を目指すために意識したこと
nealle
0
130
ISUCON研修おかわり会 講義スライド
arfes0e2b3c
1
440
Featured
See All Featured
The Illustrated Children's Guide to Kubernetes
chrisshort
48
50k
Fantastic passwords and where to find them - at NoRuKo
philnash
51
3.3k
Bash Introduction
62gerente
613
210k
実際に使うSQLの書き方 徹底解説 / pgcon21j-tutorial
soudai
PRO
181
54k
Distributed Sagas: A Protocol for Coordinating Microservices
caitiem20
331
22k
Measuring & Analyzing Core Web Vitals
bluesmoon
7
510
How To Stay Up To Date on Web Technology
chriscoyier
790
250k
We Have a Design System, Now What?
morganepeng
53
7.7k
Visualization
eitanlees
146
16k
Stop Working from a Prison Cell
hatefulcrawdad
271
21k
Side Projects
sachag
455
42k
The Success of Rails: Ensuring Growth for the Next 100 Years
eileencodes
45
7.5k
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の応援にもなった 皆さんも好きな人にプログラムのプレゼントはいかがです か?