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
570
結婚式のクイズアプリを自作した話
自分の結婚式のためのクイズアプリを作った話
ufoo68
April 11, 2023
Tweet
Share
More Decks by ufoo68
See All by ufoo68
初めて開発リーダーをやってみた話
ufoo68
0
88
M5Stack用の指紋認証デバイスを試す
ufoo68
0
650
M5Stack Core2とAlexaでインターフォンに自動で対応してくれるIoTデバイスを作りたかった話
ufoo68
0
630
KASHIKOIHAKO
ufoo68
0
530
LIFF通話をつくろう!
ufoo68
0
1.3k
KASHIKOIHAKO計画その4
ufoo68
0
270
AWS CDKで作るLINE bot
ufoo68
0
360
解説!LINE bot開発
ufoo68
0
270
Udonで始めるVR開発
ufoo68
0
420
Other Decks in Programming
See All in Programming
Denoでフロントエンド開発 2025年春版 / Frontend Development with Deno (Spring 2025)
petamoriken
1
1.3k
PHPでお金を扱う時、終わりのない 謎の1円調査の旅にでなくて済む方法
nakka
3
990
Fluent UI Blazor 5 (alpha)の紹介
tomokusaba
0
130
Return of the Full-Stack Developer
simas
PRO
1
310
SLI/SLOの設定を進めるその前に アラート品質の改善に取り組んだ話
tanden
2
710
아직도 SOLID 를 '글'로만 알고 계신가요?
sh1mj1
0
360
PsySHから紐解くREPLの仕組み
muno92
PRO
1
510
Devin , 正しい付き合い方と使い方 / Living and Working with Devin
yukinagae
1
520
SideKiqでジョブが二重起動した事象を深堀りしました
t_hatachi
0
220
OUPC2024 Day 1 解説
kowerkoint
0
390
フロントエンドテストの育て方
quramy
8
2.5k
신입 안드로이드 개발자의 AI 스타트업 생존기 (+ Native C++ Code를 Android에서 사용해보기)
dygames
0
500
Featured
See All Featured
Optimizing for Happiness
mojombo
377
70k
Rails Girls Zürich Keynote
gr2m
94
13k
Building a Scalable Design System with Sketch
lauravandoore
462
33k
Designing Dashboards & Data Visualisations in Web Apps
destraynor
231
53k
How to Ace a Technical Interview
jacobian
276
23k
Art, The Web, and Tiny UX
lynnandtonic
298
20k
[RailsConf 2023 Opening Keynote] The Magic of Rails
eileencodes
28
9.4k
Faster Mobile Websites
deanohume
306
31k
[RailsConf 2023] Rails as a piece of cake
palkan
53
5.4k
Bootstrapping a Software Product
garrettdimon
PRO
307
110k
Measuring & Analyzing Core Web Vitals
bluesmoon
6
320
Making the Leap to Tech Lead
cromwellryan
133
9.2k
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)