【ノーコード】AppSheet講座 Step2：お小遣い帳アプリを作ろう

本講座で作成する『お小遣い帳アプリ』の完成イメージを共有します。

『お小遣い帳アプリ』に必要な情報を洗い出し、データベースの設計・スプレッドシートの作成を行います。

扱うデータのタイプをカラム毎に設定します。また入力必須項目や初期値、数値項目の設定なども行います。

条件付きの表示を行う「Show_if」の項目を設定します。これにより、区分が『支出』の時だけ「カテゴリー」と「支出金額」を、区分が『収入』の時だけ「収入金額」が表示されるようにします。

画面のテーマや、メインカラー、アプリのロゴ、文字の大きさ、日本語化などの設定を行います。

テーブルの「年月日」の項目から、「年月」や「日」の情報を取り出したバーチャルカラムを作成し、一覧表示のグルーピングや表示項目に活用します。

一覧画面のグルーピングなどの目的で作成したバーチャルカラムは、詳細画面や編集画面で表示する必要はありません。特定の画面でのみ表示を行うよう「Show_if」に条件を設定します。

「Ref」で他のテーブルに紐づけたことで、紐づけられた側のテーブルに自動で追加されるList型の「Related...」カラム。このカラムに設定されている式や、これを表示するビューの設定「..._inline」について解説します。

カテゴリーごとの支出合計を求めるため、カテゴリーテーブルに、明細テーブルからそのカテゴリーの支出金額だけを抽出した「支出金額リスト」と、支出金額リストに設定された値を合計する「支出合計」の2つのバーチャルカラムを追加します。

カテゴリーごとの支出の内訳をパイチャートで表示する支出内訳画面を作成します。

収入の合計額と支出の合計額、および収入合計額から支出合計額を差し引いた残金を求めるための集計用のテーブルを新たに追加します。

集計用のテーブルにバーチャルカラムを追加し、明細テーブルから収入金額だけを抽出した「収入レコード」、支出金額だけを抽出した「支出レコード」、それぞれに設定された金額を合計する「収入合計」「支出合計」、そして収入合計から支出合計を差し引いて画面に表示するための「残金表示用テキスト」を作成します。

新しいビューを追加し、集計テーブルで作成した「残金表示用テキスト」を表示します。また、このビューはメニュー内に配置します。