Flaskで簡単なWebアプリを作成して公開した話

Python

お久しぶりです。人生最後の夏休みは北海道に旅行に行ったり部屋の模様替えをしたりでいろいろ満喫してました。
そんな中で、ヲタ芸やってる身内から「イベントの時の得点集計が面倒でたまらないのでどうにかできない？」との連絡をいただいて、"夏休みの宿題"感覚でWebアプリを個人開発したのでその記録をここに残しておきます。

何作ったの

https://scorer.rewind-memory.com/　←これ
具体的なユースケースなどはトップページにあるので気になった人はぜひ見てみてください。

インフラまわり

今回の開発はかなり予算が限られている(ソフトウェア導入の実験的な要素の方が大きい)ので、何よりも安価になるようなサーバ構成にしました。
そこそこ使い慣れているAWSのEC2は無料枠を使い潰してしまったため、技術的な検証の意味も含めてGCPのピンチケサーバCompute Engineを採用し、極力無料枠に収まるようにしています。 RDSインスタンスを停止し忘れて5000円の請求が飛んできそうになった話はまたいつか。

さらに、CircleCIを用いたCI/CDにも対応しているため、gitへのコードプッシュ後迅速にデプロイを可能としました。これで開発がめちゃくちゃ楽になった。

今後利用者数が増加して処理能力が不足した場合はサーバの増強やロードバランサの設置などを行っていきたいと考えています。

ミドルウェア・バックエンド

タイトルにもある通り、フレームワークにはFlaskを採用しました。というのも、LaravelやDjangoなどは機能が充実している分メモリ使用量が大きくなるかも？と考えたためです(個人的にPythonでのアプリ開発をしてみたかったという理由もそこそこある)。
同様の理由で、データベースもMySQLやPostgreSQLなどではなくSQLiteを採用しています。今後利用者が増えてきたりした場合は移行してもいいかなという考えです。

さて、機能のコアとなるスコアデータの管理ですが、DB内にJSON形式の文字列で格納する方法を取ることによって複数の要素を同一のテーブルにて管理することを可能にしました。(RDBの設計的にはあまりよくないのかも？)
その他のDB設計に関しては、スコアブック内に複数のスコアが存在するといった単純な一対多の設計になっているので詳細は割愛します。

フロントエンド

PCとスマホの両方から利用される可能性を想定して、Bootstrapのグリッドシステムを利用したレスポンシブ設計を行っています。
Vueあたりを利用したSPAにしても良かったんですが、Flaskのテンプレートエンジン(Jinja)を使って値を直接埋め込みたかったため採用は見送りました(LaravelだとVueがデフォルトのUIとして選択できるのでこういうときに便利だったりする)。

サイトのデザインに関してはド素人でセンスもないので大目にみてほしい。それでもある程度まとまった見た目になるのはさすがBootstrap、って感じです。
あとはスコアブック共有画面で利用したQRCode.jsのライブラリ、めちゃくちゃ便利ですね。フロントエンドでcanvas要素にサクッとQRコードを生成できるのでオススメです。

まとめ

2週間弱と短めの開発期間で作成したため不具合がまだまだ多く残ってるかと思います。もしバグや不具合を発見した場合は不具合報告フォームから報告していただけると対応できるのでありがたいです。
ヲタ芸の採点以外にも色々な箇所で使えると思いますので、皆さんも是非一度利用してみてください。僕が泣いて喜びます。