家計簿💰ダッシュボード (Household Account Dashboard)

Google スプレッドシートと Google Apps Script (GAS) で動作する、サーバーレスの無料家計簿ダッシュボードです。 Alpine.js と Tailwind CSS を使用し、モダンでレスポンシブなUIを実現しています。

✨ 特徴

• 月次レポート: 収入・支出・収支の概要、カテゴリ別内訳、明細リスト（検索・フィルタ可能）。
• 年間分析: 年間の収支推移、カテゴリ別支出、長期的な資産推移グラフ。
• タグ分析: 特定のタグ（イベント、プロジェクトなど）ごとの収支集計。
• 資産推移: 累積の資産額を可視化し、長期的な資産形成をサポート。
• レスポンシブ対応: スマートフォンでもPCでも快適に閲覧可能。

🚀 セットアップ方法

1. スプレッドシートの準備

新しい Google スプレッドシートを作成し、シート名を DB に変更してください。 1行目はヘッダー行（項目名など）とし、2行目以降にデータを入力します。

カラム構造 (A列～G列):

列	項目名	説明	例
A	タイムスタンプ	(任意) Googleフォーム等と連携する場合に使用	2024/01/01 10:00:00
B	日付	必須。yyyy/MM/dd 形式	2024/01/01
C	金額	必須。収入はプラス、支出はマイナスで入力	-1500, 250000
D	収支種別	収入 または 支出 (空欄でも金額の正負で自動判定されます)	支出
E	カテゴリ	費目など	食費, 給与
F	メモ	詳細な内容	スーパーで買い物
G	タグ	特定の集計用タグ	旅行2024, 特別費

2. スクリプトの導入

1. スプレッドシートのメニューから [拡張機能] > [Apps Script] を開きます。
2. 以下の4つのファイルを作成し、それぞれのコードをコピペしてください。
   • コード.gs (サーバーサイドスクリプト)
   • index.html (メイン画面のHTML)
   • js.html (フロントエンドロジック)
   • css.html (スタイルシート読み込み)

3. デプロイ

1. Apps Script エディタの右上にある [デプロイ] > [新しいデプロイ] をクリックします。
2. 「種類の選択」の歯車アイコンから [ウェブアプリ] を選択します。
3. 各項目を設定します:
   • 説明: (任意) v1.0.0 など
   • 次のユーザーとして実行: 自分
   • アクセスできるユーザー: 自分のみ (自分だけで使う場合) または Googleアカウントを持つ全員
     • ※共有設定には十分注意してください。
4. [デプロイ] ボタンをクリックします。
5. 表示された ウェブアプリの URL にアクセスすると、ダッシュボードが表示されます。

⚠️ プライバシーについて

• このコード自体には個人を特定する情報（個別のスプレッドシートIDやメールアドレスなど）は含まれていません。
• データは全て、スクリプトが紐付いている Google スプレッドシートから読み取られます。
• データの公開範囲は、デプロイ時の「アクセスできるユーザー」の設定に依存します。

🛠 技術スタック

• Backend: Google Apps Script (GAS)
• Database: Google Sheets
• Frontend: HTML5, Alpine.js
• Styling: Tailwind CSS (CDN)
• Charts: Chart.js, chartjs-plugin-datalabels

📚 謝辞 / Acknowledgments

本ダッシュボードのデザインと機能は、以下のオープンソースライブラリおよび一般的な管理画面UIパターンを参考に構築されています。

• Tailwind CSS: UIデザインおよびスタイリング
• Alpine.js: リアクティブなステート管理
• Chart.js: グラフ描画
• Heroicons: アイコン素材