1. 導入部分：なぜ今「LINEで家計簿」なのか？開発の背景とメリット
日々の支出管理、三日坊主になっていませんか？
既存の家計簿アプリは高機能ですが、家族間での共有設定が面倒だったり
独自のUIに慣れるまで時間がかかったりすることがあります。
そこで今回、日本で最も普及しているインフラ「LINE」を入り口にし
バックエンドにGoogle Apps Script（GAS）を組み合わせた
「家族特化型・収支管理アプリ」を開発しました。
このシステムの最大のメリットは
使い慣れたLINEのリッチメニューから1タップで起動し
その場で入力を完了できる手軽さにあります。
さらに、データはすべてGoogleスプレッドシートに蓄積されるため
カスタマイズやデータの二次利用も自由自在です。
2. 本文：システム構成と「サンドボックス制限」の回避策
本システムは、Vercel（フロントエンド）とGAS（バックエンド）を分離した構成を採用しています。なぜGAS単体で構築しなかったのか。それは、Google側のセキュリティ制限（サンドボックス化）によるUIの制約を回避し、よりモダンで高速なレスポンシブUIを実現するためです。
フロントエンド:
Vercelでホスティング。
HTML5/JavaScript（Chart.js）を使用し
LINE内ブラウザに最適化したレイアウトを提供します。
バックエンド:
GASをAPIサーバーとして運用。
VercelからのPOSTリクエストを受け取り
データの受領・保存を制御します。
データベース:
Googleスプレッドシート。
収支データやユーザー情報を保存する
「サーバーレスDB」として活用します。
3. 本文：こだわりのUX。画像圧縮とリアルタイム分析
エンジニアとしてこだわったのは、画像アップロードの快適性です。
スマホで撮影した写真は数MBと巨大になりがちで
そのままGASへ送るとタイムアウトや容量制限に直面します。
これを解決するため、クライアントサイド（Canvas API）で画像を
横幅1024pxに縮小し、画質0.7のJPEGに自動圧縮する
ロジックを実装しました。
これにより、最大3枚の画像も一瞬でアップロード可能です。
また、蓄積されたデータはChart.jsによって
「支出内訳（ドーナツグラフ）」や「収支バランス（棒グラフ）」として
可視化され、家族の経済状況を直感的に把握できます。
4. 本文：技術的ハマりどころとセキュリティ対策
開発中、特に注意を払ったのが
「CORS（オリジン間リソース共有）」と「ユーザー認証」の両立です。
VercelからGASへデータを飛ばす際、適切なヘッダー処理とGAS側のデプロイ設定（アクセス権：全員）を徹底することで、セキュアかつスムーズな通信を確保しました。
ユーザー認証にはLIFFのプロファイル取得機能を活用しています。
初回アクセス時にLINEプロファイルからuserIdを自動取得し、スプレッドシートのユーザーマスタに存在しない場合は自動登録する仕組みを構築しました。
これにより、面倒な会員登録フローを完全に排除しています。
5. まとめ：今後の展望と「未来の家計管理」
本システムは、単なる家計簿に留まらない拡張性を秘めています。
今後はGemini AIと連携し、アップロードされた領収書画像から金額や店名を自動抽出する「全自動入力機能」の実装を計画しています。
また、予算管理機能やプッシュ通知機能を加えることで、家族全員が自然と節約意識を持てるプラットフォームへと進化させていく予定です。
自分で作ったツールで家族が笑顔になる。
これこそが個人開発の醍醐味ではないでしょうか。
こんなアプリを作成してほしい。作成方法を学びたい方は
お気軽にメッセージくださいね♪
今回のアプリのシステム構成を活用すれば
色々な仕組みが、月額無料で使えるアプリが作れます。
運用コストを抑えたシステムつくりのご相談お待ちしております。
