サークル向けにIR支援用のWebアプリを書いた

こんにちは。からあげです。この記事では身内の音ゲーサークル向けにIRのスコア集計を支援するWebアプリを書いて、herokuへデプロイした話をします。

f:id:ekaraage:20220126183835p:plain

制作のモチベーション

以前は某サイトをIRの際に使っていましたが、一時期SSL証明書が切れて使用を避ける事態に陥っていました。その後の集計はgoogle formで行われていたのですが、やはり見栄えがしません。見栄えを取り戻すため、某サイトの管理者にお願いして保守を引き継ぐか、クローンを作成するかの二つの選択肢が浮かんできたのですが、独自ドメインを取得している某サイトの保守はドメイン代がかかることが予想されました。所属しているサークルは部費を取らない(非公式なので)ため、この負担をどうするかも問題となりそうです。(自費という手もありましたが、お金がかからないほうが当然うれしいです)

というわけで、勉強も兼ねてクローンを作成してしまおうという結果に落ち着きました。

使った技術たち

本体はFlask(SQLite3)を、CSSフレームワークにbootstrapを使用しました。いずれも学習・使用が容易であること、後述の講座記事で取り上げられていたことが理由です。実際どちらもコピペで案外どうにかなりました。

 

できること

IRを立てられます。名前と期間、削除用のパスワードを設定します。昔のアップローダーみたいな設計を意識しました。

曲も追加できます。機種名と曲名、パスワードを設定します。

提出もおんなじ感じで、一覧ではスコアの高い順にソートされることになっています。

ハマりポイント

F5を押すVSCodeデバッグ機能で起動すると正常に起動しないけど、右上のボタンを押して実行したら普通に起動しました。なに?

あとはherokuにデプロイした後に一生タイムアウトしていて困りました。

デバッグをfalseにして、アドレスを0.0.0.0、ポートを環境変数のものに変えたら直りました。詳しくはここを参照。そんなんわからんよ~

完走した感想

開発期間は3日、実時間に直せば24時間程度かかりました。思ったより短くてうれしい~~

あと開発楽しいですね。機能が正常に実装されたときが一番楽しくて、ページがきれいになったときが二番目に楽しいです。何もしてないのにスマホにも対応していたときはなろう系主人公の気持ちになっていました。でもエラー処理は一番面白くなかったです。

ありそうな質問

  • Twitter認証しないと外部の人間がめっちゃ荒らせませんか?
    確かに~~!と思ったけど、サークルごとのログインとかのほうが大事っぽい気がします
  • 編集機能が実装されてなくないですか?
    すみません。してません。削除しろ~~削除を使え〜〜

さいごに

アプリの開発にあたって、Python3のFlaskで学ぶWebアプリケーション制作講座をかなり活用しました。ありがとうございます。

あとGithubにリポジトリが上がっているので、もし使いたければ自己責任でcloneして使っていただければと思います。ほんとに何が起きても知りませんよ!