ZeroCode.js
シンプルに編集画面を。フレームワーク非依存のCMSフロントエンドライブラリ
主な特徴
CSS/JSの完全分離
WebコンポーネントのShadow DOMによりCSS/JSを完全に分離。既存の管理画面に影響を与えず、管理画面側のCSS/JSにも影響されません。内部でVue 3を使用しており利用時は別途読み込みが必要ですが、Vue/React/Laravelなどどの環境でも安全に組み込めます。
学習コストが低い
Web Components標準で実装されているため、HTML/CSS/JSの基礎知識があれば理解できます。Vue 3を内部で使用していますが、フレームワーク非依存のAPIを提供するため、Vueの詳細な知識は不要です。独自のテンプレート記法で柔軟なコンテンツ管理ができます。
直感的な操作
クリック操作で誰でも使えるCMS。ドラッグ&ドロップ不要で、編集・追加・削除・並べ替えが簡単です。選択中の要素には視覚的なフィードバックが表示され、操作が分かりやすくなっています。
アーキテクチャ
ZeroCode.jsはフロントエンドのみを責務とします
なぜZeroCode.jsを選ぶべきか
既存システムへの組み込みにも、新規開発にも。フレームワークに縛られません。
既存システムに統合したい
Web ComponentsのShadow DOMにより、既存システムのCSS/JSに影響を与えず、既存システム側のCSS/JSにも影響されません。既存のLaravel管理画面やReact/Vueアプリに、Web Componentsとして組み込むだけでCMS機能が使えます。既存の認証システムやデータベースをそのまま活用できます。
フレームワークを選びたくない
Web Components標準で実装されているため、Vue/React/Laravelなどどの環境でも使用可能です。フレームワーク非依存のAPIを提供するため、既存の技術スタックをそのまま活用でき、新しいフレームワークを学習する必要がありません。HTML/CSS/JSの基礎知識があれば理解できます。
フロントエンド専用が欲しい
フロントエンド専用のため、バックエンドは本番用の保存が必要になったときに用意すればOKです。まずはサーバーなしで開発を始められ、準備ができたら保存用APIと連携できます。フルスタックCMSより軽く導入しやすいです。
デモを試す
依存や副作用の少ないWebコンポーネントの3段階の責務分け
エンジニア用管理画面 (Dev)
開発者・デザイナー向けの管理画面。全機能が利用できます。
- パーツ管理
- 画像管理
- データビューア
<zcode-editor></zcode-editor>
💡 全機能を試せます（パーツ管理・画像管理含む）
ユーザー用管理画面 (CMS)
コンテンツ編集者向けの管理画面。編集機能が利用できます。
- 編集・追加・削除・並べ替え
- パーツ管理なし
- 画像管理なし
<zcode-cms></zcode-cms>
💡 クリックで編集・追加・削除ができます
公開用 (Pub)
サーバーサイドレンダリング専用。HTML文字列を生成します。
- HTML文字列生成のみ
- 編集機能なし
- 軽量で副作用なし
renderToHtml(data)
クイックスタート
はじめよう
<!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>
npm install zerocodejs
<!-- index.html -->
<link rel="stylesheet"
href="node_modules/zerocodejs/dist/zerocodejs.css">
<zcode-editor></zcode-editor>
<script type="module">
import 'zerocodejs';
</script>
import 'zerocodejs';
import 'zerocodejs/style.css';
function App() {
return <zcode-editor />;
}
<template>
<zcode-editor />
</template>
<script setup>
import 'zerocodejs';
import 'zerocodejs/style.css';
</script>