はじめに
※「はじめに」では私の家計簿への愛が無駄に長く語られます。
面倒な人は次章までお飛ばし下さい。
・共働き夫婦の家庭に質問です。
「どのように家計を管理してますか？」
A）片方が管理（いわゆる「お小遣い制」）
B）それぞれの財布で管理（費用は項目ごとに分担）
C）共通財布管理（生活費は全て共通財布から負担）
だいたいこの3つでしょうか？
ちなみにリクルートブライダル総研が行った「新婚生活実態調査」によると、
共働き家庭では、Aが50.5％、Cが33.0％、最後にBが14.2％と、
Aが半数以上を締めているらしいです。（ちなみにうちの両親もAです。）
※上記調査を基に筆者作成
しかもAの中でも「妻が管理」が46.8％、「夫が管理」はわずか3.7％と、妻が殆ど、、、
つまり世の中の財布は大半を妻が握っているのです！！
私は世の旦那に問いかけたい、、、
「それで良いんですか？」
と。
自分の稼いだお金がいつのまにか搾取されていることも気づかず、
いつまでも妻に尻に敷かれてて良いんですか！！（世のお小遣い制の男性陣どうか叩かないで・・・）
そういう意味で私はBも良いなと思ってます。完全に個人管理ですし、何より楽ですし。
ただ、生活費の負担額は極力平等に、そして公開されている方がお金に対する不満はなくなる、というのが私の考えで、
うちではCの共通財布制を採用しています。
不満があれば家計簿を見れば一発で原因がわかります。
実際うちではお金の喧嘩は一度もしたことないから、共通財布の家計簿管理は夫婦仲的にもおすすめです！笑
ただ、
共通財布って管理がものすごく面倒なんです。
というのも、家計簿って逐一入力するのさえ面倒ですよね？
共通財布だとそれに加えて、たまに個人の財布から立替えたりすることもあるので、その立替処理も記録してるともうぐっちゃぐちゃになるんです。
それに、毎月の入金額も給料から色々計算したい場合、それも別途で管理しているともう何がなんだかわからなくなります。
私も色んな家計簿を試してみましたが、上記の悩みを解決する家計簿が見つからず、
仕方なく、自作のエクセルで管理してました。
しかし！今や私も半人前ながらプログラミングを勉強している身！
プログラマーならそのアプリを作ってしまおう、ということで作りました！！
スマホでも操作しやすいようにしたかったですし。
名付けて**「CoWallet(コウォレット)」**共通財布用家計簿アプリです。
共通財布家計簿「CoWallet(コウォレット)」
以下が私が今回作ったアプリです。
（スマホ利用を想定しておりますので、PCだとデザインが若干変になります💦）
CoWallet
いくつか機能をご紹介したいと思います。
ホーム
ホーム画面では各機能の概要が確認できます。
- 口座残高
- 今月の支出状況
- 月ごとの残高推移
- 立替精算額
- 今月の入金額
また、それぞれのボックスをタップすることで各管理画面に遷移します。
明細
明細画面では今月の収支明細を確認することが出来ます。
右下のペンボタンで新規作成。
明細をクリックすると編集画面に遷移して修正が出来ます。
また、画面上部ではこれらの明細を集計して各残高や収支を表示されます。
精算
精算画面では個人の財布で立て替えた項目の中でまだ精算が完了していないものを抽出し、
「誰にいくら支払えば精算が完了するか」を計算して表示してくれます。
これがあれば複数明細がを逐一精算せずとも、まとめて計算して精算できるのでとても楽になります。
また、画面下部の「精算を完了する」ボタンを押すと、対象となっていた明細のステータスを一括で「精算済み」に変更することが出来ます。
分析
分析画面では、予め各費用別に予算を設定しておくと
その予算に対してあと残りいくら予算がのこっているかがわかります。
また、画面最上部では各支出の内訳が円グラフで表示されます。
入金
入金画面では毎月共通口座に入金する金額を管理することが出来ます。
夫婦の給料と総入金額を指定すると、そこから各個人の手残りが同じになるように入金額を計算してくれます。
もちろんそうなると片方が給料が高い時に不公平に感じることもあると思うので、別途下の画面で調整金額を入力することができ、
登録すると、その金額分入金額を再調整してくれます。
技術面
僕は未熟者なので大した技術は使えていないですが、
苦労した箇所の参考記事は勉強中の方にも参考になると思うのでご紹介します。
rails使ってます。
Highcharts
本サービスで使っているグラフはchartkickの「Highcharts」を使っています。
chartkickでは他にも、chart-js、 Google Chartsが使えますが、
Highchartsが微調整も利きやすく、そしてきれいな印象です。
この記事にすごくわかりやすい作成例があったので、参考にしました。
chartkick × Highchartsでドーナツグラフを作る
Ajax処理
初めて実践でAjax処理をしたのでだいぶ苦労しました。。。
そもそもjsの書き方とか知らないし。。。
でも何度も追加や削除を行う画面ではAjax化しないとかなりUX的にマイナスだと思うので、
使うべきだなと感じました。
以下の記事を読んでAjaxの理解が進みました。
Ruby on RailsのAjax処理のおさらい
RailsにおけるAjaxの実装（JavaScriptとjQueryのコード比較）
AWSデプロイ
初めて作った（クソ）アプリ「笑うぎんこうまん」はherokuが全部勝手にデプロイしてくれたので、超絶楽チンでした。
でも、「まともなサービスなら独自ドメインもしっかり取りたいし、しっかり勉強もしたい！」とか意気込んでAWSに挑戦してみましたが、しっかり爆死。。。
用語全てが意味不明でだいぶしんどかったですが、構築知識は身についたなと思います。
ちなみにAWSデプロイは以下の記事がすごく丁寧でわかりやすいです。
世界一丁寧なAWS解説
PWA
このサービスがスマホ利用を想定していることもあり、
PWAを導入することで、出来る限りネイティブアプリに近い体験を出来るよう尽力しました。
このアプリを使ってくれる方には是非ホーム画面に追加していただき、手軽に利用してもらえたら嬉しいです！
一応PWAとして実装している内容は以下になります。
- アプリアイコンデザイン
- ブラウザメニューバーおよびアドレスバーの非表示
- service workerでコンテンツをキャッシュ化して処理速度を高速化
おわりに
以上が今回私の作ったアプリの説明です。
正直ここまで細かく家計簿を作る人もそうそういないと思うので、かなりニッチなサービスですが、、、笑
良ければ使って下さい。
アプリ更新履歴
リリース日： 2021/3/5
アップデート日：2021/3/7
- ロゴ、ファビコンの透過
- スマホでホーム画面にショートカット作成した際のファビコン設定
- ヘッダー、フッターの位置固定
- 月初残高の説明欄記載
- 家計簿一覧画面の表を「月初残高」「月末残高」に記載変更
- 機能紹介の文面シンプル化
- ログイン後のヘッダーロゴにホームへのリンク付与
- ユーザー詳細画面と編集削除機能の追加
- コンテンツ配置微調整
- ボタンデザイン変更
- 機能紹介欄の間隔調整
- 費用項目に「その他」追加
- Highchartsのエラー修正（例えば25円でも25万になる）
→エラー解消した上で、1万円以下は1円単位の表示になるようにしました
アップデート日：2021/3/15
- ゲストログイン機能の仕様修正（同一アカウントではなく、毎回新規ゲストユーザーを作成する）
- URL設計の修正（単一リソース化してURLにuser.idを表示しない）
アップデート日：2021/4/3
- 切り替えボタン（明細、分析、精算、入金）の設置
- 一部デザインの修正
- マイナスのフォント修正
アップデート日：2021/4/4
- 文字フォントの変更
- 表のデザイン修正
- カラーデザイン修正（グラフの色、背景色など）
- 各種文言の修正
アップデート日：2021/5/30
- 明細入力フォームのレスポンシブ対応
- ヘッダーの機能選択ボタンのデザイン修正
アップデート日：2021/6/12
- トップ画面のコンテンツ追加（共通財布の説明、他アプリ比較）
- トップ画面最下部にボタン追加
アップデート日：2021/7/29~8/1
- アプリ画面デザイン全体の大幅アップデート実施
- 各フォントサイズ調整、画面配置、明細記録画面追加、各種残高のエラー修正、残高推移の抽出数拡大など
アップデート日：2021/8/15
- 明細編集機能追加
- 入金額の条件と調整額を別途で設定できるようにDB修正
アップデート日：2021/8/22
- PWA導入
アップデート日：2021/10/9
- 精算完了ボタンの追加
- 各種デザイン修正
###アップデート日：2021/10/21
- ハンバーガーメニューをサイドバーにデザイン変更
アップデート日：2021/10/22
- 入金額自動入力機能を追加
アップデート日：2021/11/19
- カラーデザインを変更しました
アップデート日：2022/2/19
- ドメインを変更しました。（3/1から完全移行）
アップデート日：2022/4/2
- アプリアイコン及びテーマカラーを変更しました
- アプリ名を変更しました（Common Wallet→CoWallet）