はじめに - なぜ作ったのか
「今月も赤字だ...」「お金、どこに消えたんだろう...」
そんな経験、ありませんか?私もです。市販の家計簿アプリはたくさんあるけど、自分が本当に欲しい機能が揃っているものってなかなかないんですよね。
それなら、作っちゃえ!ということで、Djangoで家計簿アプリを開発してみました。しかも完全無料で動く環境を目指して。
この記事では、PythonAnywhereの無料プランで動かしている家計簿アプリの開発ストーリーと、実装した機能について紹介します。コード職人というより「こんな機能があったらいいな」を形にした話です。
🎯 このアプリのコンセプト
誰のため?
- 家族で家計を管理したい人
- スマホでサクッと記録したい人
- 貯蓄と支出を分けて管理したい人
- お金をかけずに家計管理を始めたい人
何ができる?
- ✅ 2タップで記録完了(モバイルファースト設計)
- ✅ 家族で共有(招待リンクで簡単参加)
- ✅ AI分析(Gemini APIで支出パターンを分析)
- ✅ 将来予測(最大60年先の貯蓄推移を表示)
- ✅ 定期取引(家賃・給料を一括登録)
- ✅ 多言語対応(日本語・イタリア語・英語)
そして何より、完全無料で使える!
🌐 なぜWebアプリなのか? - これが最強の理由
ここで声を大にして言いたいことがあります。
Webアプリケーション、最高です。
なぜネイティブアプリじゃなくてWebアプリを選んだのか?答えは明確です。
📱 ワンソース、マルチデバイス
ネイティブアプリを作ろうとすると、こうなります:
- iOS用にSwift/Objective-Cで開発 → App Store審査
- Android用にKotlin/Javaで開発 → Google Play審査
- Windows用に...?
- Mac用に...?
- Linux用に...?
コードが5倍、工数が5倍、メンテナンスも5倍。
一方、Webアプリなら?
ブラウザがあれば、どこでも動く。以上。
たった1つのコードベースで、iPhone・Android・Windows・Mac・Linux・タブレット、全部カバー。しかも:
- ✅ App Store審査なし(即デプロイ!)
- ✅ 各OSのガイドライン無視(自由に作れる)
- ✅ ストア手数料ゼロ(30%取られない)
- ✅ 更新が即反映(ユーザーのアップデート作業不要)
- ✅ インストール不要(URLアクセスだけでOK)
🚀 開発スピードが違う
実体験として、このアプリの開発期間は約3週間。もしネイティブアプリで同じものを作ろうとしたら?(こんなに早くできたらいいな~笑)
- iOS版:1ヶ月
- Android版:1ヶ月(UIが違うから一から)
- デバッグ・テスト:iOS + Android = カオス
- 審査待ち:1週間〜数週間(リジェクトされたら最初から)
合計3ヶ月以上かかるでしょう。しかもメンテナンスは2倍。
Webアプリなら、バグ修正も即座に反映。ユーザーが「アップデートしてください」ボタンを押す必要もない。ページをリロードすれば最新版。これ、めちゃくちゃ重要です。
💻 開発環境もシンプル
ネイティブアプリ開発に必要なもの:
- Mac(iOS開発には必須、30万円〜かな?毎月の小遣い少ないので…笑)
- Xcode(容量デカい)
- Android Studio(メモリ食う)
- 各種SDK・ライブラリ(バージョン地獄)
- 実機テスト用のデバイス(複数)
Webアプリ開発に必要なもの:
- テキストエディタ
- ブラウザ
以上。
WindowsでもMacでもLinuxでも、どんなPCでも開発できる。しかもChromiumの開発者ツールがあれば、レスポンシブデザインのテストも一瞬。
🎯 ユーザー視点でも便利
「アプリダウンロードしてください」って言われると、正直面倒じゃないですか?
- App Store開く
- 検索する
- インストール(重い)
- 権限許可(カメラ・位置情報・通知...)
- アカウント作成
- ようやく使える
疲れた。
Webアプリなら:
- URLをタップ
- 使える
2ステップ。
しかもPWA(Progressive Web App)化すれば、ホーム画面に追加もできる。見た目はネイティブアプリそのもの。でも実態はWebアプリ。いいとこ取りです。
🔧 メンテナンスが楽すぎる
ネイティブアプリのバージョンアップ:
開発 → ビルド → 審査申請 → 待つ → リジェクト → 修正 → 再申請 →
やっと承認 → ユーザーがアップデート → やっと反映
Webアプリのバージョンアップ:
git push → デプロイ → 即反映
5分で終わる。
緊急のバグ修正も深夜2時にササッと対応できます(やったことある笑)。
🌍 クロスプラットフォームの本当の意味
「クロスプラットフォーム」って言葉、React NativeとかFlutterでよく聞きますよね。確かに1つのコードベースでiOS・Android両方動く。素晴らしい。
でも本当のクロスプラットフォームは、OS問わず全部です。
- おばあちゃんの古いAndroid → 動く
- 最新iPhone 16 Pro → 動く
- 会社のWindows PC → 動く
- MacBook → 動く
- iPadでもタブレットでも → 動く
ブラウザさえあれば動く。これが最強。
🎨 デザインの自由度
ネイティブアプリは、OSごとのデザインガイドラインがあります。
- iOS:Human Interface Guidelines
- Android:Material Design
これを無視すると審査で落ちるか、ユーザーに違和感を与える。
Webアプリ?好きに作れます。
Tailwind CSSでモダンなUI、Chart.jsでインタラクティブなグラフ、Three.jsで3D表現だって可能。しかもOSの制約なし。完全に自由。
💡 個人開発者にとっての現実
正直な話、個人開発者がネイティブアプリを作るのはハードルが高すぎます。(勉強遅いものなので)
- 開発スキル(2〜3言語習得)
- 開発環境(Mac必須、高額)
- 審査プロセス(時間とストレス)
- メンテナンス工数(2倍)
Webアプリなら?
- Python/Djangoだけでバックエンド・フロントエンド両方OK
- 無料のエディタで開発可能
- 審査なしで即公開
- 無料プランで運用可能(PythonAnywhere)
- メンテナンスは1つのコードベースだけ
個人開発で「アイデアを形にする」なら、Webアプリ一択でしょう。
📊 データで見るWebアプリの優位性
このアプリの実例:
| 項目 | ネイティブアプリ(想定) | Webアプリ(実際) |
|---|---|---|
| 開発期間 | 3ヶ月〜 | 3週間 |
| 対応デバイス | iOS or Android | 全OS |
| 更新頻度 | 月1回(審査待ち) | 即時(無制限) |
| 初期コスト | $100〜 | $0 |
| ランニングコスト | $99/年〜 | $0(無料プラン) |
| ユーザー獲得 | ストア検索のみ | URL共有でOK |
| メンテナンス工数 | 高(OS別対応) | 低(ワンソース) |
コスパ、圧勝。
🚫 ネイティブアプリが必要な場面
もちろん、全てのケースでWebアプリが最適とは言いません。
ネイティブアプリが必要な場面:
- GPS/センサーへの高度なアクセス
- オフライン完全動作(ゲームなど)
- 超ヘビーな3D処理(Unreal Engineとか)
- Bluetooth機器との連携
- Apple/Googleの純正API必須(Apple Pay等)
でも、家計簿アプリには不要です。ブラウザAPIで十分。
🎯 結論:Webアプリ、作ろうぜ
「アプリ作りたい」って思ったとき、いきなりSwift勉強する必要はありません。
HTMLとPythonができれば、今日から作れます。
そして作ったアプリは、世界中のあらゆるデバイスで動く。これって、めちゃくちゃすごいことだと思いませんか?
Webの力、ナメてました。今は確信してます。
Webアプリケーションこそ、個人開発者の最強の武器。
ちなみに、このアプリもPWA化してるので、スマホのホーム画面に追加すればネイティブアプリと見分けがつかないレベルです。実際触ってみてください
👉 https://mydemoapplication.pythonanywhere.com
「Webアプリってこんなにヌルヌル動くの!?」って驚くと思います(自画自賛)。
🚀 技術スタック - シンプルイズベスト
Backend: Django 5.2+
Frontend: Tailwind CSS (CDN) + Vanilla JavaScript
Database: SQLite
Hosting: PythonAnywhere (Free Tier)
AI: Google Gemini API
Charts: Chart.js
なぜこの構成?答えは簡単:無料で動くからです(笑)
PythonAnywhereの無料プランは制約がありますが、個人プロジェクトには十分。データベースも複雑なことをしなければSQLiteで問題なし。フロントエンドもCDN経由のTailwindとChart.jsだけで、モダンなUIが作れます。
💡 実装した機能たち
1. クイック入力 - スマホで2タップ記録
家計簿アプリの最大の敵は「記録の面倒くささ」です。
だから、このアプリは2タップで完了を目指しました:
- 金額をタップ(よく使う金額ボタンあり)
- カテゴリーをタップ
これだけ。日付も支払方法も、デフォルト値で自動入力。レシート写真も撮れるけど、任意。とにかく手軽さ優先です。
# クイック入力の裏側(シンプル!)
@login_required
def quick_add_transaction(request):
if request.method == 'POST':
form = QuickTransactionForm(request.POST, family=family)
if form.is_valid():
transaction = form.save(commit=False)
transaction.family = family
transaction.member = member
transaction.save()
return redirect('dashboard')
2. 家族共有機能 - 招待リンクで簡単参加
「夫婦で家計管理したい」「親の支出も見守りたい」
そんなニーズに応えて、招待リンク機能を実装しました。UUIDで生成したリンクをLINEやメールで送るだけ。有効期限は7日間、使い切りです。
# UUIDで安全な招待コード生成
class FamilyInvite(models.Model):
code = models.UUIDField(default=uuid.uuid4, unique=True)
expires_at = models.DateTimeField()
is_used = models.BooleanField(default=False)
実装時の小話:最初はシンプルな数字コードにしようと思ったけど、セキュリティ的にUUIDの方が安心。でも長いから「コピー」ボタンは必須でした(笑)
3. 貯蓄の2つのタイプ - ここがポイント!
これが個人的に一番こだわった部分。貯蓄には2種類あります:
📌 現金貯蓄(純粋な積立)
給料から毎月3万円を別口座へ、みたいなやつ。これは「使えるお金が減る」けど「貯蓄が増える」。
📌 保険型積立(保険・学資保険)
生命保険とか学資保険は「支出」だけど、実は「貯蓄」でもある。だから両方に計上します。
# 保険型積立の判定
def is_insurance_saving(self):
return (self.transaction_type == 'expense' and
self.category.is_insurance_saving)
この機能のおかげで、「今月の支出が多い!」と思っても、実は保険料の分は将来の資産になっていることが一目でわかるんです。
4. AI支出分析 - Gemini APIで賢く分析
ここが今回の目玉機能!
過去3ヶ月の支出データをGemini API(Flash 2.5)に投げて、具体的なアドバイスをもらいます。
# プロンプトの一部(超長い笑)
prompt = f"""
あなたは経験豊富なファイナンシャルプランナーです。
以下の家計データに基づき、具体的で実行可能なアドバイスを日本語で作成してください。
## 📊 家計概要(3ヶ月合計)
- 総収入: ¥{total_income:,}
- 総支出: ¥{total_expense:,}
- 貯蓄率: {savings_rate:.1f}%
## 📂 カテゴリー別支出詳細
{sorted_expenses}
## 📝 分析依頼内容
1. 🔍 現状分析(3つのポイント)
2. 💡 具体的な改善提案(3つのステップ)
3. 💰 今すぐ見直すべき項目
4. 🌟 素晴らしい点
"""
ポイント:
- ただ「節約しましょう」じゃなく、具体的な行動を提案させる
- 数字ベースで客観的に
- でも最後は褒める(これ大事!モチベーション維持)
実際のAI回答例:
「コンビニ利用が月12回、¥18,000です。週2回に減らすだけで月¥9,000の節約になります。買う前に『本当に必要?』と5秒考える習慣をつけましょう。」
これが結構的確で、自分でも「なるほど...」ってなります(笑)
5. 将来予測 - 60年後の資産は?
「このペースで貯金を続けたら、30年後いくらになる?」
気になりますよね?だから将来予測機能を実装しました。
過去12ヶ月の実績から月平均を計算し、最大60年先まで予測します(マウスホイールでスピナー操作可能)。
# 予測ロジック(シンプル!)
for i in range(1, forecast_years * 12 + 1):
cumulative_cash += avg_cash_saving + avg_income - avg_expense
cumulative_insurance += avg_insurance
注意点:あくまで「今のペースが続いたら」の計算。現実はもっと変動するけど、目安としては十分使えます。
グラフで見ると、「おお、定年までに結構貯まるな...」とか「やばい、全然足りない!」とか、現実が見えてきます。
6. 定期取引 - 一括登録で楽ちん
毎月の固定費(家賃、保険、給料など)をテンプレート化。
毎月1日に「⚡すべての定期取引を一括記録」ボタンをポチッ。これだけで全部登録完了。
# 一括生成の裏側
for template in templates:
if template.should_generate(): # 今日記録すべき?
template.generate_transaction()
generated_count += 1
重複チェックも自動でやるから、間違って2回押しても大丈夫。地味に便利な機能です。
7. メール通知 - 記録忘れ防止
「あれ、もう1週間記録してない...」
そんな事態を防ぐため、メール通知機能を実装。設定した日数(例:3日)記録がないと、登録したメアドに自動送信。
# Djangoの管理コマンド
# python manage.py send_log_reminders
class Command(BaseCommand):
def handle(self, *args, **options):
for settings in EmailNotificationSettings.objects.all():
# 最終記録から何日経過?
if days_since >= settings.days_without_log:
send_mail(...) # リマインダー送信
Cronで毎朝9時実行するように設定すれば完璧。
🎨 デザインの工夫 - Tailwindで爆速開発
Tailwind CSS、最初は「クラス名長すぎ!」って思ってたけど、慣れたらめちゃくちゃ速い。
<button class="w-full bg-blue-600 text-white py-4 rounded-lg
font-bold hover:bg-blue-700 transition">
保存
</button>
これだけで、レスポンシブでアクセシブルなボタンが完成。CSSファイルを一切書かなくて済みます。
モバイルファーストを意識して、全てスマホで使いやすいサイズに。タップターゲットは最低44px、フォントサイズは16px以上(iOS zoomを防ぐため)。
Chart.jsでグラフもサクッと実装:
new Chart(ctx, {
type: 'line',
data: {
labels: ['1月', '2月', '3月'],
datasets: [{
label: '収入',
data: [300000, 320000, 310000],
borderColor: 'rgb(59, 130, 246)'
}]
}
});
これで過去6ヶ月の推移がビジュアル化。数字だけより圧倒的に分かりやすい。
🌍 多言語対応 - Django i18n
日本語・イタリア語・英語の3言語対応。なぜイタリア語?...作者がイタリア在住だからです(笑)
Django i18nを使えば、テンプレート側はこれだけ:
{% load i18n %}
<h1>{% trans "家計簿アプリ" %}</h1>
.poファイルで翻訳を管理:
msgid "家計簿アプリ"
msgstr "App Bilancio Famigliare" # イタリア語
言語切り替えボタンは画面左下に固定配置。フラグ絵文字で直感的に。
🆓 PythonAnywhere無料プランの制約と工夫
さて、ここからがリアルな話。PythonAnywhereの無料プランには制約があります:
制約一覧
- ✅ HTTPSは使える(これ重要!)
- ✅ 1つのWebアプリまで
- ⚠️ ストレージは512MBまで
- ⚠️ 毎日リロード必要(自動スリープ)
- ⚠️ 外部APIへのアクセスは限定的(ホワイトリスト方式)
工夫した点
1. ストレージ管理
SQLiteデータベース + メディアファイル(レシート写真)で512MBはすぐいっぱいになります。
だからデモサイトでは定期的にデータ削除することを明記。実運用するなら有料プランが必要です。
2. 静的ファイル
Tailwind・Chart.js・Three.jsは全てCDN経由。ローカルに置かないことでストレージ節約。
<script src="https://cdn.tailwindcss.com"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/4.4.0/chart.umd.min.js"></script>
3. 画像最適化
レシート画像はPillowで自動リサイズ。元画像5MBでも、保存時は500KB以下に圧縮。
from PIL import Image
def save_receipt(image_file):
img = Image.open(image_file)
img.thumbnail((1200, 1200)) # リサイズ
img.save(path, optimize=True, quality=85)
🚧 開発で苦労したこと(と解決法)
1. セッション管理
最初、毎回ログインが必要で「めんどくさい!」ってなってました。
解決策:セッション有効期限を30分に設定+セッションクッキーをブラウザ閉じても保持。
SESSION_COOKIE_AGE = 30 * 60 # 30分
SESSION_EXPIRE_AT_BROWSER_CLOSE = False
2. Chart.jsのレスポンシブ対応
グラフがスマホで見切れる問題。
解決策:max-heightを設定+maintainAspectRatio: false。
options: {
responsive: true,
maintainAspectRatio: false
}
3. 日本語フォーム検証エラー
Djangoのデフォルトエラーメッセージが英語。
解決策:i18nで翻訳+カスタムバリデーションメッセージ。
from django.utils.translation import gettext as _
raise ValidationError(_('パスワードが一致しません'))
4. Gemini APIのレート制限
無料プランは1分に15リクエストまで。連打されると止まる。
解決策:フロント側で「分析中...」ローディング表示+リクエスト後1分間ボタン無効化。
button.disabled = true;
setTimeout(() => button.disabled = false, 60000);
5. タイムゾーン問題
サーバーがUTC、ユーザーが日本時間で日付がズレる。
解決策:Djangoのタイムゾーン設定をAsia/Tokyoに。
TIME_ZONE = 'Asia/Tokyo'
USE_TZ = True
📱 PWA化 - アプリっぽく使える
この家計簿、実はPWA(Progressive Web App)化してます。
つまり、スマホのホーム画面に追加すると、ネイティブアプリみたいに使えます!
// manifest.json
{
"name": "家計簿アプリ",
"short_name": "家計簿",
"display": "standalone",
"start_url": "/",
"icons": [...]
}
Service Workerでオフライン対応も(部分的に)。ただし、データベースアクセスはオンライン必須です。
🎯 今後の展開(妄想含む)
やりたいことリスト:
- 銀行API連携(自動取込!でも審査が...)
- LINE通知(メールより気づきやすい)
- 複数通貨対応(現在作業中...海外在住者向け)
- カスタムカテゴリーアイコン(絵文字だけじゃ物足りない)
- 予算超過アラート(リアルタイム通知)
- PWA対応(✅完了!)
- AI支出分析(✅完了!)
個人的にはOCR機能(レシート自動読み取り)も欲しいけど、無料プランじゃ厳しいかな...
💭 振り返り - 作ってみて思ったこと
良かった点
- Django便利すぎ:認証・管理画面・ORMが最初から揃ってる
- Tailwind最高:CSSほぼ書かずにモダンUIが作れる
- Gemini API面白い:プロンプト次第で色々できる
- PythonAnywhere楽:デプロイが簡単(Herokuより楽かも)
反省点
- ストレージ管理甘かった:最初から画像圧縮しとけば...
- テスト不足:手動テストしかしてない(ごめん!)
- ドキュメント整備:README書いたけど、もっと丁寧に書くべきだった
学んだこと
- 「作りたい」から始めると、技術は後からついてくる
- 完璧を目指すより、動くものを作って改善する方が楽しい
- 無料でもここまで作れる(お金がないは言い訳にならない笑)
🎁 使ってみたい方へ
デモサイトを公開しています:
👉 https://mydemoapplication.pythonanywhere.com
注意事項:
- ⚠️ ストレージ管理のため、定期的にデータを削除します
- ⚠️ サーバーが海外(データ保管場所が国外)
- ⚠️ 本番利用は推奨しません(あくまでデモ)
- ⚠️ 本気で使いたい方は、自分でホスティングするか、有料プランをご検討ください
GitHubリポジトリはこちら:
👉 https://github.com/Rikiza89/family-budget-app
ローカルで動かすのは簡単です:
git clone https://github.com/Rikiza89/family-budget-app.git
cd family-budget-app
python -m venv venv
source venv/bin/activate
pip install -r requirements.txt
python manage.py migrate
python manage.py createsuperuser
python manage.py runserver
Gemini APIキーは自分で取得してsettings.pyに設定してください(無料枠あり)。
🙏 最後に
この家計簿アプリは、「こんな機能があったらいいな」を形にしたプロジェクトです。
売るためじゃなく、アイデアを実現する楽しさを追求しました。
完璧じゃないし、バグもあるかもしれない(見つけたら教えてください笑)。でも、動くものを作り上げた達成感は最高です。
「こんな機能追加したら?」「ここ改善できるよ!」といったフィードバックは大歓迎です。GitHubのIssueやPull Requestお待ちしてます!
本番で使いたい方がいれば、サーバー運用のサポートもできるので、お気軽にご連絡ください。
それでは、Happy Budgeting! 💰✨
P.S. イタリア語対応は完全に趣味です(笑)でも、海外在住の日本人には便利かも?複数通貨対応も現在開発中なので、お楽しみに!🌍