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
590
結婚式のクイズアプリを自作した話
自分の結婚式のためのクイズアプリを作った話
ufoo68
April 11, 2023
Tweet
Share
More Decks by ufoo68
See All by ufoo68
初めて開発リーダーをやってみた話
ufoo68
0
96
M5Stack用の指紋認証デバイスを試す
ufoo68
0
710
M5Stack Core2とAlexaでインターフォンに自動で対応してくれるIoTデバイスを作りたかった話
ufoo68
0
650
KASHIKOIHAKO
ufoo68
0
550
LIFF通話をつくろう!
ufoo68
0
1.4k
KASHIKOIHAKO計画その4
ufoo68
0
280
AWS CDKで作るLINE bot
ufoo68
0
370
解説!LINE bot開発
ufoo68
0
280
Udonで始めるVR開発
ufoo68
0
430
Other Decks in Programming
See All in Programming
Babylon.js 8.0のアプデ情報を 軽率にキャッチアップ / catch-up-babylonjs-8
drumath2237
0
120
セキュリティマネジャー廃止とクラウドネイティブ型サンドボックス活用
kazumura
1
130
Perplexity Slack Botを作ってAI活用を進めた話 / AI Engineering Summit プレイベント
n3xem
0
150
機械学習って何? 5分で解説頑張ってみる
kuroneko2828
0
170
try-catchを使わないエラーハンドリング!? PHPでResult型の考え方を取り入れてみよう
kajitack
3
440
ワンバイナリWebサービスのススメ
mackee
10
7.6k
【TSkaigi 2025】これは型破り?型安全? 真実はいつもひとつ!(じゃないかもしれない)TypeScript クイズ〜〜〜〜!!!!!
kimitashoichi
1
300
プロダクト改善のために新しいことを始める -useContextからの卒業、Zustandへ-
rebase_engineering
1
100
TypeScript を活かしてデザインシステム MCP を作る / #tskaigi_after_night
izumin5210
4
500
データベースコネクションプール(DBCP)の変遷と理解
fujikawa8
0
170
TypeScript製IaCツールのAWS CDKが様々な言語で実装できる理由 ~他言語変換の仕組み~ / cdk-language-transformation
gotok365
7
400
FastMCPでMCPサーバー/クライアントを構築してみる
ttnyt8701
2
110
Featured
See All Featured
Scaling GitHub
holman
459
140k
Bootstrapping a Software Product
garrettdimon
PRO
307
110k
The MySQL Ecosystem @ GitHub 2015
samlambert
251
13k
Designing Dashboards & Data Visualisations in Web Apps
destraynor
231
53k
Performance Is Good for Brains [We Love Speed 2024]
tammyeverts
10
860
Into the Great Unknown - MozCon
thekraken
39
1.8k
Design and Strategy: How to Deal with People Who Don’t "Get" Design
morganepeng
130
19k
CoffeeScript is Beautiful & I Never Want to Write Plain JavaScript Again
sstephenson
161
15k
Fantastic passwords and where to find them - at NoRuKo
philnash
51
3.2k
Building an army of robots
kneath
306
45k
The Pragmatic Product Professional
lauravandoore
35
6.7k
Improving Core Web Vitals using Speculation Rules API
sergeychernyshev
15
900
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)