結婚式のクイズアプリを自作した話

自分の結婚式のためのクイズアプリを作った話

Transcript

1. 結婚式のクイズアプリを自作した話
   UV Study: フロントエンドLT会#9(Vue.js,TypeScript,CSS)
   

   View Slide

2. 自己紹介
   ufoo68(@ufoo_yuta)
   Flipdesk
   AWS, Next.js, Nest.js, TypeORM
   滋賀県在住
   UV Study: フロントエンドLT会#9(Vue.js,TypeScript,CSS)
   

   View Slide

3. 今回のテーマ
   結婚式の披露宴向けのアプリをWEBで作ってみた
   以心伝心ゲーム
   全員参加型クイズ
   UV Study: フロントエンドLT会#9(Vue.js,TypeScript,CSS)
   

   View Slide

4. 以心伝心ゲームとは
   解答者みんなの答えを揃えるゲーム
   例
   お題「カレーといえば？」
   「辛口」「甘口」というバラバラの回答だった場合は✕
   揃えば◯
   UV Study: フロントエンドLT会#9(Vue.js,TypeScript,CSS)
   

   View Slide

5. 以心伝心画面仕様
   UV Study: フロントエンドLT会#9(Vue.js,TypeScript,CSS)
   

   View Slide

6. 以心伝心要件
   会場・司会・回答者の画面がある
   会場の画面の表示を司会者画面が管理
   解答者画面は手書き入力で回答
   ◯・✕は司会者が判断
   UV Study: フロントエンドLT会#9(Vue.js,TypeScript,CSS)
   

   View Slide

7. 以心伝心設計方針
   DBでStateをUpdateしてそれを書く画面で共有する形を採用
   UV Study: フロントエンドLT会#9(Vue.js,TypeScript,CSS)
   

   View Slide

8. 手書き入力で使ったもの
   react-signature-canvas
   UV Study: フロントエンドLT会#9(Vue.js,TypeScript,CSS)
   

   View Slide

9. 全員参加型クイズ
   UV Study: フロントエンドLT会#9(Vue.js,TypeScript,CSS)
   

   View Slide

10. クイズ画面仕様
    UV Study: フロントエンドLT会#9(Vue.js,TypeScript,CSS)
    

    View Slide

11. クイズ要件
    管理画面でクイズを編集できる
    司会者画面で問題を進行
    回答画面では選択と並べ替えの操作ができる
    UV Study: フロントエンドLT会#9(Vue.js,TypeScript,CSS)
    

    View Slide

12. 並べ替えで使ったもの
    dnd kit
    UV Study: フロントエンドLT会#9(Vue.js,TypeScript,CSS)
    

    View Slide

13. 全体で使用した技術など
    PlanetScale
    MySQLのクライドサービス。無料枠が使える。
    t3-app
    Next.js
    tRPC
    Prisma
    Tailwind CSS
    NextAuth.js
    UV Study: フロントエンドLT会#9(Vue.js,TypeScript,CSS)
    

    View Slide

14. DEMO（時間の許す限り）
    ちなみにアプリは↓で公開してます
    UV Study: フロントエンドLT会#9(Vue.js,TypeScript,CSS)
    

    View Slide

15. 本番（披露宴）運用をしてみて
    他の式準備の兼ね合いでエラーハンドリングをおざなりにしていた
    披露宴会場のネットワーク問題が発生した
    回答が送信できない場合に、ネットワークエラーなのかアプリケ
    ーションバグなのかの判断がつきにくかった
    参加者が途中でブラウザを閉じてしまったときの救済処置がなかっ
    た
    URLパラメータに参加者IDを保存していたので、ブラウザ履歴か
    らたどれば復旧はできるのだがその導線を用意してなかった
    ブラウザ内でのストレージを使うなどを今後は検討
    UV Study: フロントエンドLT会#9(Vue.js,TypeScript,CSS)
    

    View Slide