アプリを公開しました
登録、インストール不要なシンプル支出記録アプリ「CostBox」を公開しました。PWAにも対応しています。
お試しに使ってもらえると嬉しいです！
まだまだ実装したい機能も色々とありますが、平成も終わるので一区切りとして公開です。
今回は、初めてのWebアプリの制作だったのもあり結構時間がかかりました...。平日の夜2時間くらいを制作の時間にあてて、中だるみやライブラリの変更等もあり、2ヶ月くらいはかかったと思います。今回は時間が掛かりすぎため、次回に活かしていきたいところです。
動作対象はモダンブラウザを対象としていまが、EdgeとAndroidは動作確認ができていないので、不具合があったらお知らせいただけると助かります。
https://darumock.github.io/costbox/
アプリケーションの構成
極力シンプルな構成にしたかったため、アプリはクライアントサイドで完結するようにしました。
フレームワーク： Vue.js
アプリっぽくしたかったため、VueCLIを利用してSPA、PWAの初期設定をお任せしました。
PWAに関してはiOS用の記述が追加で必要なため、そこは「PWACompact」で対応しました。
UI： Vuetify
UI周りを省力化をしたかったので、UIコンポーネントのVuetifyを採用しました。
ハンバーガーメニュー、カレンダーなどなど、実用的なライブラリが一通り揃っていてます。
とはいえ、UIの最適化はまだまだできていないため、追々詰めていきたいところです...。
データベース： indexedDB（Dexie.js）
前述の通りシンプルな構成に合わせて、データベースの置き場所もサーバーサイドではなく、クライアントサイドに置くことにしました。クライアントサイドなら、GithubPagesやNetlifyにデプロイするだけで動作するのでお手軽です（しかも無料！）。
というわけで、クライアントサイドのデータベースは「indexedDB」を採用し、さらにそのラッパーライブラリである「Dexie.js」で扱いやすくしています（IndexedDBは素で使うにはややこしいので）。
ホスティング： Github Pages
Javascriptさえ動けばいいのでわざわざレンタルサーバーを借りる必要もないかなと思い、「Github Pages」で公開することにしました。
SSLも標準で対応しているので、軽いWebアプリくらいならこれで十分なんじゃないかと思ってます。公開URLは「https://[ユーザー].github.io/[リポジトリ]/」のようなサブディレクトリでの公開になるのでそこだけ気にならなければ。