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
91
しゅみろん
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
40
ESP32とAlexaを用いたエアコン制御
suzakutakumi
0
1.3k
Other Decks in Programming
See All in Programming
Building, Deploying, and Monitoring Ruby Web Applications with Falcon (Kaigi on Rails 2025)
ioquatix
4
2.1k
なぜGoのジェネリクスはこの形なのか? Featherweight Goが明かす設計の核心
ryotaros
7
1.1k
私達はmodernize packageに夢を見るか feat. go/analysis, go/ast / Go Conference 2025
kaorumuta
2
550
『毎日の移動』を支えるGoバックエンド内製開発
yutautsugi
2
240
Go言語はstack overflowの夢を見るか?
logica0419
0
270
Swift Concurrency - 状態監視の罠
objectiveaudio
2
520
CSC509 Lecture 04
javiergs
PRO
0
300
タスクの特性や不確実性に応じた最適な作業スタイルの選択(ペアプロ・モブプロ・ソロプロ)と実践 / Optimal Work Style Selection: Pair, Mob, or Solo Programming.
honyanya
3
170
開発生産性を上げるための生成AI活用術
starfish719
3
740
overlayPreferenceValue で実現する ピュア SwiftUI な AdMob ネイティブ広告
uhucream
0
180
2分台で1500examples完走!爆速CIを支える環境構築術 - Kaigi on Rails 2025
falcon8823
3
3.6k
GraphQL×Railsアプリのデータベース負荷分散 - 月間3,000万人利用サービスを無停止で
koxya
1
1.3k
Featured
See All Featured
Creating an realtime collaboration tool: Agile Flush - .NET Oxford
marcduiker
32
2.3k
The Art of Delivering Value - GDevCon NA Keynote
reverentgeek
15
1.7k
Fantastic passwords and where to find them - at NoRuKo
philnash
52
3.4k
RailsConf 2023
tenderlove
30
1.2k
Put a Button on it: Removing Barriers to Going Fast.
kastner
60
4k
[Rails World 2023 - Day 1 Closing Keynote] - The Magic of Rails
eileencodes
37
2.6k
How to Create Impact in a Changing Tech Landscape [PerfNow 2023]
tammyeverts
55
3k
Speed Design
sergeychernyshev
32
1.2k
Designing for humans not robots
tammielis
254
26k
Building Flexible Design Systems
yeseniaperezcruz
329
39k
Navigating Team Friction
lara
190
15k
What’s in a name? Adding method to the madness
productmarketing
PRO
23
3.7k
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の応援にもなった 皆さんも好きな人にプログラムのプレゼントはいかがです か?