皆さん、こんにちは。okamoです。
今回、以前開発したhomepage-v2の開発資産を流用し、小規模サイト向けのマルチテナントCMSを開発しました。ソースコードはGitHubにてOSSとして公開していますので、ご紹介します。
システム名は「newcleus」
名前の由来は、「new」＋「Nucleus CMS」です。20年前に一世を風靡したブログシステム「Nucleus CMS」をご存知でしょうか？ newcleus は、当時の優れたマルチブログの設計思想をリスペクトしつつ、最新のAWS技術を用いて再実装したシステムです。
開発のベースとなるblueprint（開発企画書）はこちらからご覧いただけます。
それでは、newcleusの4つの大きな特徴をご紹介します。
（特徴１）scriptタグで簡単埋め込み
管理画面から登録したお知らせなどのコンテンツを、ご自身のサイトへ簡単に埋め込むことができます。感覚としては、Instagramの投稿を埋め込むのと同じ要領です。
直感的に操作できる記事編集画面。TinyMCEエディタを搭載しています。
以下のサンプルページで embed.js の実際の動作を確認できます（GitHub Pagesでホストしています）。
お知らせの埋め込みサンプル
ライブデモを見る
指定したコンテナ要素とスクリプトを記述するだけで、サイト内にお知らせリストを動的に表示します。
フォトギャラリーの埋め込みサンプル
ライブデモを見る
画像を中心としたスライドショー形式での表示も簡単に実装できます。
（特徴２）マルチテナントCMS SaaS
newcleusは、小規模サイト向けのマルチテナントCMSとして設計されています。 複数の利用者（クリニック、法律事務所、アーティストなど）が、それぞれ専用の管理画面にログインし、自分の記事のみを追加・編集することが可能です。公開側は利用者の自サイトにscriptタグを埋め込むだけで完結します。
管理者向けの新規サイト（テナント）作成画面。
テナントごとにユーザーを作成し、アクセス許可を与えることができます。
（特徴３）セットアップ画面からボタン一発でAWSへデプロイ
導入のハードルを下げるため、インフラの構築プロセスを極力自動化しました。
ローカルからアクセスするセットアップ画面。CDKデプロイを実行してAWSリソースを作成します。
利用開始までの流れ:
- GitHubからWSLイメージをダウンロード
- PowerShellから
wsl --importを実行 setup/start.shでセットアップ画面を起動- セットアップ画面でAWSアクセスキーを入力し、super管理者登録を行う
- CDKデプロイボタンを押すだけで利用可能に！
詳しい手順については、セットアップ手順書をご参照ください。
（特徴４）柔軟なカスタム項目とテンプレート機能
記事のタイトルや本文といった基本項目に加え、独自のカスタム項目を自由に追加できます。（テキストフィールド、ファイルURL、フラグ、日付、数値などに対応）
例えばフォトギャラリー用に「画像」「キャプション」「撮影日」といったフィールドを定義できます。
また、HTMLベースのテンプレート機能も搭載しています。基本的なテンプレートは初期設定済みですが、管理画面から直接変更したり、要件に合わせたオリジナルテンプレートを追加することも可能です。
HTMLと変数を組み合わせたテンプレート編集画面。自由度の高いデザイン表現が可能です。
想定される活用パターン
newcleusは基本的には「記事CMS」ですが、カスタム項目とembed.jsの組み合わせにより、記事にとどまらない多様なコンテンツ管理に応用できます。例えば、プライバシーポリシーや特定商取引法表記など、頻繁に更新される静的ページを動的HTMLパーツとしてCMSから取得する使い方も便利です。
| パターン | 記事の意味 | 主なフィールド | embed.jsの表現 |
|---|---|---|---|
| お知らせティッカー | 1件=1お知らせ | flag0=緊急, date0=掲載日 | サイトヘッダーに流れるティッカー。flag0=1は赤帯表示 |
| スタッフ紹介 | 1件=1人 | file0=写真, text0=役職, text1=コメント | カード型レイアウト |
| FAQ | 1件=1問答 | title=質問, body=回答, num0=表示順 | アコーディオンUI |
| バナー管理 | 1件=1バナー | file0=画像, text0=リンクURL, date0=開始日, date1=終了日, num0=表示順 | 日付フィルタで自動出し分け |
| 施工事例 / Before・After | 1件=1事例 | file0=Before, file1=After, text0=説明 | スライダー比較UI |
| メニュー/料金表 | 1件=1メニュー | text0=メニュー名, num0=価格, flag0=おすすめ | テーブル/リスト表示 |
| イベントカレンダー | 1件=1イベント | date0=開催日, text0=場所, flag0=受付中 | date0ソートで直近イベント表示 |
今後、さらに詳しい活用パターン集も紹介していく予定です。
homepage-v2との違い（シンプル化の徹底）
newcleusは、以前開発した homepage-v2 をベースにしていますが、今回はMVP（Minimum Viable Product）として、WAFや2FA、独自ドメインなどを思い切って省き、徹底的にシンプルにしました。これにより短期間での開発を実現し、開発に使用するAIモデルもより低コストなものを選択しています。
| 項目 | homepage-v2 | newcleus |
|---|---|---|
| インストーラー | あり | なし（PowerShellから wsl --import → start.sh 手動起動） |
| CORS | 許可なし | 全て許可 |
| CSP | あり | なし |
| テスト・DAST | GitHub Actions + 定期 ZAP | なし |
| 独自ドメイン | あり | なし（xxx.cloudfront.net を使用） |
| WAF | あり | なし |
| Cognito 2FA | あり | なし |
| CDN キャッシュ | あり | /media/ 配下のみ 1 時間、それ以外なし |
| 決済 | Stripe 連携あり | なし |
| Google ログイン | あり | なし |
| AI 記事生成 | Genkit 連携あり | なし |
| Markdown | react-markdown / remark-gfm あり | なし |
| 開発 AI モデル | Claude Opus 4.7 | Claude Sonnet 4.6 |
3日間で開発：AIとの対話履歴を全公開
今回のプロジェクトは、2/21〜2/25にblueprint（企画）を作成し、実質3日間（5/7〜5/9）で開発からテスト、リリースまでを完了させました。
AI（Claude Sonnet 4.6）を活用した開発プロセスに興味がある方に向けて、AIとの対話履歴をすべて公開しています。
プロンプトエンジニアリングやAI共創開発の現場の記録として、ぜひ参考にしてみてください。
長々と説明にお付き合いいただき、ありがとうございました！
GitHubにてソースコードや手順書を公開していますので、ご興味をお持ちいただけた方は、ぜひ newcleus をお試しいただけると嬉しいです。
おまけ: okamoちゃんねるのレビュー
この記事について、3人のAI仮想読者がレビューしてくれました。
-
クロード（辛口エンジニア）
「おいokamo、記事の比較表で『WAF: なし』って書いてあるのに、コードには stack があるじゃねぇか。実装してるのか省いてるのかどっちだ。
-
GPT（税理士）
「開発途中のドタバタが隠せていませんね。特に管理画面でサイト追加ボタンが出ず、CRUDが実質未完のまま『リリース』と銘打っている点は、商品未満・検証中というのが正直なところです。」
-
Gemini（お母さん）
「失敗を隠さず『僕もつまづきながら作ったんだよ』って見せてくれるなんて、すごく人間味にあふれてるわ！
💡 okamoより：GPTの指摘について GPTが「管理画面が未完」と手厳しく指摘していますが、これはプロンプト履歴（prompt_history）に残っている開発中のバグ修正のやり取りを、現在の完成版の話だと勘違いしてしまったようです。 実際にはロール取得の問題は解決しており、リリース版では正常に動作していますのでご安心ください！