New「プロフィール&ブログコンセプト」

AppSheetsで家計簿入力アプリ作成手順|ノーコード

こんな方にオススメ!
  • 家計管理をはじめたけど入力が億劫でレシートが溜まってしまう
  • 何にいくら使ったのかメモしてるけど、入力の時に毎回パソコンを開くのが面倒
  • 長く利用していくものだからスプレッドシートに連携させたい
  • レシートをもらったらその都度、スマホで入力したい
  • 無料で使いたい

本記事では、プログラミング知識がない方でも簡単にアプリ開発ができるAppSheetsを使った『家計簿入力アプリ』の作成方法をご紹介します。

現金で支払いをした場合は、利用した金額をスマホでサクッと入力。レシートが溜まったり、わざわざPCを開く必要もなくなります。

それではいきましょう!

目次

課題と改善対象箇所の整理

抱えていた課題

我が家では、現金決済をした場合は決済金額、用途、日付をスプレッドシートに入力し家計管理を実施していました。

そして、スマホからスプレッドシートの直接入力はしづらくパソコンを毎回開いてスプレッドシートに入力していました。

妻は毎回パソコンを開いてスプレッドシートに入力が億劫でレシートを溜めがちという状況になっていました。

これらを解決する為に今回ご紹介する『Appsheetsで家計簿入力アプリ』を制作する流れとなりました。

下の図赤枠内が、今回、改善したい箇所です。

AppSheetsで作った家計簿管理アプリの完成イメージ

①過去入力した情報がアプリ上から確認できます。

AppSheets アプリ 完成イメージ

②上記画像の右下の”+”ボタンを押すと入力画面に遷移します。

AppSheets アプリ 完成イメージ

日付や用途、費用項目、支払い方法や金額を入力できます。

③費目については、スプレッドシート上で集計する為、選択制にしています。

AppSheets アプリ 選択画面

④入力した情報はスプレッドシートに反映されます。

スプレッドシート

⑤月末にクレジットカード利用明細とまとめて家計管理シートに入力します。

AppSheets家計簿作成手順

STEP1:データベースの準備

最初にグーグルドライブ上にデータベースとなるスプレッドシートを準備します。

①AppSheetsで入力項目としたいものを入れておく

シート名も先に変更しておきます。

スプレッドシート 下準備

STEP2:アプリの開発環境設定

・下記URLからAppSheetsにアクセスし、Start for freeをクリックする

AppSheet
AppSheet : mobile apps from spreadsheets : Make apps with no-code. AppSheet's no-code app building platform allows you to quickly build apps to collect, or connect to, data. Start building for free now.
AppSheets トップ画面

・下記画像の左のStart with your dataをクリックします。

手順 アプリ作成

・次に、App Nameにアプリ名を入れます。(※日本語入力不可

・Categoryは、近しいものがあれば選択しておき、なければOtherを選択。

・Choose your dataは、下準備で作成したスプレッドシートを選択します。

アプリ作成

STEP3:アプリの詳細設定

・データ規則を設定していきます。

設定詳細

Data>Columns>Inputと選択していくと上記画像が現れます。

まず、TYPEで入力されるデータが何かの指示を与えていきます。

日付→Date

詳細→自由記載したいのでText

費目→選択制にしたいのでEnum

支払い方法→こちらも選択制にしたいのでEnum

金額→数字を入力したいのでNumberとなります。

次に、INITIAL VALUEについてです。初期値をどうするかの指示を与えます。

現金利用したらすぐ入力する事が多い為、初期値は、当日である事が多いです。

日付→”=TODAY()”の関数を設定しておくと便利です。

・次に上の画像の左側のペンのマークをクリックします。すると下記画像のページに遷移します。

選択制に先ほどEnumとしたので選択項目を追加していきます。Addでどんどん追加ができます。

設定詳細 選択制

・支払い方法についても選択制にしているので項目を追加していきます。

また、Input ModeはButtonsに設定がおすすめです。

設定詳細 選択制

以上で、入力情報は完了です。

STEP4:UIを整えていきます。

・次に見た目を調整していきます。元の画面に戻りUX>Views>Inputと選択していきます。

View type→deckを選択します。

UX 見た目設定

・カレンダー表示もつけておきます。UX>Views>Calenderと選択していきます。

View type→Calenderを選択します。

以上で設定完了です。

Share APPを選びお持ちのGmailアドレスを入れアプリインストールして使用感を確かめてみてください。

最後に

最後までご覧頂きありがとうございます。

家計簿を継続する為には入力ハードルを下げてストレスなく継続できる環境を作成していく必要があります。今回ご紹介したApp Sheetは無料で使える上に初心者でもアプリ作成ができるノーコードツールですので是非試してみてください。

また、AppSheetsは日本語対応していない為、わかりにくい部分もありますが、完成イメージを見ながら操作できるのでカスタマイズしていきやすいかと思います。

少しでも参考になれば幸いです。

家計管理の全体設計についても記事にしています。良ければご覧いただければと思います。

関連記事>>>家計簿・家計管理はスプレッドシート管理がおすすめ。

目次
閉じる