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
ufoo68
April 11, 2023
Programming
0
620
結婚式のクイズアプリを自作した話
自分の結婚式のためのクイズアプリを作った話
ufoo68
April 11, 2023
Tweet
Share
More Decks by ufoo68
See All by ufoo68
OpenAIでクッキー型を作る
ufoo68
0
16
初めて開発リーダーをやってみた話
ufoo68
0
100
M5Stack用の指紋認証デバイスを試す
ufoo68
0
740
M5Stack Core2とAlexaでインターフォンに自動で対応してくれるIoTデバイスを作りたかった話
ufoo68
0
670
KASHIKOIHAKO
ufoo68
0
560
LIFF通話をつくろう!
ufoo68
0
1.4k
KASHIKOIHAKO計画その4
ufoo68
0
290
AWS CDKで作るLINE bot
ufoo68
0
380
解説!LINE bot開発
ufoo68
0
290
Other Decks in Programming
See All in Programming
DockerからECSへ 〜 AWSの海に出る前に知っておきたいこと 〜
ota1022
5
1.8k
Introduction to Git & GitHub
latte72
0
120
コンテキストエンジニアリング Cursor編
kinopeee
1
710
あなたとJIT, 今すぐアセンブ ル
sisshiki1969
1
730
物語を動かす行動"量" #エンジニアニメ
konifar
14
5.5k
AIでLINEスタンプを作ってみた
eycjur
1
200
Langfuseと歩む生成AI活用推進
licux
3
300
画像コンペでのベースラインモデルの育て方
tattaka
3
1.9k
書き捨てではなく継続開発可能なコードをAIコーディングエージェントで書くために意識していること
shuyakinjo
1
310
オープンセミナー2025@広島「君はどこで動かすか?」アンケート結果
satoshi256kbyte
0
210
Namespace and Its Future
tagomoris
6
540
実践!App Intents対応
yuukiw00w
1
360
Featured
See All Featured
Principles of Awesome APIs and How to Build Them.
keavy
126
17k
KATA
mclloyd
32
14k
The Web Performance Landscape in 2024 [PerfNow 2024]
tammyeverts
9
780
Intergalactic Javascript Robots from Outer Space
tanoku
272
27k
Templates, Plugins, & Blocks: Oh My! Creating the theme that thinks of everything
marktimemedia
31
2.5k
JavaScript: Past, Present, and Future - NDC Porto 2020
reverentgeek
50
5.5k
[RailsConf 2023] Rails as a piece of cake
palkan
56
5.8k
jQuery: Nuts, Bolts and Bling
dougneiner
64
7.9k
Navigating Team Friction
lara
189
15k
Being A Developer After 40
akosma
90
590k
Chrome DevTools: State of the Union 2024 - Debugging React & Beyond
addyosmani
7
820
The Myth of the Modular Monolith - Day 2 Keynote - Rails World 2024
eileencodes
26
3k
Transcript
結婚式のクイズアプリを自作した話 UV Study: フロントエンドLT会#9(Vue.js,TypeScript,CSS)
自己紹介 ufoo68(@ufoo_yuta) Flipdesk AWS, Next.js, Nest.js, TypeORM 滋賀県在住 UV Study:
フロントエンドLT会#9(Vue.js,TypeScript,CSS)
今回のテーマ 結婚式の披露宴向けのアプリをWEBで作ってみた 以心伝心ゲーム 全員参加型クイズ UV Study: フロントエンドLT会#9(Vue.js,TypeScript,CSS)
以心伝心ゲームとは 解答者みんなの答えを揃えるゲーム 例 お題「カレーといえば?」 「辛口」「甘口」というバラバラの回答だった場合は✕ 揃えば◯ UV Study: フロントエンドLT会#9(Vue.js,TypeScript,CSS)
以心伝心画面仕様 UV Study: フロントエンドLT会#9(Vue.js,TypeScript,CSS)
以心伝心要件 会場・司会・回答者の画面がある 会場の画面の表示を司会者画面が管理 解答者画面は手書き入力で回答 ◯・✕は司会者が判断 UV Study: フロントエンドLT会#9(Vue.js,TypeScript,CSS)
以心伝心設計方針 DBでStateをUpdateしてそれを書く画面で共有する形を採用 UV Study: フロントエンドLT会#9(Vue.js,TypeScript,CSS)
手書き入力で使ったもの react-signature-canvas UV Study: フロントエンドLT会#9(Vue.js,TypeScript,CSS)
全員参加型クイズ UV Study: フロントエンドLT会#9(Vue.js,TypeScript,CSS)
クイズ画面仕様 UV Study: フロントエンドLT会#9(Vue.js,TypeScript,CSS)
クイズ要件 管理画面でクイズを編集できる 司会者画面で問題を進行 回答画面では選択と並べ替えの操作ができる UV Study: フロントエンドLT会#9(Vue.js,TypeScript,CSS)
並べ替えで使ったもの dnd kit UV Study: フロントエンドLT会#9(Vue.js,TypeScript,CSS)
全体で使用した技術など PlanetScale MySQLのクライドサービス。無料枠が使える。 t3-app Next.js tRPC Prisma Tailwind CSS NextAuth.js
UV Study: フロントエンドLT会#9(Vue.js,TypeScript,CSS)
DEMO(時間の許す限り) ちなみにアプリは↓で公開してます UV Study: フロントエンドLT会#9(Vue.js,TypeScript,CSS)
本番(披露宴)運用をしてみて 他の式準備の兼ね合いでエラーハンドリングをおざなりにしていた 披露宴会場のネットワーク問題が発生した 回答が送信できない場合に、ネットワークエラーなのかアプリケ ーションバグなのかの判断がつきにくかった 参加者が途中でブラウザを閉じてしまったときの救済処置がなかっ た URLパラメータに参加者IDを保存していたので、ブラウザ履歴か らたどれば復旧はできるのだがその導線を用意してなかった ブラウザ内でのストレージを使うなどを今後は検討
UV Study: フロントエンドLT会#9(Vue.js,TypeScript,CSS)