はじめに
チームみらいさんが公開していた収支表、みなさんご覧になったことありますか？あれ、めちゃくちゃ視覚的でわかりやすいんですよね。
そんな神フォーマットを、OSSとして再構成してくれたのが平野さんの「marumie」。家計簿用ですが、これ… 会社の収支管理にも応用できるのでは？ と思い、導入してみました。
本記事では、
- marumie の立ち上げ方法
- 初期データの登録方法（Supabase Studio編）
- 企業利用に耐えるようなカスタマイズポイント
などをまとめます。最終的に可視化されたグラフも見られますよ！
導入の背景と目的
✅ 背景
- チームでの経費・売上・支出をもっと視覚的に把握したい
- 既存のExcelでは限界があり、データが属人化しやすい
- メンバーが「何にどれだけ使ってるのか」を共有・納得しながら経営判断したい
✅ 導入目的
OSS「marumie」をベースに、社内向けの“みえる化収支表”を構築する。
対象は、自分の会社「澤田商店」内の事業部収支です。
Step 0. 必要な前提知識・ツール
- Docker：Supabaseをローカルで動かすため
- pnpm：Node.jsのパッケージマネージャ
- Node.js：実行環境（ver 18.x 系）
- Prisma：DBスキーマ管理
- Supabase：FirebaseライクなBaaS（DB & 認証）
- Git：OSSクローン & コード管理
Step 1. marumie のクローンとセットアップ
git clone https://github.com/RuiHirano/marumie.git
cd marumie
pnpm install
✅ もし pnpm コマンドがない場合は、まず Node.js と pnpm をインストール
npm install -g pnpm
✅ Node.js は 公式サイト からインストール。18.x系推奨
node -v # バージョン確認
環境変数を設定
cp .env.local.example .env.local
🌊 Step 2. Supabase でつまずく
次に pnpm db:reset → pnpm supabase:reset が走りますが、ここでトラブル発生。
ENOENT: no such file or directory, stat '...supabase\bin\supabase.EXE'
Supabase CLI が pnpm dlx 経由で動かず。
Windows環境で .EXE が見つからないというエラー。
🔄 Step 3. Supabase CLI を手動インストール…できない！
試しにグローバルでインストールしようとしたら：
npm install -g supabase
しかし…Supabase CLIは グローバルインストール非推奨！
Installing Supabase CLI as a global module is not supported.
Please use one of the supported package managers:
https://github.com/supabase/cli#install-the-cli
これにより、ルートは npx supabase に切り替えることに。
🐳 Step 4. Supabase CLI には Docker が必須と判明！
Supabase CLI はローカル環境を Docker で構築します。
つまり Docker をまだ入れてないと、ここで完全ストップ。
🧭 Step 5. Docker を初めて構築（Windows）
✅ 準備内容
- Windows 10/11（22H2以上）
- メモリ4GB以上
- WSL2（Linux Subsystem）有効化済み
- BIOS で仮想化 ON（VT-x）
✅ インストール手順
- Docker公式サイトから Docker Desktop for Windows をDL
-
.exe実行し、「Use WSL2 based engine」にチェック - インストール後に再起動
- PowerShellで確認：
docker --version
docker run hello-world
無事に Hello from Docker! が出ればOK！🐳
🏁 Step 6. Supabase 再挑戦 → 完走！
Dockerが入ったので、Supabase CLIを npx 経由で再実行：
npx supabase db reset
すると、必要なイメージが自動で pull → ローカルDBが構築されました！
続いて：
pnpm db:migrate
pnpm db:seed
そして最後に：
pnpm dev
ついに http://localhost:3000 に marumie が立ち上がる！ 🎉
Step 7. 最小限のデータを投入（初期レコード）
marumie は organization 情報が無いと動きません。
Supabase Studio で SQL を実行して入れます。
Studio にアクセス → http://localhost:54323 → SQL Editor へ。
insert into public.organizations (slug, name, display_name)
values ('sawada', 'sawada', '澤田商店')
on conflict (slug) do nothing;
または pnpm exec prisma studio でGUI管理ツールを開いて手動入力も可能です。
Step 8. 収入・支出データの登録
Supabase Studio の「Table Editor」から以下のテーブルを直接編集できます。
（※ localhost 環境では http://localhost:54323 にアクセス）
主に操作するテーブル一覧：
┌──────────────────────┬────────────────────┐
│ テーブル名 │ 用途 │
├──────────────────────┼────────────────────┤
│ organizations │ 組織（例：澤田商店） │
│ personaltransactions │ 各種収入・支出データ │
└──────────────────────┴────────────────────┘
🔽 例：personaltransactions に入力したデータ
┌────┬────────┬────────┬────────────┬────────────────────┬──────────┐
│ id │ amount │ category │ date │ description │ type │
├────┼────────┼────────┼────────────┼────────────────────┼──────────┤
│ 1 │ 1200000│ 売上 │ 2025-10-01 │ 月初の入金 │ INCOME │
│ 2 │ -45000 │ 通信費 │ 2025-10-03 │ WiFiや携帯代 │ EXPENSE │
└────┴────────┴────────┴────────────┴────────────────────┴──────────┘
※ amount は 収入なら正の値、支出なら負の値 で入力する必要があります。
入力した内容は即座に marumie の画面にグラフとして反映されます。
この即時性が、運用していてとても気持ちよく、データ入力のモチベーションにつながります 💡
最後に：企業利用でのポイント
- 複数人で使う場合は認証導入を検討（Supabase Authなど）
- カテゴリの整備：会計科目とリンクさせると管理がラクに
- 部署別 slug 運用：
slug = route_salesやslug = deliveryなどで分けてもOK
🌱 まとめ：森を抜けて、灯りがともるまで
最初は「チームで収支見える化したい」という動機からスタートした marumie 導入。
でも、
- PowerShellの制限解除
- Supabase CLIの仕様理解
- Docker構築（初体験！）
…と、まるで迷宮のような開発者体験も味わいました。
しかし、このプロセス自体が「組織の健全性をコードで支える」未来への第一歩。
チームみらい収支表をベースにしながら、もっと多くの中小企業やスタートアップが、自分たちの数字と向き合う文化を持てるように──
そんな願いを込めて、今後も開発・発信していきます 🌍
🙏 Special Thanks
-
OSS公開してくれた @RuiHirano さん
→ 「まる見え家計簿」を作った理由──OSSから生まれたシンプルで美しい家計簿 -
収支表の発想源をくれた「チームみらい」の皆さん