はじめに
編集したいところを HTML のテンプレートで指定するだけで、クリックで編集・追加・削除・並べ替えができる画面が出る軽量 CMS 用フロントエンドライブラリ「ZeroCode.js」を作りました。
既存サイトに足しても、ゼロから CMS として組み立てても使えます。
Web Components ベースなので、特定のフレームワークに依存しません。
※ 現在はベータ版です。
この記事では、作ったきっかけと、「既存CMSが合わなかった人」に向けてどんな使い方を想定しているかを書きます。
特定のフレームワークに依存しない CMS を探している方にも向いています。
ZeroCode.js とは
Web Components ベースの CMS 用フロントエンドライブラリです。保存ボタンで save-request イベントが飛ぶだけなので、受け取った側でお好きな API を呼んで永続化できます（技術仕様書・ドキュメント）。
なぜ ZeroCode.js を作ったか
「このバナーと本文だけ、HTML テンプレート側で編集可能にしたい」
「新着ブロックだけ、ページに埋め込んだまま更新できるようにしたい」
—— そう思ったことはないでしょうか。
編集したいのは画面の一部だけなのに、ヘッドレスCMSやWPでは過剰になりがち。かといって手書きの管理画面を増やすと保守がつらい。フロントエンドや AI のトレンドを追い続けるのも、なかなか大変です。そのジレンマを解消したくて作りました。
編集する範囲をテンプレートで決められるようにしたので、既存のデザインやスタックを変えずに、必要なところだけ CMS 化できます。
すぐ試す（クイックスタート）
CDN なら次の HTML だけで動作します（Vue の script は CDN 利用時のみ必要）。
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="https://unpkg.com/zerocodejs/dist/zerocodejs.css" />
</head>
<body>
<zcode-editor></zcode-editor>
<script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
<script src="https://unpkg.com/zerocodejs/dist/zerocode.umd.js"></script>
</body>
</html>
デモ（すぐ触れる）: https://atsumi-code.github.io/zerocodejs/#demo
npm の場合は npm install zerocodejs のあと、import 'zerocodejs' でカスタム要素を登録して <zcode-editor> を使います。既存の React / Vue などそのまま組み込めます。
ZeroCode.js の特徴
編集したい範囲をテンプレートに書くだけで、その部分が編集可能になります。編集対象とする範囲は、ページ単位・機能単位などで設定するだけです。
例：{$見出し:初期テキスト} でテキスト、{$本文:初期値:rich} でリッチテキスト。画像フィールドや条件分岐（z-if）、ループ（z-for）などもあり、ドキュメントで一覧できます。どちらの使い方も同じ仕組みです。
- テンプレートは HTML に書くだけ。HTML/CSS/JS の知識だけで足り、フレームワークやビルドの深い知識は不要
- テンプレート記法は「どこを編集するか」をそのまま書く形で、学習コストは低い
- テンプレートが HTML なので、デザインの自由度が高い
- 保存先は自分で決めて実装できる
- 約 260KB（gzip 後、Vue を CDN で読む場合もこの程度）で軽量
2種類の編集画面
<zcode-editor> はパーツ管理・画像管理・データビューア付きの全機能版（エンジニア・デザイナー向け）。<zcode-cms> は編集・追加・削除・並べ替えだけの軽量版（コンテンツ編集者向け）。誰向けの画面を出すかで要素を切り替えられます。
zcode-editor（全機能版）
zcode-cms（軽量版）
いまの状況
ベータ版で、事例を増やすことを最優先で進めています。API やデータ形式は変わる可能性があります（破壊的変更の可能性あり）。紹介・言及は Discussions や Issue で歓迎しています。
こんな人に試してほしい
- 「編集してほしいところを、テンプレートで指定するだけにしたい」 と思ったことがある人
- 担当者やユーザーに直に編集してほしい箇所は AI には代替できない、と感じている人
- 「この部分だけ担当者に任せたいのに、専用の管理画面を作るほどでもない」と感じたことがある人
既存サイトの一部だけ CMS 化したい人も、ゼロから CMS を組み立てたい人も、同じ仕組みで使えます。
読者へ
そのニーズに刺さりそうなら、まずは デモ で触ってみてください。数行の HTML で試せるので、気軽に試せます。スター・Issue・PR・紹介、どれも歓迎です。