AdminForth
Devforth · 画像 · 学習
AdminForth は既存のデータベースをそのまま管理画面に変える Node.js 向けのオープンソースの管理画面フレームワーク。Vue 3 の画面、29 個のプラグイン、エージェント向けの MCP を備える。
AdminForth について
About
AdminForth とは
AdminForth は、すでに動いているデータベースをそのままバックオフィスに変えるフレームワークだ。設定ファイルでテーブルをリソースとして記述すると、一覧、詳細、新規作成、編集の各画面が生成される。アプリの隣に別製品を立てる必要はない。管理画面そのものが普通の Node.js アプリとして、自分のリポジトリの中に置かれるからだ。
この点は見た目以上に効く。管理画面がただのコードなので、列や権限ルールを足したときにレビュー担当が差分をそのまま読める。コーディングエージェントも同じように読めるため、生成されるプロジェクトには AGENTS.md、CLAUDE.md、llms.txt、skills フォルダが最初から入っている。開発元の Devforth はこれをエージェント前提の管理画面と呼ぶが、ファイル構成を見れば納得できる。
構成はサーバー側が Node.js と TypeScript、ブラウザ側が Vue 3 と Tailwind CSS。接続先は Postgres、MySQL、SQLite、MongoDB で、既存のスキーマにそのまま乗る。データを独自形式にコピーしない。制約もはっきりしている。開発者向けの道具であり、チームに JavaScript を書く人がいなければ管理画面は手に入らない。ノーコードのホスティングサービスなら手に入る。
はじめかた
- 空のフォルダで
npx adminforth create-appを実行し、データベース接続について聞かれた項目に答える。 - 生成されたリソース定義ファイルを開き、最初のテーブルを宣言する。列、型、一覧と編集フォームに出す項目を決める。
- 開発サーバーを起動し、作成した管理者アカウントでログインする。絞り込み、並び替え、フォームの挙動を確認する。
- ログイン、アップロード、監査ログ、エージェント接続などのプラグインを足す。npm パッケージを入れて設定に一行加えるだけだ。
- ほかの Node サービスと同じようにデプロイする。独自ドメインと TLS 証明書の背後に置く。
AIツール情報
AdminForthの料金、対応プラットフォーム、性能を簡単に確認できます。
こんな人におすすめ
このツールが最も力を発揮するユーザー、タスク、シーン。
ユーザー
- Node.js と TypeScript の開発者：既存データベースの CRUD 画面を、コントローラもルーティングも表組みも書かずに手に入れられる。npm と設定ファイルに馴染んでいることが条件だ。
- プラットフォーム担当のいない小さなプロダクトチーム：アプリと管理画面が同じリポジトリに収まるので、見張るデプロイが一つ減る。ホスティングとバックアップの担当者は別に要る。
- クライアント向けの社内ツールを作る制作会社：テーマ、ロゴ、独自の Vue ページで、汎用ダッシュボードではなくクライアントの製品らしい見た目で納品できる。
タスク
- 表計算の運用を置き換える：注文、チケット、在庫を実際のテーブルに移し、絞り込みと編集権限つきの一覧を運用チームに渡す。
- Postgres や MySQL のスキーマに CRUD を用意する：テーブルを宣言すれば、定型的なフォーム、入力検証、ページ送りを書かずに済む。
- エージェントに範囲を限った書き込み権限を与える：MCP プラグインがリソースをツールとして公開する。エージェントごとに失効できるシークレットを発行し、発行した利用者の権限で動く。
- 社内向けの集計画面を作る：ダッシュボードプラグインと独自ページで、グラフも件数表示も BI 契約なしで揃う。
シーン
- 今週中に MVP のバックオフィスを公開する：create-app とリソース定義ファイル一つで、その日のうちに使える管理画面になる。
- 顧客データを自社インフラに留める：セルフホストなので記録が手元のデータベースから出ない。規制業種の顧客を相手にする場合は大きい。
- 非技術者の担当者に管理画面を引き渡す：ロール、監査ログ、一覧上での直接編集で、日々の作業はほぼ開発者の手を借りずに回る。
主な機能
宣言的なリソース定義
リソースはただのオブジェクトだ。データソース、テーブル名、そして列の配列。各列には必須、一意、選択肢の定義、どの画面に出すかを書く。このオブジェクトがそのテーブルの管理画面のすべてを決める。普通のコードなので、リポジトリのほかの部分と同じようにレビューとバージョン管理を通る。エージェントも独自言語を覚えずに拡張できる。
既存スキーマをそのまま使う
AdminForth はすでに運用しているデータベースを指す。Postgres、MySQL、SQLite、MongoDB のいずれかだ。行を自前のストレージに取り込むのではなくスキーマを読むので、マイグレーション、バックアップ、アクセス方針はチームが今管理している場所に残る。代わりに、珍しい型の列や重いトリガー処理は自前のフィールドコンポーネントが要ることがある。
エージェント向け MCP サーバー
MCP サーバープラグインはリソースをツールに変える。Claude Code、Codex、Gemini CLI、その他の MCP クライアントから呼べる。エージェントごとに独立したシークレットを発行し、個別に失効できる。呼び出しはすべて発行した利用者として実行される。権限、入力検証、フックはそのまま効くので、代理する人の範囲を超えた操作はできない。
認証と権限管理
ログイン、ロール、権限はフレームワークに付いてくる。その上に OAuth2 と OpenID のシングルサインオンを足せる。Google、GitHub、Microsoft、Keycloak、独自プロバイダに対応する。TOTP とパスキーの二要素認証、端末ごとのセッション失効、キャプチャ、パスワード再設定も揃う。いずれも npm プラグインと設定一行で入る。
29 個のプラグインを npm パッケージで
カタログは、たいてい一週間を費やす作業を覆う。CSV と XLSX の入出力、S3 へのアップロード、リッチテキストと Markdown のエディタ、多対多のフィールド、再起動後も続くバックグラウンドジョブ、AI による一括入力、ダッシュボード、言語モデルによる画面の翻訳。どれも独立したパッケージなので、必要なものだけ入れる。
Vue 3 コンポーネントで独自ページ
設定で足りなくなったら、Vue 3 のコンポーネントを書いてページ、ダッシュボードのウィジェット、列の表示として組み込む。npm パッケージは何でも使え、Tailwind が標準画面との見た目の差を埋める。ここまで来ると、管理画面はテンプレートではなくプロダクト自身の社内ツールになる。
メリットとデメリット
メリット
- MIT ライセンスで無料、機能を囲い込む有料版がない。
- 管理画面はリポジトリ内の普通の Node.js アプリで、変更はレビューできる差分として残る。
- 既存データベースの上で動き、データを複製も作り替えもしない。
- 認証、二要素、シングルサインオン、監査ログ、アップロードは自作ではなくプラグインで済む。
- MCP サーバーでエージェントに実アクセスを渡せる。シークレットは個別管理、権限ルールは画面側と同じ。
デメリット
- JavaScript と TypeScript の知識が要る。非開発者向けのドラッグ操作ツールはない。
- 設定の範囲を超えた見た目の調整は、自分で Vue 3 のコードを書くことになる。
- セルフホストなので、デプロイ、バックアップ、更新は自チームの担当になる。呼べるベンダーはいない。
- 標準の権限より細かいレコード単位のルールは、自分で保守するフックが必要になる。
よくある質問
無料だ。MIT ライセンスでセルフホストのみ、有料版はない。費用は自分のサーバーと、AI 系プラグインを使う場合にプロバイダが請求するモデル呼び出し分だけになる。
関連コンテンツ
AdminForthに関連するツール、スキル、記事を探す。
AdminForthの代替ツール
Google EmbeddingGemma 2
Google DeepMind · ライティング · 画像 · コーディングGoogle EmbeddingGemma 2 は 7 億 4000 万パラメータのオープンなモデルで、テキスト、コード、画像、音声、動画フレームを同じ 768 次元空間のベクトルに変え、スマートフォンやノート PC 上で動く。
Tractionwave
TractionWave · 画像 · マーケティングTractionWaveは静止画広告のアテンションヒートマップを作るAIツールだ。PNGかJPGを入れると、予測された注目位置、優先順位付きホットスポット、修正案が返る。予算を投じる前の判断に使う。
Imejis.io
Imejis.io · 画像 · マーケティングImejis.io はエージェントとマーケティングチームのための AI デザインスタジオだ。ふだんの言葉で画像を説明すれば、コピーを書き、レイアウトを組み、全サイズへ自動で組み替え、完成ファイルを書き出す。