かけいボ
作成に至った経緯
個人的に必要な物がある場合にそれを除いて計算すると食料品とそれ以外で消費税が違い買い物の量が多いと計算を間違う場合が多くありました。
それでお金で揉めたのでそれをなくす為にカテゴリーを選択して金額を入力すると自動的に金額が表示されるアプリを作りたいと思い作りました。
技術
- Laravel(8.x)
- フロントエンド
- JavaScript
- DB
- MySQL
- コードの管理
- GitHub
要件定義
- 円グラフを使って毎月使ったお金を可視化して家計簿みたいな使い方もできるようにしたい。
- カレンダーで日にちごとに使ったお金が分かるようにしたい。
テーブルとカラム
- name
- password
- prices（商品金額）
- total_price
- user_id
- daily_price_id
- category_prices（カテゴリーごとの金額）
- price
- category_id
- price_id
- user_id
- memo
- categories（カテゴリー）
- name
- daily_prices（1日の合計金額）
- price
- stamp_date
- user_id
- user_settings（ユーザーの設定）
- user_id
- calendar_flag
- chart_flag
モデル設計
画面
下記の画面からログインまたはユーザー登録をします。
すると出費を計算するページに遷移します。
カテゴリーを選択して金額を入力して「登録」ボタンを押します。
消費税込みの金額とそれに対するカテゴリー名が表示されます。
登録はカテゴリーを選択して金額を入力するのを繰り返して行います。
追加の登録をすると「1. 食費 : 1080円」の下に追加され合計金額が加算されます。
カテゴリーを選択せずに金額を入力して登録ボタンを押すと登録できず警告が表示されます。
確定ボタンを押すと合計金額が表示され2人で買い物をした場合の1人当たりの金額が表示されます。
下記が登録ボタンを押したあとです。
OKボタンを押すと金額の登録に戻ります。
詳細ボタンを押すと出費の詳細が表示されます。
戻るボタン（上記赤枠）で出費の登録画面に戻ります。
リスト（下記赤枠）をクリックします。
1ヶ月・毎日の出費とカテゴリーが表示されます。
上記赤枠の「2024年12月」は現在の年月で左右の矢印ボタンをクリックすると1日単位で変更ができます。
上記青枠をクリックすると1ヶ月の出費の内訳が表示されます。
下記赤枠をクリックすると商品の詳細ページに遷移します。
下記赤枠をクリックするとカテゴリー・金額・登録した日付の変更ができます。
またメモの登録もできます。
出費の登録画面で「カレンダー」をクリックします。
カレンダーが表示されます。
フォルトの表示が今月で1ヶ月単位で月の切り替えができます。
金額が表示されている日付（上記赤枠）をクリックするとその日のカテゴリーに対する出費が表示されます。
出費の登録画面の「グラフ」をクリックします。
1ヶ月の支出が円グラフで表示されます。
デフォルトの表示が今月で月を選択して表示の切り替えができます。
出費の登録画面で「設定」をクリックします。
カレンダー・グラフのページにアクセスできるかの設定ができます。
Ajaxで切り替えができるようにしています。
例えばカレンダーの設定を切ってカレンダーのページにアクセスしようとすると下記の表示になります。
チャートの設定も同じです。