Works
家計簿システム
言語とツール： HTML/CSS/ Sass/ JavaScript/ jQuery/ PHP/ MySQL/ Git/GitHub
制作期間：8ヶ月(現在も開発中)
ソースコード： 非公開
シンプルな家計簿システムです。
クレジットカードやスマホ決済が普及し、どのツールでいくら使っているのか確認する手間を１つのサイトで解決したいという思いから開発を始めました。
一般的な家計簿アプリにもあるカテゴリーを自由に登録できたりレポートを表示する機能はもちろん、使っているクレジットカードやスマホ決済まで詳細に登録できるようにすることで、どのツールでいくら使用したのかを簡単に見られるようにしています。
この家計簿システムは、より使いやすくするため現在も開発中です。
※上記タイトルから遷移できるページはデモページなので、データを操作することはできません。
STEP1
静的コーディング
HTML/Sass/JavaScriptを使用して、最終的にどのようなUIにしたいかコーディングを行いました。
STEP2
データベースの構築
MAMPのphpMyAdminで必要なテーブル、カラムを作成し仮のデータを挿入しました。
STEP3
CRUD処理実装
データベース操作における基本処理CRUD（生成、読込、削除、更新）処理を実装しました。主に、収支データやカテゴリー等の選択項目のCRUD処理、アカウント情報の更新処理を実装しました。
STEP4
カレンダー機能
カレンダーの日付にその日の収支の合計金額を表示させ、いついくら収支が合ったのかをわかりやすくするカレンダー機能を開発しました。その日の金額だけでなく、日付をクリックすることで詳細の表示やデータの編集、削除をすることもできます。
STEP5
選択項目の各グラフ実装
カテゴリーや支払い方法、クレジットカードの種類やスマホ決済の種類などの選択項目の月別割合や、月別金額推移のグラフを描画する機能を実装しました。
STEP6
本番環境へアップロード
MAMPのローカルで開発していたデータをFilleZillaを用いてファイルをアップロード、データベース情報はレンタルサーバーの管理画面からインポートする形式でアップロードしました。
完成
-
クレジットカードやスマホ決済の種類まで詳細に登録可能に
どのカードでいくら使っているのか、よく使うスマホ決済はどれかを見やすくするために詳細に登録できるようにしました。
-
月指定で検索したデータをエクセル形式で出力可能に
画面上の「Excel出力」ボタンを押下すると、その時点で画面に表示されている分のデータをエクセル形式で出力することができます。
-
カテゴリーや支払い方法、クレジットカードの種類やスマホ決済の種類の月別割合や金額推移のグラフ化
月の収支の中の割合を円グラフで表示させたり、１つの項目の月別金額推移を棒グラフで表示し、収支をより見やすくしました。
-
カレンダー機能
いついくら支払ったのか、入ったのかがひと目で分かるカレンダー機能を開発し、日付からもデータを編集することができるようにしました。
Others
">
">
">