ふれっしゅのーと

ふれっしゅのーと

趣味に生きる30代エンジニアが心に移りゆくよしなし事をそこはかとなく書きつくるブログ

夫婦で共有できる家計簿アプリをGoogleフォームで作ってみた

共働き夫婦なので公平性を期するために生活費は折半しているのですが、これをどう管理するかが結婚当初から問題でした。

生活費折半問題の整理

目的

夫婦で生活費を折半したいが、支払いのたびに割り勘するのは大変なので、夫婦それぞれの支出額を管理して、夫または妻の負債がどれだけかを把握しておきたい。

要件

  • 夫婦それぞれがいつどこで何に何円使ったかを管理できる
  • 割り勘の要否を区別できる(個人的な支出は割り勘不要)
  • 「人参 90円」「たまねぎ 160円」「じゃがいも 150円」と品目ごとに細分化せずに「2019/11/06 食費 400円」とまとめて明細に載せられる
  • 必要に応じて備考を記入できる

Zaimやマネーフォワードといった大手の家計簿アプリは、クレジット連携できたりレシートスキャン機能があったりと魅力的だったのですが、割り勘の要否を管理できなかったり、明細が必要以上に細分化されてしまったりして、我が家の要件には合いませんでした。

結局、かゆいところに手が届くサービスが見つからず、結婚後1年間はExcelで運用していました。買い物するたびにパソコンの前に座ってExcelに入力するというのは続かず、やがて半年分ぐらいレシートを溜め込んでから一括でExcelに入力するようになったのですが、これが地獄でした。。

日頃からこまめに入力するには、入力コストが低くなくてはなりません。非機能要件として、レシートを貰ったその場でスマホから10秒程度で入力できるのが理想です。

どこかにちょうど良いアプリはないものか…

…あっ!そうだ、Googleフォームを使えば良いじゃないか!

Googleフォームで家計簿アプリをつくる

f:id:fffw2:20191102204547p:plain https://www.google.com/intl/ja_jp/forms/about/

Googleフォームは、アンケートや問い合わせで使う入力フォームを簡単につくれるサービスです。これを使って、さくっと家計簿入力フォームを作ってみました。レスポンシブデザインなので、スマホでも適切なレイアウトで表示されます。

f:id:fffw2:20191104150709p:plain:w480
iPadでの表示例

入力者、支払日、支払先、金額、カテゴリーが必須項目で、品目の入力は任意です。個人的な支出の場合は「割り勘不要」フラグをつけます。なんだかんだでカメラを起動してレシートを撮影するよりも、テキストを入力するほうが手軽で早いです。

カテゴリーは多すぎるとどれに分類すべきか迷うので、妻に正規化してもらいました。

f:id:fffw2:20191104151858p:plain:w480

最終的に

食費、外食、日用品、家具家電、遊興費、交通費、養育費、被服費、書籍代、医療費、家賃、光熱費、水道代、通信費、その他

の15個に集約しました。順番にも意味があり、頻繁に利用するカテゴリーがプルダウンメニューの上部に表示されるように工夫しています。


Googleフォームから入力した家計簿データは、Googleドライブ内にスプレッドシートとして自動保存されます。

f:id:fffw2:20191112014413p:plain
PCでの表示例

スプレッドシート形式のデータは可用性が高く、データを集計したり、グラフを描画したりして、さらなる分析を行うことができます。


URLパラメーターで初期値を自動入力

さらなる入力効率アップのために入力者と支払日の初期表示を行います。

  • 入力者:アクセスする端末に応じて「旦那👓」「嫁🐈」を初期表示
  • 支払日:当日の日付を初期表示

GoogleFormの自動入力 - Qiita を参考にして、URLパラメーターで初期値をセットしました。フォームのURL(https://docs.google.com/forms/....../viewform)の末尾に

?entry.XXXXXXXXX=2019-11-06&entry.YYYYYYYYY=旦那👓

と付け加えてアクセスすれば、初期値がセットされます。ここで、XXXXXXXXXは支払日欄のname、YYYYYYYYYは入力者欄のnameで、それぞれページのソースから取得可能です。

「2019-11-06」の部分は、固定値ではなく、当日の日付が入らなくてはなりません。当日の日付をyyyy-MM-dd形式にして、URLパラメーターを置換するという処理が必要になります。夫婦共にiPhoneを使っているので、iOSのショートカット機能で実現しました。

f:id:fffw2:20191112001632p:plain:w240

日時:現在の日付
│
カレンダー:日時をフォーマット(yyyy-MM-dd)
│
変数:フォーマット済みの日付をdateに追加

URL:https://docs.google.com/forms/....../viewform
│
変数:URLをurlに追加

テキスト:旦那👓
(妻のスマホでは「テキスト:嫁🐈」と設定)
│
スクリプティング:テキストをURLエンコード
│
変数:URLエンコード済みのテキストをauthorに追加

テキスト:url?entry.XXXXXXXXX=date&entry.YYYYYYYYY=author
│
Google Chrome:テキストを開く

これでホーム画面からワンクリックで家計簿フォームにアクセスでき、入力者と支払日が埋まった状態で開かれるので、支払先、金額、カテゴリーの3項目をささっと入力するだけで家計簿を登録できるようになりました!

f:id:fffw2:20191112001834p:plain:w240 f:id:fffw2:20191112002053p:plain:w240


フォーム編集用URLをスプレッドシートに追加する

Googleフォームの仕様上、投稿直後の画面では編集用ページに飛べるのですが、このチャンスを逃すともう編集用ページに飛ぶことができません。あとで金額の入力ミスに気づいて修正しようと思ったときに困り果てました。

f:id:fffw2:20191112002611p:plain:w240
編集用ページへのリンクが表示されるのは投稿直後の画面だけ

そこで GoogleAppsScript(GAS) を用いて家計簿スプレッドシートに編集用URLを挿入するようにしました。実装には下記のQiita記事を参考にしました。

  1. 初めてのGoogleAppsScriptで何をしたら良いか分からない - Qiita
  2. フォーム送信時にスプレッドシートへ編集用URLを挿入する - Qiita

フォームを送信してスプレッドシートに新規行が追加されるタイミングで GoogleAppsScript が実行されて、A列に編集用ページへのリンクが追加されるという仕組みです。

今回はすでに何行か家計簿を書いた後だったので、新規行だけでなく過去分の行にも編集用URLを挿入する必要がありました。そこで 2. のソースコードをカスタマイズして、過去分にも適用できるようにしました(下記参照)。洗替用なのでトリガーはイベント発生ではなく手動実行です。*1


家計簿スプレッドシートのA列のリンクを押すと…

f:id:fffw2:20191112010626p:plain:w240


Googleフォームの編集用ページに飛べるようになりました!やったあ!

f:id:fffw2:20191112010535p:plain:w240

これで後から間違いに気づいた時も簡単に修正できます。自分以外の入力内容の改竄もできてしまいますが、そこは信頼でカバーしましょう。


まとめ

Googleフォームという既存のサービスを活用したので、一から開発するよりもはるかに簡単に、半日程度で家計簿アプリをつくれました。レジの会計直後でも、テレビを見ながらでも、電車の中でも、ぱっとレシートを入力できるようになったので、今年の年末は大量のレシートを黙々と転記するという作業に追われることはなさそうです。

つづき

改良しました。

fffw2.hateblo.jp

*1:(2022-01-24 追記)編集用URLから一度でも回答を再編集したことがある場合は、このスクリプトで洗替しないでください。不整合が生じます。Googleスプレッドシート上は作成日時順にレコードが並んでいますが、APIForm#getResponses() で取得できるレコードは更新日時順だからです。ドキュメントを読む限り、残念ながら API で作成日時順に回答レコードを取得する方法はなさそうでした。