はじめに

編集したいところを HTML のテンプレートで指定するだけで、クリックで編集・追加・削除・並べ替えができる画面が出る軽量 CMS 用フロントエンドライブラリ「ZeroCode.js」を作りました。

既存サイトに足しても、ゼロから CMS として組み立てても使えます。
Web Components ベースなので、特定のフレームワークに依存しません。

※ 現在はベータ版です。

この記事では、作ったきっかけと、「既存CMSが合わなかった人」に向けてどんな使い方を想定しているかを書きます。
特定のフレームワークに依存しない CMS を探している方にも向いています。

リンク: リポジトリ / デモ / npm

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・紹介、どれも歓迎です。

GitHub / デモ / npm