「家計がみえ〜る(自分用)」は収支・口座残高・手出しを一元管理する自分専用アプリです。スマートフォン・PCどちらでも使えます。データはクラウド(Cloudflare KV)に自動保存されます。
タイトルバー
画面上部のタイトルバーに「前回アクセス日時」が表示されます。最後にアプリを開いた日時を確認できます。
画面構成(下部タブ)
- サマリー — 残高・グラフ・口座状況を一覧表示
- 取引一覧 — 収支の追加・編集・削除
- 手出し — 自分の立替・手出し金額を管理
- 設定 — 口座管理・カテゴリ管理・インポート/エクスポート
- 更新 — 最新データをサーバーから再読み込み
銀行残高
SBI新生銀行・熊本銀行の残高を自動計算して表示します。「済み」ステータスの取引が口座に反映されます。
手持ち残高(手入力管理)
PayPay・現金は手動で金額を入力します。入力欄をタップして直接編集でき、更新日が自動で記録されます。
クレジットカード 来月支払額(手入力管理)
Amazonカード・ペイディの翌月引落し予定額を手動で管理します。
グラフ
- 残高推移 — 月別の銀行残高変動グラフ
- カテゴリ別支出 — 支出をカテゴリごとに円グラフで表示
- 項目別支出 — 支出を項目ごとに円グラフで表示
- 口座別支出 — 口座(引落し先)別の支出割合
各グラフの右上のセレクトボックスで月を絞り込めます。
月の切り替え
「今月」ボタンで今月に絞り込み、「<」「>」で前後の月に移動できます。
絞り込みフィルター
- 種別 — 収入・支出で絞り込み
- ステータス — 済み・未確認で絞り込み
- 項目検索 — キーワードで検索
カテゴリバッジ
取引の左端にカテゴリを示すバッジが表示されます。
小遣いの表示金額について
項目名が「小遣い」の行は、表示金額に同月の「手出し」合計が自動的に加算されます。編集画面では元の金額のみ表示されます。
銀行残高列
各取引行の「銀行残高」列には、済みの取引を日付・登録順に積み上げた累計残高が表示されます。
新規追加
- 取引一覧画面右上の「+ 追加」をタップ
- 日付・種別・項目・金額・口座を入力
- カテゴリ・ステータス・備考を必要に応じて入力
- 「保存」をタップ
編集・削除
各行の右端にある「✏️」で編集、「🗑️」で削除できます。削除は確認ダイアログが表示されます。
入力項目の説明
- 種別 — 収入 / 支出
- 口座 — SBI新生銀行 / 熊本銀行から選択
- ステータス — 空欄(予定)/ 済み(引落し確認済み)
- カテゴリ — 設定画面で管理したカテゴリ一覧から選択
自分が立て替えた費用や手出しした金額を月単位で管理する画面です。取引一覧とは独立したデータとして保存されます。
月の切り替え
「今月」ボタンで今月に絞り込み、「<」「>」で前後の月に移動できます。画面上部に表示月の合計金額が表示されます。
新規追加
- 手出し画面右上の「+ 追加」をタップ
- 請求月(YYYY年MM月)・項目・金額を入力
- ステータスを必要に応じて設定
- 「保存」をタップ
入力項目の説明
- 請求月 — 手出しが発生した月(YYYY年MM月形式)
- 項目 — 手出しの内容
- 金額 — 手出しした金額(円)
- ステータス — 空欄(未精算)/ 済み(精算済み)
取引一覧との連携
手出し画面に登録したデータは、取引一覧の同月「小遣い」行の表示金額に自動加算されます。
口座管理
取引入力画面の「口座」セレクトに表示される引落し先を管理します。固定の2口座(SBI新生銀行・熊本銀行)に加え、独自の引落し先を追加できます。
カテゴリ管理
取引のカテゴリを追加・削除できます。追加したカテゴリは取引入力の「カテゴリ」セレクトに表示されます(五十音順)。
インポート / エクスポート
- エクスポート(💾) — 現在のデータをJSONファイルとして書き出し、バックアップを作成します
- インポート(📂) — 以前エクスポートしたJSONファイルを読み込み、データを復元します。インポート後は自動でサーバーに保存されます
デモモード
架空データに切り替えて他の人にアプリを見せるモードです。実データは一切変更されません。詳しくは「8. デモモード」を参照してください。
ヘッダー右端の 🌙 ボタンで明るい画面・暗い画面を切り替えられます。設定はブラウザに保存されるため、次回以降も維持されます。
- 🌙 をタップ → ダークモードに切替(ボタンが ☀️ に変化)
- ☀️ をタップ → ライトモードに戻る
知人や家族にアプリを見せる際に、実際の家計データを見せずにアプリの動作を確認できます。
切り替え方法
- 画面下部の「⚙️ 設定」をタップ
- 設定画面下部の「デモモード」の「OFF」ボタンをタップ → デモモードONに切替
- 画面上部に黄色いバナーが表示されます
デモモードの制約
- 取引の追加・編集・削除は操作できますが、実データには一切保存されません
- 口座残高の手動入力も保存されません
- エクスポート・インポートも無効です
実データモードへの戻り方
- 設定画面の「デモモード」の「ON」ボタンをタップ
- パスワード入力ダイアログが表示されます
- 正しいパスワードを入力して「解除」をタップ
定期バックアップの推奨
データは自動でクラウドに保存されますが、定期的にエクスポートしてローカルにも保存することをお勧めします。
バックアップ手順
- 設定画面を開く(⚙️ 設定タブ)
- 「💾 エクスポート」をタップ
- ファイルとして保存
復元手順
- 設定画面を開く
- 「📂 インポート」をタップ
- バックアップしたJSONファイルを選択
- 自動でデータが読み込まれ、クラウドにも保存されます