[{"data":1,"prerenderedAt":99},["ShallowReactive",2],{"myworks-schoolfes-2023":3},{"id":4,"title":5,"body":6,"category":77,"createDate":81,"description":82,"draft":83,"extension":84,"headerLinks":85,"icon":79,"mainCategory":80,"meta":91,"navigation":92,"path":93,"pinned":83,"seo":94,"stem":95,"thumbnail":96,"workId":97,"__hash__":98},"works\u002Fworks\u002FschoolFes-2023.md","文化祭で用いるスタッフ向け業務アプリケーション",{"type":7,"value":8,"toc":73},"minimark",[9,13,16,19,22,25,28,41,44,47,50,53,56,59,62,65,69],[10,11,12],"p",{},"文化祭の出し物でスタッフ向けに作成した業務アプリケーション。",[10,14,15],{},"Qiitaの記事は作成後数ヶ月以内に書いたものですので、そちらのほうが詳しく記載されている可能性が高いです。",[10,17,18],{},"持っている機能は主に「アカウント登録」と「スコア登録」、「スコアランキング確認」のみ。",[10,20,21],{},"「その日のスコアランキングで1位となった方に景品を送る」というニーズが発生したため、開発した。",[10,23,24],{},"アカウント登録はGoogleアカウントのみに絞り、メールアドレスを入手した。これにより後日連絡する手段を得ることができた。",[10,26,27],{},"以下の理由からGoogleアカウントを選定した。",[29,30,31,35,38],"ul",{},[32,33,34],"li",{},"学内の生徒は必ず所持している。",[32,36,37],{},"ログイン実装が容易であった。",[32,39,40],{},"比較的アカウント所持している可能性が高いと予想される。",[10,42,43],{},"スコアランキングはWebページでいつでも閲覧可能な状態とし、模擬店の出店場所でもプロジェクターによる投影を行った。",[10,45,46],{},"スコアランキングという特性上、リアルタイムで更新を行う必要がある。そのため、WebSocketによる通信を行いランキング更新時に自動で更新するようにした。",[10,48,49],{},"プロジェクターではランキング以外にもお知らせやアカウントページまでのQRコードを表示し、WebSocketにより動的に内容を変更できるようにした。",[10,51,52],{},"スコア登録の際、ユーザ側で生成した期限付きQRコードをスキャンすることで不正を防止することにしたが、効果やそもそも不正をする可能性があるかは不明である。しかし、QRコードでユーザを識別することは利便性をに繋がったと考えている。",[10,54,55],{},"念の為、識別番号を色付き大きめのテキストで表示した。念の為確認するダイアログも表示したためミスに気づくことができるようにしている。",[10,57,58],{},"寝不足状態で作成したため非常に作りが悪く、バグまみれな恐ろしいプログラムが出来上がった。",[10,60,61],{},"ギャラリーにてスクリーンショットを掲載しています。一部のスクリーンショットは簡易的に環境を再現したものですので、当時と異なる可能性がありますがご了承ください。",[10,63,64],{},"なお、このWebページのソースコードは非公開です。",[66,67],"tech-card",{":cards":68},"{\"title\":\"使用技術\",\"items\":[{\"title\":\"フロントエンド\",\"items\":[{\"icon\":\"devicon-html5\",\"title\":\"HTML, CSS, JavaScript\",\"description\":\"ピュアなHTML, CSS, JavaScriptで構成\"}]},{\"title\":\"バックエンド\",\"items\":[{\"icon\":\"devicon-php\",\"title\":\"PHP\",\"description\":\"制約の多いレンタルサーバでも動作するPHP\"},{\"icon\":\"devicon-nodejs\",\"title\":\"Node.js\",\"description\":\"WebSocketでの通信を行うために採用\"}]},{\"title\":\"デプロイ環境\",\"items\":[{\"icon\":\"mdi-server\",\"title\":\"レンタルサーバ\",\"description\":\"フロントエンド・PHPはこっちで動かす\"},{\"icon\":\"mdi-server\",\"title\":\"VPS\",\"description\":\"WebSocketはどうしてもレンタルサーバでは動かないのでVPSで稼働\"}]}]}",[70,71],"image-galary",{":images":72},"[\"\u002Fimages\u002Fworks\u002FschoolFes-2023\u002Ftop.png\",\"\u002Fimages\u002Fworks\u002FschoolFes-2023\u002Finput.png\",\"\u002Fimages\u002Fworks\u002FschoolFes-2023\u002Finput_3.png\",\"\u002Fimages\u002Fworks\u002FschoolFes-2023\u002Finput_2.png\",\"\u002Fimages\u002Fworks\u002FschoolFes-2023\u002Farea_select.png\",\"\u002Fimages\u002Fworks\u002FschoolFes-2023\u002FuserQRShow.png\",\"\u002Fimages\u002Fworks\u002FschoolFes-2023\u002FFrontInfoPanel.png\",\"\u002Fimages\u002Fworks\u002FschoolFes-2023\u002FGoogleLogin.png\"]",{"title":74,"searchDepth":75,"depth":75,"links":76},"",2,[],[78],{"icon":79,"label":80},"material-symbols-two-pager","WebSite","2023-11-11","文化祭の出し物で用いるスタッフ向けの業務アプリケーション",false,"md",[86],{"label":87,"icon":88,"to":89,"target":90},"Qiita","simple-icons-qiita","https:\u002F\u002Fqiita.com\u002Fmendoitarou_\u002Fitems\u002F8dbc174a6d1b55fb073d","_blank",{},true,"\u002Fworks\u002Fschoolfes-2023",{"title":5,"description":82},"works\u002FschoolFes-2023","\u002Fimages\u002Fworks\u002FschoolFes-2023\u002FuserQRShow.png",4,"Ogtpg9PKQFq5luTiAJHyLiQXAhBtV1iub4KVFo-848A",1777126455153]