📝

【文化祭開発②】クイズ研究会なのでクイズアプリ作ってみた

2023/06/27に公開

高校生

文化祭

クイズ

tech

自己紹介

某県の共学化されかけている全寮制男子校に通う高校三年生です。
メイン言語でC#.Net、LINE Bot開発などにGASを多用しています。
超初心者で、基本知識もしっかりしていないと思いますので、温かい目でご覧ください。

1.制作経緯

1-1.企画構想

クイズ研究同好会の中で、文化祭で何かやらないかと後輩部員から打診されました。
過去に、寮のイベントなどでクイズを提供してきましたが、文化祭で企画を行うという考えが全くなく、せっかくならということでやってみることにしました。

1-2.後輩からの圧

「先輩、プログラミングできましたよね？」という一言で、こんなにも戦慄したことがあったでしょうか。
私は、高校に入ってから、寮の管理・運営をもっと楽にしようと、プログラムを書き続けていたのですが、すべて導入されずにいました。
しかし、その経緯でプログラミングを学び、ある程度のことはできるようになっていました。
そのことは後輩を含めた学校のほとんどの人に知られており、こうして、私の文化祭開発が始まりました。

1-3.ネプリーグ

どんな企画をやろうかと考えたときに、部員(4人)で話し合って決めたのが、クイズ番組「ネプリーグ」の企画である「トロッコアドベンチャー」と、「ファイブボンバー」のいずれかでした。
そこで、いろいろ考えを練っているうちに、「トロッコアドベンチャー」は、以下の三点から見送りとなり、「ファイブボンバー」を作ることになりました。

プレイヤーを乗せるトロッコを作ったり、その耐荷重を担保するのが難しい
映像ベースの企画であり、映像をつなげるのがめちゃめちゃ難しい
トロッコの傾きを検知するのが難しい

1-4.ルールの改造

ファイブボンバーをやるとしても、もともとのルールでは、あまりにもプレイ時間が短く、楽しめないのではないかという懸念が発生しました。
そのため、以下のようにルールを変更しました。

元ルール
- 5つ以上の答えがある問題を出題し、5人がひとつづつ、計5つ答えを出せたらクリア
- 爆弾が下に下がりきってしまうまでに5人が答えを出す
改定後ルール
- 答えが9～50個ある答えを出題し、爆弾が下がりきるまでの間になるべく多くの答えを出す。出せた答えの個数でランキングを作成し、競ってもらう。

1-5.言語選定

「選定」と書きましたが、自己紹介にも書いた通り、私はC#とGASしか書けません。というのも、私のプログラミング学習の目的が寮のシステム作成のためであり、「予算をなるべくかけない」という目標で作成している関係上、Webアプリなどは全く学んでいません。
そのため、自然とC#で作る運びとなりました。

1-6.ChatGPTの使用

今回のゲーム作成に際し、ChatGPTを複数箇所で使用しています。
というのも、私はC#((ry
HTMLやcssに関する知識は皆無かつ、デザインへの知識が本当にないため、ChatGPTに任せた方がましだったのです。

2.システム概要

2-1.各アプリ説明

①Five-Bomber

C# WPFで作成しました。
メインディッシュです。
爆弾が下がってきたり、得点を表示したり。
一番バグが発生したアプリです。

②Five-Bomber-WebUI

Five-Bomberを操作するためのWebサイトです。
html、css、jsと、少しのnode.jsで構成しています。
ボタンとテキストボックスだけのシンプルこうした設計。

③Five-Bomber-WebAPI

①がスコアをGoogleSpreadSheetにPOSTし、また、④のために、ランキングをGETするために存在します。
GASで作成しました。

④-web-style.pages.dev(は学校名)

④で出したランキングを見やすくしたWebサイトです。
HTMLとcss、jsで作ったものを、CloudFlare Pagesでホスティングしています。
基本的にはChatGPTに作ってもらい、少し手を加えました。

2-2.制作

まず最初に、Five-Bomber本体から作りました。
ネットの海から背景素材、爆弾と音声素材を持ってきました。
実はこれが3日くらいかかりました。
それからはひたすら動かす作業です。
まずは爆弾を下げる所から。最終的にはリモート操作をする予定でしたが、まずはボタンで開始・終了処理を。
実際に何人か友人を呼んで、爆弾の落ちる速度を研究したり、部員にも聞いたりしながら、順調に開発は進んでいました。
しかし、ここからが鬼門でした。
Five-Bomberは以下の3つのPageから構成されています。

 MainWindow.xaml
	 Lobby.xaml
	 GamePage.xaml
	 ResultPage.xaml

アプリを起動したらまずLobbyが表示され、開始処理をすることでGamePageに、そして爆弾が下がりきる(=ゲームオーバーになる)とResultPageを表示。最初に戻って同じ処理を繰り返す構成でした。
しかし、この実装が「オブジェクト参照がインスタンスに指定されていません(NullReferenceExcelpiton)」を頻発させました。
LobbyからGamePageに移るときに、NullReferenceExcelpitonが発生するのです。
じつはこのバグ、当日までに直しきることができず、今もそのまま残っています。
といっても、使用中にバグってもらっちゃ困るので、NullReferenceExcelpitonが発生する部分に例外処理を書き、NullReferenceExcelpitonが出た瞬間アプリを丸ごと再起動するという方法を取りました。(どなたか解決法を教えてください.....)
これによりGet Kotonakiしました(ほんとに？)が、まじでこのエラーだけで本体の開発時間を超える時間を消費していると思います。

次に取り掛かったのが、WebUIの作成です。
これはめっちゃ簡単に済みました。ChatGPTって偉大ですね。
スピードの変更、正誤判定、ゲームの開始・終了をWebUIからできるようにしました。
最初のうちは、CloudFlare Pagesや、Firebase Hostingを使ってインターネット上に置こうと思ったのですが、正誤判定にかかる時間をなるべく短く済ませなければならない関係で、ローカルでnode app.jsでサーバーを立て、そちらにip直入力でアクセスする方法を取りました。txtファイルに書き込み、Fibe-Bomberがそれを読み込む形式です。
しかし、この方法がのちに私の昼食を奪うことになります.....

最後に取り掛かったのが、外部APIとその連携機能です。
ふと思いついて、これに関しては一晩で完成させました(徹夜)。
モチベが燃焼しきってしまう前に何とかやりきろうと、ChatGPTくんと協力しながら作りました。
CloudFlare Pagesを選んだ理由ですが、

こちらの動画で、GitHubからの自動デプロイ機能を知り、「めっちゃ便利やん！」と思って試しに作ってみたものをそのまま使った感じです。
実は、プロトタイプの段階ではFireBase Hostingを使っていたのですが、単純な興味で変更しました。

こんな感じで、一応実用できる(?)くらいにはもっていくことができ、文化祭前日を迎えることになるのですが......

3.運用

3-1.前日の悲劇

悲劇、というか私があほだっただけですね。
今回のゲームでは、プレイヤー前方にプレイヤーが見るためのモニターを1台、そしてプレイヤーの後ろに感染者が見るためのプロジェクターを設置していました。
しかし、この配置だとプロジェクターとモニターで表示が反転してしまうのです。
前日準備の日までに同じ配置を一度も試していなかったため、この事実に気づくことができていませんでした。
結局は、フリーソフトの力を頼り、プロジェクタとモニタの画面を両方ミラー表示し、プロジェクターの設定でミラー表示した映像をさらに反転させることで、プロジェクタには正転した映像を、モニターには反転した映像を映し出すことができました。

3-2.当日の悲劇

これも私のミスです。
当日、私が昼食のために食堂でご飯を食べに行った直後、トランシーバーで部活の顧問から私に呼び出しが入りました。
「〇〇くん、来て！」と。
めっちゃ急いでほしい様子だったので、食事を半分も食べていなかったものの、しかたなく食事を切り上げました。唯一の救いは隣に座った後輩2人がFiveBomberすげえって話をしてくれていたことです。

で、動かなくなっていた原因ですが、これはWebUIのサーバーと当日の環境でのみ発生した謎のフリーズバグでした。
まず、当日最初のうちから、アプリがうんともすんとも言わなくなるバグが発生していました。
プレイ中に発生する質の悪いバグで、発生するたびにtaskmgrでタスクを切っていました。
もちろん、私が食事に行く前に、このバグへの対処法は他の部員に伝えていました。
ちゃんと、タスクマネージャーでタスク切ってね。と。
これが、私の昼食を奪ったこととなりました。
当日の環境では、Five-Bomber.exeと同時に、cmd.exeでnode app.jsを実行することにより、リモート操作を可能にしていました。
しかし、ほかの部員が間違えてFive-Bomber.exeとcmd.exeを同時に終了させてしまったのです。
これにより、Five-Bomber.exeを起動しても操作ができず、ゲームも開始できない、という状況が発生していました。

これに関しては、もっと細かく事前に指示をしておけばよかったという反省と、それ以前にFive-Bomber側で子プロセスとしてnode app.jsを実行させるべきだったという反省が生まれました。

4.結果・まとめ

様々な不具合があったものの、盛り上がりもあってか、バグは結構温かい目で見ていただけたようで、皆さん何度も挑戦してくださり、記録更新に勤しんでいました。
一位には29問正解のチームがいて、クイズ研究会の公式記録を悠々と超えられてしまうという部長としても少し悔しい結果となりました笑。
しかし、エンジニアとしては反省点が残るアプリとなり、しかし今後の改善に向けた良い経験をできたと思います。
また、何人かの先生方から「すげえな」とのお声をいただいたり、来校した両親からも褒められたり、さらにはとある先生からどうやって作ったのかを聞かれたりと、過去一番の手ごたえでした。
(YumNummさんと同じく、ほかのクラスなんぞ見る暇ありませんでした笑)

最後に、楽しんでくださったすべてのプレイヤーの皆様、
当日の様々なエラーにも柔軟に対応してくださった部員と顧問の先生、
その他、クイズ研究会企画にかかわったすべての方に感謝を申し上げます。ありがとうございました。

これからも、周りの人だけでなく、世界中の人を楽しませ、便利にさせられるようなアプリ、システムを作ることができるよう、邁進してまいりたいと思います。

最後になりましたが、こんな稚拙な文章を最後までお読みいただき、ありがとうございました！

よろしければ、私が文化祭のために作ったもう一つの企画についての記事もご覧ください！

それでは、またいつかお会いしましょう！

今回のアプリのリポジトリ

(GitHubも使い方微妙かもしれませんが悪しからず。)