Help us understand the problem. What is going on with this article?

Webアプリ「CostBox」を公開しました。

アプリを公開しました

登録、インストール不要なシンプル支出記録アプリ「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/[リポジトリ]/」のようなサブディレクトリでの公開になるのでそこだけ気にならなければ。

Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
Comments
Sign up for free and join this conversation.
If you already have a Qiita account
Why do not you register as a user and use Qiita more conveniently?
You need to log in to use this function. Qiita can be used more conveniently after logging in.
You seem to be reading articles frequently this month. Qiita can be used more conveniently after logging in.
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away