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
23
勝敗カウントページの製作
好きなVTuberの生配信用に勝敗カウントページを作成したお話。
suzakutakumi
May 21, 2021
Tweet
Share
More Decks by suzakutakumi
See All by suzakutakumi
ピクロス作成の中間発表
suzakutakumi
0
90
しゅみろん
suzakutakumi
0
150
trap-search
suzakutakumi
0
39
Pyramid Makerの作成
suzakutakumi
0
21
マークダウンパーサーの自作
suzakutakumi
0
100
絵文字ジェネレータボットの作成
suzakutakumi
0
150
send_discord
suzakutakumi
0
48
独自ドメインについて
suzakutakumi
0
39
ESP32とAlexaを用いたエアコン制御
suzakutakumi
0
1.3k
Other Decks in Programming
See All in Programming
今から始めるClaude Code入門〜AIコーディングエージェントの歴史と導入〜
nokomoro3
0
150
ぬるぬる動かせ! Riveでアニメーション実装🐾
kno3a87
1
220
今だからこそ入門する Server-Sent Events (SSE)
nearme_tech
PRO
3
190
🔨 小さなビルドシステムを作る
momeemt
4
680
知っているようで知らない"rails new"の世界 / The World of "rails new" You Think You Know but Don't
luccafort
PRO
1
110
Putting The Genie in the Bottle - A Crash Course on running LLMs on Android
iurysza
0
140
MCPでVibe Working。そして、結局はContext Eng(略)/ Working with Vibe on MCP And Context Eng
rkaga
5
2.3k
Namespace and Its Future
tagomoris
6
700
The Past, Present, and Future of Enterprise Java with ASF in the Middle
ivargrimstad
0
100
2025 年のコーディングエージェントの現在地とエンジニアの仕事の変化について
azukiazusa1
24
12k
意外と簡単!?フロントエンドでパスキー認証を実現する WebAuthn
teamlab
PRO
2
740
[FEConf 2025] 모노레포 절망편, 14개 레포로 부활하기까지 걸린 1년
mmmaxkim
0
1.6k
Featured
See All Featured
No one is an island. Learnings from fostering a developers community.
thoeni
21
3.4k
How To Stay Up To Date on Web Technology
chriscoyier
790
250k
CSS Pre-Processors: Stylus, Less & Sass
bermonpainter
358
30k
Dealing with People You Can't Stand - Big Design 2015
cassininazir
367
27k
The Pragmatic Product Professional
lauravandoore
36
6.9k
GraphQLとの向き合い方2022年版
quramy
49
14k
Scaling GitHub
holman
463
140k
Visualizing Your Data: Incorporating Mongo into Loggly Infrastructure
mongodb
48
9.7k
[RailsConf 2023 Opening Keynote] The Magic of Rails
eileencodes
30
9.7k
Keith and Marios Guide to Fast Websites
keithpitt
411
22k
What’s in a name? Adding method to the madness
productmarketing
PRO
23
3.7k
We Have a Design System, Now What?
morganepeng
53
7.8k
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の応援にもなった 皆さんも好きな人にプログラムのプレゼントはいかがです か?