子どもが進んで管理する「お小遣い帳アプリ」設計図

AppSheetで作るノーコード家計簿

この設計図（チュートリアル）は、Note連載「AppSheetでお小遣い帳アプリを作ってみた」の内容を、自分でも再現したいという方のための「伴走型ガイド」です。
画面上のどこをクリックすればいいか、なぜその設定が必要なのかを、初心者の方向けに丁寧に解説しています。

📅 第1部：データ設計（Note第1回対応）

まずは土台作りです。Googleスプレッドシートに3つのシートを用意し、AppSheetに接続します。

📊 データモデル (Data Schema)

以下の通りにカラム（列）を作成します。

1. <code>Logs</code> テーブル (入出金履歴)

家計簿のメインとなる、お金の動きを記録する場所です。

  • ID: <code>UNIQUEID()</code> で自動生成。
  • Date: 日付。
  • Item: 内容（おやつ、お手伝い報酬など）。
  • Amount: 金額。
  • Type: 収入 or 支出。
  • Category: あとで絞り込みができるようにマスタから選びます。
  • User: 誰の記録かを判別します。

2. <code>Categories</code> マスタ & 3. <code>Users</code> 設定

マスタを作ることで、入力の揺らぎ（「おやつ」と「お菓子」が混ざるなど）を防ぎ、目標金額も管理できるようにします。

🛠️ 第2部：UXとロジック（Note第2回対応）

子供が迷わず、楽しく入力できるようにするための「アプリの魔法」を設定します。

A. 残高 (Current Balance) の計算

アプリを開いた瞬間に「あといくら使える？」がパッと分かるようにします。

設定方法：

  1. 左側のメニューから 「Data」 タブ（データベースのようなアイコン 🗄️）を開きます。
  2. その中にある 「Columns」 を選択し、「Users」テーブルをクリックして展開します。
  3. <code>+ Add Virtual Column</code>（仮想列の追加）ボタンをクリックします。
  4. カラム名に <code>CurrentBalance</code> と入力し、以下の計算式を貼り付けます。
<code>[AdjustmentAmount] 
+ SUM(SELECT(Logs[Amount], AND([User]=[_THISROW].[Name], [Type]="収入"))) 
- SUM(SELECT(Logs[Amount], AND([User]=[_THISROW].[Name], [Type]="支出")))</code>

B. 書式ルール (Format Rules)

「残高が減ったら赤くする」など、視覚的に訴えかけます。

設定方法：

  1. 左メニューの下部にある 「Views」（スマホのようなアイコン 📱）をクリックします。
  2. 上部にあるタブから 「Format Rules」 を選び、<code>+ New Format Rule</code> を押します。
  3. <code>If this condition is true</code>（この条件のとき）に <code>[CurrentBalance] < 500</code> と設定。
  4. 下の方にある <code>Text Color</code> で 赤 を選ぶことで、使いすぎを直感的に警告できます。

C. 入力アクション (LINKTOFORM)

10秒で入力を終わらせるために、特定の項目が最初から埋まった状態でフォームを開きます。

設定方法：

  1. 左メニューの中央あたりにある 「Actions」（カミナリのマーク ⚡）をクリックします。
  2. Users テーブルの横にある 「+」ボタン（New Action） をクリックします。
  3. <code>Do this</code> を <code>App: go to another view within this app</code> に変更し、<code>Target</code> に以下を入力。
<code>LINKTOFORM("Logs_Form", "Type", "支出", "User", [_THISROW].[Name])</code>

これで、「支出」ボタンを押した瞬間に「支出」という文字が埋まった状態で入力画面が開きます。

D. カテゴリの動的フィルタリング

「支出」のときは支出用カテゴリだけを表示し、入力をスムーズにします。

設定方法：

  1. 左側のメニューから 「Data」 タブを開きます。
  2. 「Columns」（列の設定画面）を選択し、「Logs」テーブル を展開します。
  3. 一覧の中から 「Category」 を探し、左側の 鉛筆マーク（編集ボタン） をクリックします。
  4. 下の方にスクロールして 「Data Validity」 を開き、<code>Valid If</code> に以下を入力。
<code>SELECT(Categories[Category], [Type] = [_THISROW].[Type])</code>

これで、「収入」を選んでいるときに「お菓子代」などの支出カテゴリが出てくるミスマッチを防げます。

🚀 第3部：運用と自動化（Note第3回対応）

家族で運用するための仕上げと、モチベーションを維持する「未来の家計簿」への進化です。

E. セキュリティとプライバシー (Security Filter)

「兄弟の残高は覗けないけど、パパは家計管理のために全員分見れる」という、家族のプライバシーを守る設定です。

設定方法：

  1. 左メニューの <code>Data</code> から <code>Logs</code> テーブルを選択します。
  2. 画面中央のヘッダーにある 「Table settings（2本のスライダーのようなアイコン）」 をクリックします。
  3. 画面中央に設定パネル（Storage, Security, Scale...）が開くので、 <code>Security</code> タブをクリックします。
  4. その中にある <code>Security filter</code> の入力欄（<code>=</code> の部分）に以下の数式を貼り付けます。
<code>OR(
  LOOKUP(USEREMAIL(), "Users", "Email", "Role") = "Admin",
  [User] = LOOKUP(USEREMAIL(), "Users", "Email", "Name")
)</code>

この設定をすることで、デバイスには「自分に関係のあるデータ」だけが届くようになり、セキュリティと動作速度の両方が向上します。

F. 月次レポート (Monthly Report)

「今月何に使ったか」を子どもが自分でドリルダウンして振り返るための画面です。

設定方法：

  1. <code>Logs</code> テーブルに <code>YearMonth</code> カラムを追加し、数式に <code>TEXT([Date], "YYYY年MM月")</code> を入れます。
  2. 左メニュー <code>Views</code> (📱) から <code>+</code> ボタンを押して、新しい View を作成します。
  3. <code>View type</code> を <code>table</code> にし、<code>Group by</code> の1つ目に <code>YearMonth</code>、2つ目に <code>Type</code> を設定。

これで、月ごとにパカパカと開閉して明細を確認できるようになります。

G. 目標達成グラフ (Chart)

「あと少しで目標のゲームが買える！」というワクワクを可視化します。
※他のユーザーの目標グラフが並んで表示されるのを防ぎ、UIを綺麗にするために「自身のデータのみを抽出するSlice」をデータソースとして使用します。

設定方法：

  1. <code>Data</code> メニューで <code>Users</code> テーブルの横にある <code>+</code> ボタン（<code>Add Slice to filter data</code>）を押して新しい Slice (例: 「自分のデータ」) を作成します。
  2. <code>Row filter condition</code> に <code>OR(LOOKUP(USEREMAIL(), "Users", "Email", "Role") = "Admin", [Email] = USEREMAIL())</code> を設定します。
  3. <code>Views</code> (📱) から新しく View を追加し、<code>View type</code> を <code>chart</code> に設定し、<code>For this data</code> を 1. で作成した Slice に設定します。
  4. <code>Chart columns</code> で <code>TargetAmount</code> と <code>CurrentBalance</code> を選ぶことで、目標（赤）と現在の貯まり具合（緑）を、自分の分だけ比較できます。

H. 通知システム (毎月のお知らせ ＆ お小遣い請求ボタン)

「会社のお給料と違って、何もしなくても自動的にお金が振り込まれるわけではない」という学びを込めて、2つの通知機能を用意します。

H-1. [自動] 毎月1日のリマインダー (Automation)

月が替わったら前月の残高や履歴を確認し、親に「お小遣いちょうだい！」とアピールするための気づきを与える自動プッシュ通知です。

設定方法：

  1. 左メニューの「Automation」(🤖) を開き、<code>Bots</code> の横にある <code>+</code> ボタン（<code>Create a new automation</code>）をクリックして、<code>New Bot</code> を作成します。（※名前を「毎月のリマインダー」等に変更すると分かりやすいです）
  2. Eventの設定: <code>Configure event</code> をクリックします。
    • Event Name: 「毎月1日」等
    • Event source: <code>Schedule</code> を選択
    • Schedule: <code>Monthly</code> （毎月）
    • Day of month: <code>1</code> （1日）
    • Time: 通知したい時間（例: <code>08:00:00</code>）
    • ForEachRowInTable: <code>Users</code> （各ユーザー宛てに送るため）
  3. Processの設定: <code>+ Add a step</code> をクリックし、<code>Create a custom step</code> を選びます。
    • Step Name: 「通知送信」等
    • Run a task: <code>Send a notification</code> （プッシュ通知）を選択
    • To: <code>[Email]</code> （対象となる子どものアドレス）
    • Title / Body: 「お小遣いの確認をしよう！」「前月の履歴を見て、お小遣いをもらうアピールをしましょう！」など自由に入力します。

H-2. [手動] 親から子への「入力して！」通知ボタン (Action + Automation)

親がお小遣いを渡したり、データを更新したりした際に、子どもに対して「アプリを確認して入力してね！」と手動でプッシュ通知を飛ばすためのボタンです。
※子ども側の画面ではこのボタンは非表示になります。

設定方法：

  1. アクション（ボタン）の作成: 左メニューの「Actions」(⚡) から <code>+</code> ボタンを押し、<code>Users</code> テーブルに作成します。
    • Action name: 「お知らせ送信」
    • Do this: <code>Data: set the values of some columns in this row</code>
    • Set these columns: <code>LastSent</code> カラムに <code>=NOW()</code> をセット
    • Appearance: ベルマーク🔔などを選択。
    • Behavior (重要): <code>Only if this condition is true</code> に <code>LOOKUP(USEREMAIL(), "Users", "Email", "Role") = "Admin"</code> と入力します。これで親にしかボタンが見えなくなります。
  2. Botの作成: 左メニューの「Automation」(🤖) から <code>+</code> ボタン（<code>Create a new automation</code>）を押して、<code>New Bot</code> を作成します。
  3. Eventの設定: <code>Configure event</code> をクリックします。
    • Event source: <code>App</code> を選択
    • Table: <code>Users</code>
    • Data change type: <code>Updates</code> にチェック
    • Condition: <code>[_THISROW_AFTER].[LastSent] <> [_THISROW_BEFORE].[LastSent]</code>
  4. Processの設定: <code>+ Add a step</code> -> <code>Create a custom step</code> -> <code>Run a task</code> -> <code>Send a notification</code> を選択。
    • To: <code>[Email]</code> （その行の子どものメールアドレス宛に飛びます）
    • Title / Body: 「お小遣い帳を更新したよ！」「お小遣い情報を更新しました。アプリを開いて内容を確認してね！」など固定のメッセージでOKです。

📱 付録：子どもたちのスマホ（実機）への設定手順

  1. Share（招待）: 右上の人型アイコンから、子どものGmailアドレスを <code>Use app</code> で招待します。
  2. 準備: 子どものスマホに「AppSheet」アプリをインストールし、ログイン。
  3. ホーム画面に追加: ブラウザからではなく「ホーム画面に追加」することで、普通のスマホアプリと全く同じ感覚（フルスクリーン）で起動できるようになります。

この設計図が、あなたの家の「家庭内DX」の助けになれば幸いです。
分からないことがあれば、いつでもご相談くださいね！

👉 noteで詳しい解説記事を読む（連載①）
研究成果レポート一覧へ戻る