こんにちは。
これまでは家計簿をPCのソフト（エクセルなど）で管理していましたが、外出先で入力できたら楽だろうなと思い、Google Apps Scriptを使って自作しました。
この家計簿のいい点は以下です。
- 外出先でも入力できる。
- URLを共有することで他の家族も入力できる。
- デザインや機能をカスタマイズできる。
スマホアプリでも同じことができるのかもしれませんが、プログラムを書いて好き勝手に作るってのが結構好きなので作ってみました。
この記事はどのような家計簿を作ったかを紹介していきます。
コードはかなりのボリュームになってしまったので載せていません。
記事最後の動画に映像として載せていますが、WEBを見ながら試行錯誤で作ったものなので、文法的にかなりの間違いがあるかもしれません。
こんなものが作れるってところまで紹介できればなと思います。
概要
- Google Apps Script（GAS）を使って家計簿を自作
- GAS、html、JavaScriptで記述
- データの保存先はGoogleDrive上のスプレッドシート
- PCでもスマホでも使用可能
- ネット環境があれば使用可能
- 友人や家族と共有可能
メニュー画面
スマホで家計簿を表示させて、キャプチャした画面です。
最初にこの画面を表示させて青い「出費登録」を押すと次の画面に進みます。
このボタンは自由に作れるので、過去の入力実績や修正用のボタンも作れます。
出費登録画面
この画面で出費の内容を入力して登録します。
日付はjQueryでカレンダーを表示させて入力を簡単にしています。
上の画像のように日付、項目、内容、金額、備考を入力します。
入力のエラーも表示させることができます。
ここでは登録の際に、日付、金額が入力されていないとエラー表示させるようにもしました。
スプレッドシート
出費の登録後はスプレッドシートのセルに格納されていきます。
予め月別に入力先のフォーマットを作っておきました。
画像では先ほど登録したラーメンが入力されています。
GASからの入力が文字列形式なので、一度数値に変換して合計金額を求めています。
コード
参考程度ですが、コードの画面です。
結構なボリュームになってしまいました。
一番下の動画でコードの全画面を載せています。
まとめ
以上、自作の家計簿を作りました。
これで外出先でも家族と共有しながら出費を登録できます。
今回は自作してしまいましたが、わざわざ作らなくても、もっと使いやすいアプリ等をDLできるかもしれませんね。
まぁ、これをベースに別の色々なものを作ることもできそうだし、カスタマイズもできるので良しとします！
動画はこちらです。
映像としてですが、コードも載せています。