やっと公開!新しいヘッドレスCMSの開発 Vol.3
blog Business OSS Technology

やっと公開!新しいヘッドレスCMSの開発 Vol.3

Cloudflareネイティブの超高速ヘッドレスCMS「KuroCMS」がついに正式リリース。PC不要のWebインストーラーや、1クリックで導入できるコミュニティテンプレート共有機能、AIで作成できる強力な多言語管理システム、さらにダッシュボードからの簡単アップデート機能など、個人ブログから小規模ビジネスまでを Cloudflareの無料枠で実現する最先端エッジテクノロジーの魅力を徹底解説します


ついに正式公開された KuroCMS!、Cloudflareエッジでの超高速配信と、スマホからの簡単導入を実現した、完全無料の次世代多言語対応ヘッドレスCMSです。

世の中には数多くのCMSが存在しますが、個人開発者や小規模ビジネスオーナーが「自分のドメイン」「自分のデザイン」「超高速な表示速度」を求めようとすると、途端に難易度と月額運用コストが跳ね上がります。しかし、本連載のVol.1およびVol.2で解説してきたKuroCMSの目標が、ついに公開となりました!バージョン1.7.0としての正式リリースに伴い、追加された多彩な機能と、その圧倒的な魅力について開発日記の第3弾として詳しく解説します。ちなみに、この黒兎のサイトも、Strapi から KuroCMS に完全置き換えを行い、実際に利用されています。

当然、まだまだ改良やバグ取りが残っておりますが、一応、2〜3日のテストで使えそうだと判断できたので、本日公開と相成りました。

Cloudflareネイティブが生み出す「完全無料」と「極限の表示速度」の融合

KuroCMSの最大のアーキテクチャ上の特徴は、バックエンドおよびホスティングインフラをすべてCloudflare社のエッジコンピューティング環境(Workers、D1、KV、R2、Workers Assets)にネイティブ結合している点です。

従来のヘッドレスCMSやCMSのWordpressなどでは、月額数百円から数千円のレンタルサーバー費用やデータベース管理の手間が不可欠でした。しかしKuroCMSは、Cloudflareが提供する強力な無料枠(Free Tier)を最大限に活用するように設計されています。一般的なブログ運営レベルであれば、月額コスト「完全0円」で運用し続けることが可能です。

【Cloudflare無料枠の目安】
・Workers (サーバー実行):1日10万リクエスト
・D1 (SQLiteデータベース):ストレージ 5GB
・KV (ページキャッシュ):1日10万読み込み / 1万書き込み
・R2 (メディア保存):ストレージ 10GB / 月100万オペレーション
これらは個人や中小規模のサイトであれば、上限に達することはまずありません。

また、表示速度においても妥協はありません。KuroCMSは3層の超高速配信キャッシュ機構を採用しています。リクエスト時に最寄りのエッジ(エッジキャッシュ)が応答し、キャッシュミス時はKVストレージから瞬時に返します。これにより、世界中どこからアクセスしても、100ミリ秒未満でのページロード(TTFB)を実現。見る人のストレスを徹底的にゼロにするパフォーマンスを誇ります。

出来上がったサイトは依存ライブラリーなし Vanilla JS + tailwind CSS による超高速で表示されますが、KuroCMS本体ですらフレームワークを一切使っていません。そのためフレームワークのバージョン管理や、対応修正などの手間は一切存在せず、フレームワーク利用のオーバーヘッドが存在しないことから、KuroCMSも高速に動作します。

PC不要!スマホからも立ち上げられる「Webインストーラー」

ヘッドレスCMSは、通常その難解なビルド環境の整備に運用・デプロイ工程からパソコンやコマンドライン(CLI)操作が必須とされてきました。しかし、KuroCMSは「パソコン不要で誰でも簡単に導入できること」を目標に掲げ、専用のWebインストーラーを開発しました。

ユーザーはブラウザから専用ページにアクセスし、Cloudflareのアカウント連携を行うだけで、自動的に Workers や D1、KV などのリソースがプロビジョニングされ、KuroCMSの管理画面が立ち上がります。最初のユーザーが管理者(admin)として登録されると、初期設定画面(/initialize/)は自動的にロックされ、高いセキュリティを確保します。スマートフォンの画面からでもすべてのデプロイと初期設定が完結する画期的な仕組みです。

多国語を標準サポートする「真の多言語(i18n)データモデル」

KuroCMSは、開発当初からグローバル配信を視野に入れた多言語設計が行われています。黒兎のこのサイトでも、日本語・英語をはじめ、ドイツ語、フランス語、イタリア語、スペイン語、中国語、韓国語、ウクライナ語の計9言語を表示できるようになっています。※AIクラウドはご自身の契約 AI を利用してください。黒兎的には過去の記事で紹介した通り、丁寧になら Gemini 、フレンドリーなら ChatGPT、固い感じなら Claude がお勧め。

言語コード 表示言語 URL構造 特徴
ja 日本語 (サイト既定) /path/to/page 基本言語として設定し、黒兎は日本語だけの記事を書きます。
en 英語 /path/to/page?lang=en Gemini などの翻訳コストの安い AIクラウドに REST API 経由で英語に変換
zh / ko / de / fr / it / es / uk 中・韓・独・仏・伊・西・ウクライナ /path/to/page?lang={code} その後、英語版から多の言語に次々に翻訳してもらうように同じ AIクラウド に指示。

データモデルは、1つの記事ID(did)および共通のスラッグ(slug)に対して、言語ごとの翻訳テキスト(title, summary, body_html)がぶら下がる「1対多」の関係で美しく管理されています。新しい言語に翻訳する際は、管理画面のドロップダウンで言語を選ぶだけで、既存の基本言語のコンテンツをワンクリックで複製して翻訳作業に入ることができます。

デザインの壁を取り払う「Template 機能」とコミュニティ共有

ヘッドレスCMSの大きな魅力である「デザインの自由度」についても、KuroCMSは独自の仕様となっています。HTML+KuroCMS特殊コードをそのままテンプレートとして扱う「Template API」を搭載しています。

このテンプレートエンジンは、HTML内に [[site.name]][[#each articles]]...[[/each]] といった特殊表現を記述するだけで、エッジ側で動的に、あるいは静的ビルド時に変数やリストを展開します。余計なJavaScriptフレームワークの知識は一切不要で、純粋なHTML/CSS/JSだけでデザインを完全に自作できます。

さらに、作成したテンプレートは「コミュニティ・テンプレートライブラリ」を通じて世界中のユーザーとワンクリックで共有・ダウンロードが可能です。管理画面の「テンプレート選択」から公開ライブラリに直結し、インストール前にプレビュー画面を確認して、気に入ったデザインがあれば即座に自分のサイトへ適用できます。

【自動サムネイル生成機能】
自分でデザインしたテンプレートをコミュニティに公開する際、管理画面側で一時的にiframe展開したHTMLを html2canvas 技術を用いてブラウザ上で自動的にJPEGキャプチャし、ライブラリのサムネイルとして自動登録する仕組みが実装されています。ユーザーが画像を自作する手間はありません。

フォントの統一感を生む「Webフォント適用機能」

せっかく美しいデザインのテンプレートを導入しても、閲覧するスマートフォンやPCのOSによってフォントがバラバラになってはサイトの印象が台無しになります。そこで、KuroCMSはWebフォント導入管理機能を搭載しました。

管理画面内に、日本語・欧文・等幅フォントから厳選された40種のGoogle Fontsカタログを内蔵。2ペインのシャトルUIを用いて、サイトに読み込むフォントの追加・優先順位変更・「基本フォント」の設定がドラッグ&ドロップ感覚で行えます。基本フォントを指定すると、公開ビルド時に <head> へCDNリンクが自動注入され、テンプレート側のCSS指定を上書きしてサイト全体の文字体を美しく統一します。

さらに、当然WYSIWYGで動作する管理画面のエディタ(KuroEditor)もこの設定に完全連動します。編集画面でありながら、公開サイトと全く同じフォントで執筆できるため、「書いている時の見た目と公開後の見た目が違う」というストレスが一切発生しません。

進捗が視覚的にわかる「ビルドストリーム」とセルフアップデート

大量の記事を更新した際に行う「サイト全体ビルド」では、進捗が見えずに不安になることが多々あります。KuroCMSは、ビルド実行API(POST /api/build)からNDJSON(Newline Delimited JSON)形式の進捗ストリームを返却し、管理画面上のプログレスバーやログビューワーにリアルタイムで反映する機能を備えています。

ビルド時には、変更のないページをスキップするキャッシュ機能(page_build_cache)も働き、無駄なKV書き込みを最小限に抑えることでエッジの利用効率を最大化しています。

またダッシュボードには、無料枠内での更新可否を確認できるように、KV書き込みをカウントしており、ユーザが1日のKV更新(ビルド作業)の目安がつけられるような工夫もされています。

【自動更新もワンクリックで】
OSSのヘッドレスCMSを自分でホスティングする際の最大の課題が「アップデート作業の面倒さ」でした。KuroCMSはセルフアップデート機能を搭載。GitHubの公式リリースリポジトリと通信し、最新バージョンが公開されている場合は管理画面に通知され、「アップデート」ボタンをクリックするだけで、Worker内のスクリプトが自動で最新の KuroCMS へ書き換えられます。コマンドやGit操作は不要です。

主要CMSとの徹底比較

最後に、KuroCMSと既存の主要なCMS(WordPress、一般的なヘッドレスCMS+Strapi)の比較をまとめます。

比較項目 KuroCMS  WordPress Strapi 5(セルフホスト)
月額運用コスト 永続無料 (無料枠内) レンタルサーバー代 (500円〜) VPS/Paas代 (1000円〜)
表示・応答速度 超高速 (エッジキャッシュ配信) サーバー依存 (重くなりやすい) 構成依存 (API経由のため遅延あり)
導入の難易度 Webインストーラーで簡単 簡単(レンタルサーバー自動導入) 難(サーバー構築・コマンド操作)
多言語対応 標準9ヶ国語 (1記事多翻訳) 要プラグイン (設定が極めて複雑) 標準対応 (設定やUIが初心者には難)
アップデート 管理画面からワンクリック 管理画面からワンクリック コマンド実行と手動デプロイが必須
ライセンス Kuro License (帰属表示必須) GPL MIT

まとめ:個人・小規模サイトの新しいスタンダードへ

KuroCMSは、「ヘッドレスCMSの圧倒的な表示速度と自由なデザイン」というメリットを、「日本のブログサービスのような手軽さと完全無料」という形でCloudeflare上で提供する、これまでにない革新的なプロダクトです。セルフアップデート機能や多言語モデルの完成度、Webフォントの強制適用機能など、細部までこだわり抜いて開発されたKuroCMSは、今後の個人ブログ・小規模Webサイト運営の新たなスタンダードとなるでしょう。

興味を持たれた方は、ぜひ公式インストーラーサイトにアクセスし、その超高速かつ快適なブログライフを体験してみてください!


【出典】
  1. KuroCMS 公式プロモーションページ
  2. Cloudflare Workers Documentation
  3. KuroCMS GitHub リポジトリ