散らばったSupabaseプロジェクトの棚卸しボードをつくってみた

対象: 前の記事を読んで「結局、自分のプロジェクトの全体像はどうなっているの？」となった方／担当者が変わって引き継ぎをする方
所要時間: 15分前後（動かすだけ） / 使うもの: ブラウザ、ターミナル（ローカルサーバーとSupabase CLI）
確認日: 2026-10-27
前の記事（手順編）: https://qiita.com/tomozilla/items/ec4a1f58b91c6f68a3df
サンプルコード一式（GitHub）: https://github.com/tomozilla/project-inventory-ja-demo

前の記事で、棚卸しのコマンド（supabase projects list --output json）を使いました。でも、JSONをそのまま眺めても、どの組織に何個あって、いくらかかっていて、どれが止まっているのかは、頭に入ってきません。

そこで、CLIの出力を貼ると、組織ごとに整理して見せてくれる小さなWebアプリをつくりました。使うのは、プロジェクトが散らばってしまった人や、引き継ぎを受けた人です。「年に数回の棚卸しの日」に、これを開いて眺める想定です。

0. 先に伝えておきたいこと

• サーバーも、Supabaseのプロジェクトも、アクセストークンも使いません。 ブラウザだけで動く静的なページです。貼ったデータはブラウザの外に出ません。
• 費用：$0（ローカルで動かすだけ）。画面に出る月額は目安で、請求書で確かめた金額ではありません。
• リポジトリのサンプルデータは架空です。私の実際のプロジェクトの一覧では、読み込めること（件数・組織数）だけを確かめて、名前は載せていません。
• 判定のルールは私の整理で、公式の基準ではありません。

1. つくったもの

• inventory.js … 貼られたJSONの読み取りと計算（画面に依存しない。テストできる）
• index.html / app.js … 貼り付け欄と表示
• sample/projects.sample.json … 架空のサンプル
• test.js … 13項目のテスト

2. しくみ（ポイントだけ）

CLIの出力には、プランがありません。そこで、組織ごとに自分でプランを選ぶようにしました（選ばないと「見積りなし」と出ます）。

月額の目安は、前の記事の式のとおりです。

// 動いているプロジェクトだけ数える（停止中はComputeがかからない）
monthly = Math.max(0, active * 10 - 10);   // Micro $10 × 動いている数 − 含まれる$10
monthly += plan === "pro" ? 25 : 599;       // プラン代

「棚卸しの候補」は、停止中（INACTIVE）で、作ってから90日以上のものに、印を付けるだけです。

3. 動かしてみる

# リポジトリのルートで（「サンプルを読み込む」が ../sample/ を読むため）
python3 -m http.server 8000
# ブラウザで http://localhost:8000/app/ を開く
node app/test.js                 # 13項目

自分のデータで使うなら、こうです。

supabase projects list --output json | pbcopy    # macOS。結果をコピーして貼る

4. 使ってみる

サンプルを読み込んで、組織1を「free」、組織2を「pro」にしました。

• 組織1（free）：動いているプロジェクトが3つなのに、無料は2つまで、という警告が出ました。
• 組織2（pro）：「about $25 / month」。停止中のプロジェクトは数えていません（動いているのは1つで、含まれる$10で足りるため）。legacy-poc には「dormant candidate（棚卸し候補）」の印が付きました。
• 組織3：プランを選んでいないので「見積りなし」。勝手に無料とみなしません。

5. つまずき

5-1. 壊れたJSONを貼ったとき

最初に決めていたのは、「何も言わずに空の画面を出さない」ことです。壊れたJSONを貼ると、赤い枠で理由を出します。

必要な項目（ref・name・organization_id・status・created_at）が欠けている行は、**黙って捨てずに「N行を飛ばしました」**と出します。

5-2. 自分で見つけた小さな不具合

• 表示が「1 projects」になっていました。単数形に直しました。
• 組織ごとの表の列の幅がバラバラで、見づらかったので、固定にしました。

5-3. 限界（ここは直せません）

• CLIの出力にはプランも最終アクセス日もないので、「使われていない」とは断定できません。ボードの「棚卸し候補」は、確認のきっかけです。
• 組織の名前も出ません（IDだけ）。どれが自社のどの組織か、画面で突き合わせる必要があります。
• 試していないこと：数百件の一覧、スマホ幅の見た目、ファイルを直接開いたときのエラー表示、他人の組織を含む出力での挙動。

6. 実際の運用にするなら（未検証）

• 組織IDと名前・担当者の対応表を、別のJSONで持つ。
• 前回の棚卸し結果と比べて、増えた・止まったものだけを出す。
• 「消してよい」を自動で判断しない（必ず人が確認する）。

まとめ

• 貼るだけで、組織ごとの全体像が1画面で見られる。
• 足りない情報（プラン・最終アクセス）は、補うか、推測しない。
• 棚卸しは「消す日」ではなく、「確認する日」。

次は、費用の話：請求書の読み方と、スペンドキャップが守るもの・守らないものを整理します。