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

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

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

それではいきましょう！

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

抱えていた課題

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

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

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

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

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

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

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

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

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

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

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

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

AppSheets家計簿作成手順

STEP1：データベースの準備

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

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

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

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

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

AppSheet

Google AppSheet | Build apps with no code Use Google AppSheet to build powerful applications that transform your business. Get started today.

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

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

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

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

STEP3：アプリの詳細設定

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

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

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

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

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

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

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

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

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

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

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

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