はじめに
はじめまして。じーやんと申します。
突然ですが、みなさん痴話喧嘩はしたくないですよね。
予定を聞いてないだとか、ルールを決めた・忘れた、共用の費用がどうとか…
しょうもない理由で喧嘩になった経験がある人も多いのではないでしょうか。
私を含めそういった人たちのために、共同生活を送る上で忘れがちだけど、
必要な情報を管理できるツールがあれば良いなーと思ってサービスを作りました。
それがこちらです。
サービス概要
予めパートナーと自身のユーザー登録が必要となります。
1.チーム結成
登録後にパートナーを指定するフォームが表示されるので、
そこにパートナーのEメールアドレスを記入してチームを結成してください。
パートナー登録が完了すると機能を全て使用できます。
2.予定の登録
シンプルなカレンダー型のインターフェイスです。
日付をクリック、またはプラスのアイコンをクリックすると予定を記入できます。
日付のマスからはみ出た予定については、隠れている予定の件数が表示され、
数字をクリックすると詳細が確認できます。
3.ルールの登録
ルールは１人で決めてしまってはひとりよがりなものになってしまいます。
作成したルールはパートナーからの承認を得て有効なものとなります。
差し戻しもできるようにしています。
4.家計簿の登録
費用は固定費と変動費に分け、月毎に表示できるようにしています。
月毎の費用の負担は、ちょうど公平になるように計算して結果を表示します。
また、データが入力されていた場合、自動でグラフを作成する機能を追加しました。
入力があるたびに自動でグラフが再描画されるようにしています。
chart.jsのインスタンスをvueのdataに代入し、データの変更がある度にupdateメソッドを行うことで
自動での再描画が実現できました。
こだわったこと
1.わかりやすさ
１度触ってみたら、２度目からは直感的に操作できるように、
各パーツの配置、見た目に気を使いました。
またカレンダーの祝日を外部APIで取得して、ぱっと見で休日がわかるよう工夫しました。
2.SPA
このサービスはトップページ以外はSPAで構築しています。
支出を入力したり、予定を入力・表示・編集をしたりする場合、
１つの機能を閲覧・使用する時間が長くなると予想されます。
何か動作を行う度に画面の読み込みが発生すると、
ユーザーにとって快適ではなくなると考えSPAを採用しました。
使用した技術
laravel 6.20
vue 2.6.12
vuex 3.6.2
vue-router 3.5.3
chart.js
jQuery3.2
AWS
今後追加したい機能
・ソーシャルログイン
・カレンダーに記入できる日記
外部API
作成者様、ありがとうございます。
参考サイト
上記２サイトには非常に助けられました。
エッセンスを吸収しつつ、自分でオリジナルの機能を盛り込んで開発しました。
さいごに
最後までお読みいただきありがとうございます。
このサービスを通して、誰かの生活を少しでもスムーズにできれば嬉しいです。