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
iOS 26にアップデートすると実機でのHot Reloadができない?
umigishiaoi
0
130
Python型ヒント完全ガイド 初心者でも分かる、現代的で実践的な使い方
mickey_kubo
1
120
Railsアプリケーションと パフォーマンスチューニング ー 秒間5万リクエストの モバイルオーダーシステムを支える事例 ー Rubyセミナー 大阪
falcon8823
5
1.1k
A full stack side project webapp all in Kotlin (KotlinConf 2025)
dankim
0
120
チームのテスト力を総合的に鍛えて品質、スピード、レジリエンスを共立させる/Testing approach that improves quality, speed, and resilience
goyoki
5
880
Node-RED を(HTTP で)つなげる MCP サーバーを作ってみた
highu
0
120
10 Costly Database Performance Mistakes (And How To Fix Them)
andyatkinson
0
340
ペアプロ × 生成AI 現場での実践と課題について / generative-ai-in-pair-programming
codmoninc
1
18k
猫と暮らす Google Nest Cam生活🐈 / WebRTC with Google Nest Cam
yutailang0119
0
120
設計やレビューに悩んでいるPHPerに贈る、クリーンなオブジェクト設計の指針たち
panda_program
6
2.1k
PostgreSQLのRow Level SecurityをPHPのORMで扱う Eloquent vs Doctrine #phpcon #track2
77web
2
530
#QiitaBash MCPのセキュリティ
ryosukedtomita
1
1.3k
Featured
See All Featured
The Illustrated Children's Guide to Kubernetes
chrisshort
48
50k
[RailsConf 2023 Opening Keynote] The Magic of Rails
eileencodes
29
9.6k
Gamification - CAS2011
davidbonilla
81
5.4k
A Modern Web Designer's Workflow
chriscoyier
695
190k
Building Better People: How to give real-time feedback that sticks.
wjessup
367
19k
Designing Dashboards & Data Visualisations in Web Apps
destraynor
231
53k
CoffeeScript is Beautiful & I Never Want to Write Plain JavaScript Again
sstephenson
161
15k
The Invisible Side of Design
smashingmag
301
51k
Building Applications with DynamoDB
mza
95
6.5k
Dealing with People You Can't Stand - Big Design 2015
cassininazir
367
26k
No one is an island. Learnings from fostering a developers community.
thoeni
21
3.4k
The Myth of the Modular Monolith - Day 2 Keynote - Rails World 2024
eileencodes
26
2.9k
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の応援にもなった 皆さんも好きな人にプログラムのプレゼントはいかがです か?