FeatherCMS紹介

🪶 FeatherCMS — 羽のように軽い Headless CMS(ヘッドレス CMS)

github

feather-cms は、超軽量でモダンな Headless CMS を目指したオープンソースプロジェクトです。 バックエンドには Bun + Hono + Drizzle といった最新スタックを採用し、Cloudflare Workers / D1 / R2 などのエッジ環境に最適化されています。


📌 FeatherCMS ってどんな CMS?

FeatherCMS は、軽量で高速、クラウドネイティブに対応した Headless CMS です。 単なる API サーバーにとどまらず、管理画面 + 静的サイト生成(SSG) までを包括した構成で提供されています。

💡 特徴的なポイント:

  • 超軽量構成(Bun + Hono + Drizzle)
  • 🌐 Edge Native:Cloudflare Workers / D1 / R2 に対応
  • 🔐 複数認証方式(Google OAuth / Cloudflare Access / Password / 開発モード)
  • 📝 Markdown / WYSIWYG エディタ 対応
  • 🖼️ メディアライブラリ(ドラッグ&ドロップ、フォルダ管理、タグ管理)
  • 🎨 テーマ切替(8 種類のカラーテーマ)
  • 📄 SSG 機能(Liquid テンプレートによる静的サイト生成)
  • 🔌 プラグイン拡張(フックベース)
  • 🌍 i18n(多言語対応)(日本語 / 英語)

🧱 プロジェクトの構成

FeatherCMS の主要な構造:

feathercms/
├── src/                # サーバーエントリポイント
├── packages/
│   ├── api/            # CMS API(Hono)
│   ├── admin/          # 管理画面(React SPA)
│   └── ssg/            # SSG(静的サイト生成)
├── shared/             # 共通モジュール
├── templates/          # Liquid SSG テンプレート
└── public/             # 静的ファイル

🚀 クイックスタート(ローカルで立ち上げる)

1. リポジトリをクローン

git clone https://github.com/ugnoguchigxp/feather-cms.git
cd feather-cms
bun install

2. 環境変数を設定

cp .env.example .env

開発時だけ認証をスキップする場合:

AUTH_PROVIDER=dev
SESSION_SECRET=dev-secret

3. 起動

bun run dev
  • 管理画面:http://localhost:3000/admin
  • API:http://localhost:3000/api
  • 公開ブログ:http://localhost:3000

🔐 認証方式の選択肢

FeatherCMS は複数の認証方式を柔軟に選べます:

認証方式 用途
dev ローカル開発用(本番禁止)
Google OAuth Google アカウントでのログイン
Cloudflare Access Zero Trust チーム認証
Password パスワードベースの管理者認証

🧠 API とコンテンツ管理

FeatherCMS は Headless CMS として REST API を提供し、以下のようなエンドポイントを備えています:

📄 ポスト関連

メソッド Path 説明
GET /api/posts 全記事取得
GET /api/posts/published 公開記事のみ
GET /api/posts/:id ID で取得
GET /api/posts/slug/:slug スラッグで取得
POST /api/posts 記事作成
PUT /api/posts/:id 記事更新
DELETE /api/posts/:id 記事削除

📦 アセット

  • ファイル一覧、アップロード、削除、メタデータ更新に対応

その他にも、設定(Settings)コメント(Comments) といったリソースも管理できます。


🔌 プラグイン & フック

FeatherCMS は 拡張性を重視しており、createCMS() でフックを登録することで、次のようなタイミングで処理を差し込めます:

  • beforeSave(保存前)
  • afterSave(保存後)
  • afterPublish(公開後)
  • onDelete(削除時)

例えば SSG 生成を自動化したり、通知トリガーを組み込んだりできます。


🛠 開発ツールとコマンド

FeatherCMS には開発や運用を支える様々なコマンドが用意されています:

コマンド 用途
bun run dev 開発サーバー起動
bun run build:client 管理画面ビルド
bun run build:blog SSG 生成
bun run build 本番ビルド
bun run test テスト実行
bun run test:coverage カバレッジ付きテスト
bun run db:migrate DB マイグレーション
bun run seed シードデータ投入

☁️ Cloudflare へのデプロイ

FeatherCMS は Cloudflare Workers + Pages アーキテクチャに最適化されています:

Workers (API)      Pages (Static SSG)
 /api/*            /*.html
 D1 + R2 storage   公開サイト生成

API バンドルは minify 後 約 500KB 程度で、Workers の制限内で軽快に動作します。


🎨 管理画面のテーマ切替

管理画面は 8 種類のカラー テーマからワンクリックでデザイン変更が可能:

  • デフォルト(インディゴ)
  • オーシャン(ブルー)
  • フォレスト(グリーン)
  • サンセット(オレンジ)
  • ラベンダー(パープル)
  • ローズ(ピンク)
  • ミッドナイト(ダーク)
  • チェリーブロッサム(桜)

🧾 まとめ

feather-cms は、Bun + Hono + Drizzle を中核としたモダンで軽量な Headless CMS です。 API、管理画面、SSG、認証、メディア管理、プラグイン拡張までを統合し、クラウド環境やエッジ向けのコンテンツプラットフォームとして活用できます。


必要であれば ブログ向け SEO タイトル+目次構成案 もご提案しますよ!

regular-calendar の紹介

📅 regular-calendar — React で簡単&高性能なスケジュール管理コンポーネント

npm github

regular-calendar は、施設やリソースの予定管理 UI を簡単に実装できる React コンポーネント ライブラリです。 日・週・月ビューに対応し、ドラッグ&ドロップや高パフォーマンス描画など、モダンなスケジューラ機能を備えています。


🔍 このパッケージでできること

🧠 汎用性の高いスケジュール UI

regular-calendar は、特定の業務ロジックに依存しない ドメイン非依存(domain-agnostic) な設計になっています。 これはつまり、「会議室」「ベッド」「設備」「人のシフト」…といった あらゆるリソースのスケジュール表示・編集 UI に活用できるということです。

📆 複数ビュー対応:日・週・月

カレンダー UI は Day / Week / Month ビュー をサポートしており、用途に応じて表示を切り替え可能です。 イベントの表示を一覧で見るにも、詳細に見るにも対応しています。

🤝 インタラクティブなスケジューリング

  • ドラッグ&ドロップ操作対応

→ 予定の移動やサイズ変更が直感的に可能。

  • クリックでスロットを追加

→ カレンダー上の空き領域をクリックして新規予定を作成できます。

これらの操作は、React の UI 状態とシームレスに統合されており、ユーザー体験もなめらかです。

🚀 高パフォーマンス & カスタマイズ性

  • 大規模リソースでも表示が軽い — Virtualized rendering を活用して高速にレンダリングします。
  • カスタム UI も挿入可能 — イベントのモーダルやリソース行などを 自由に差し替えられるため、見た目や操作性を自分のアプリに合わせて調整できます。

🧩 技術スタック & インストール

📦 必要なライブラリ

regular-calendar は React ベースのコンポーネントです。 インストール前に、以下の peer dependencies を満たしておく必要があります(React / date-fns / i18n など)。

pnpm install react react-dom date-fns i18next react-i18next
pnpm install regular-calendar

(npm または yarn を利用する場合も同様です)


🛠 使い方の概要(コード例)

シンプルなカレンダービューを表示する基本例:

import { RegularCalendar } from 'regular-calendar'
import 'regular-calendar/dist/styles.css' // スタイル読み込み(実装に合わせて調整)

function MyScheduler() {
  return (
    <RegularCalendar
      resources={myResources}
      events={myEvents}
      view="month"
      onEventChange={handleEventChange}
    />
  )
}

このように、イベントデータとリソースデータを渡すだけで 本格的なスケジュール UI を構築できます。 イベント変更時のハンドラなどを追加することで CRUD 操作とも連携可能です。


🎯 こんな用途に最適!

  • 会議室や教室の予約システム
  • 施設・設備の稼働スケジュール管理
  • スタッフのシフト表 UI
  • リソースごとのイベント管理ビュー

といった、予定やイベントを俯瞰して管理したいアプリケーションにぴったりです。


💡 他カレンダーライブラリとの違い

React のカレンダー系ライブラリは多数存在します(例:react-calendar, fullcalendar, react-big-calendar など)。([npmjs.com][2]) それらは多くが「日付ピッカー」や「イベント表示」用途ですが、regular-calendar は:

✅ リソースベースのスケジュール管理に最適 ✅ インタラクティブ操作(ドラッグ&ドロップ etc.)が標準装備 ✅ 大量リソース/イベントにも耐えうるパフォーマンス

という点で 業務用途システムにも耐える実装基盤となっています。


✍️ まとめ

regular-calendar は、柔軟かつ高性能な React スケジューラー / カレンダー UI コンポーネント です。 直感的な操作、ビュー切り替え、カスタマイズ性の高さにより、個人のプロジェクトから業務系ダッシュボードまで幅広い用途で活躍します。

「予定管理 UI を自前でゼロから作りたくない」「ドラッグ&ドロップ対応の高機能カレンダーを React で実装したい」方には特におすすめです。


markdownWysiwyg紹介

📝 markdown-wysiwyg-editor — Markdown と視覚的編集を融合したエディタ

npm github

markdown-wysiwyg-editor は、Markdown と WYSIWYG 表現をシームレスに行き来できる JavaScript エディタ で、視覚的な編集と生の Markdown コード編集の両方をサポートするコンポーネントです。


🔍 何ができる?

このパッケージの最大の特徴は、「見た目で編集するモード(WYSIWYG)」と「生の Markdown 編集モード」 を切り替えられる点です。 ユーザーは視覚的なインターフェースで文章を書きながら、Markdown 形式でもテキストを扱うことができるため、両方の利点を活かせます

基本的な特徴は以下の通りです:

Dual-Mode(2つの編集モード)

  • Visual(WYSIWYG)モード

→ ドキュメントの見た目に近い形で編集が可能

  • Markdown モード

→ 生の Markdown 文法での入力/編集が可能

これにより、ビジュアル優先のユーザーと Markdown 愛好者の両方に対応できます。

ツールバーとスマートな変換

  • エディタ上には太字・見出しなどの Markdown に対応したツールバーが表示されます。
  • HTML 要素と Markdown の相互変換処理を含むため、WYSIWYG モードから Markdown への変換もスマートに行います

軽量&導入が簡単

  • npm / CDN を使って簡単に導入可能
  • シンプルな UI とスタイルを備え、最小限の設定で使い始められる設計です。

🧠 なぜ “Markdown × WYSIWYG” が強いのか?

Markdown はシンプルで書きやすい一方で、書式の結果が視覚的に把握しにくいという課題があります。 一方で WYSIWYG 編集は「見たまま」に強いですが、生成される内部構造とのズレが出ることがあります。([Japan IT Guide][3])

markdown-wysiwyg-editor はこの 中間を埋めるアプローチ を提供します:

✅ WYSIWYG モードで視覚優先に編集 ✅ 必要に応じて Markdown モードで生の文法編集 → コンテンツ制作のフローを柔軟に変えられるというメリットがあります。


📦 インストール(例)

npm からインストールする場合:

npm install @celsowm/markdown-wysiwyg

CDN 版を使う場合:

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@celsowm/markdown-wysiwyg/dist/editor.min.css">
<script src="https://cdn.jsdelivr.net/npm/@celsowm/markdown-wysiwyg@latest/dist/editor.js"></script>

※ 最新バージョン等は npm や公式リポジトリでご確認ください


🛠️ こんなシーンで使える!

  • ブログやドキュメントページの執筆 UI
  • ユーザーが Markdown 記法に不慣れなサービスでのコンテンツ生成
  • Markdown と視覚編集の両方の UX を提供する管理画面
  • リッチテキスト編集に加えて Markdown のまま保存したいケース

🧾 まとめ

markdown-wysiwyg-editor は、視覚編集と Markdown を両立させたエディタライブラリ です。 一見相反する 2 つの表現方法をうまく結び付けることで、コンテンツ制作の柔軟性を高めます。 Markdown をベースに扱いながら、ユーザー体験を損なわずに直感的な編集を提供したい開発者にぴったりのツールです。


wysiwyg-pdfの紹介

📝 wysiwyg-pdf — ブラウザで印刷用 PDF テンプレートを作る React/WYSIWYG エディタ

npm github

wysiwyg-pdf は、ブラウザ上で PDF 用のテンプレートを直感的に作成・編集できる React + Konva ベースの WYSIWYG エディタツールキット です。開発者が自分のアプリに統合できる、カスタマイズ性の高いエディタ UI と PDF レイアウト機能 を提供します。


📌 特徴とコンセプト

✨ WYSIWYG(見たまま編集)

「What You See Is What You Get(見たままがそのまま)」の考え方に基づき、編集画面で見た内容がそのまま印刷・PDF のレイアウトに反映される UI を実現しています。これは 一般的なリッチテキストエディタ よりも視覚的で直感的な操作を可能にします。


🧱 主要機能

🎨 ドラッグ&ドロップエディタ

  • テキスト、図形、線、画像、表などを自由に配置・編集
  • オブジェクトの選択、移動、サイズ変更、コピー/貼り付け対応
  • キーボードショートカット(undo/redo、削除、全選択など)を備えています。

🛠 編集ツールバーとプロパティパネル

  • 挿入ツール、ズームコントロールなどを備えた ツールバー
  • フォント、色、線幅などを細かく設定する プロパティパネル

これらを組み合わせて、ユーザー側に柔軟でパワフルな編集体験を提供します。

📄 印刷に最適化されたレイアウト

  • A4 固定の縦/横方向対応
  • 内部座標系はポイント単位(pt)で精密な位置制御
  • React での DOM 印刷出力に対応する設計(例: react-to-print との併用など)

🚀 インテグレーション & 技術スタック

wysiwyg-pdfReact + Konva を基盤にしており、以下のような設計思想を取り入れています:

  • 編集状態は JSON ドキュメント構造(Doc) で保持
  • 独自の編集コンポーネントを組み合わせることで、

自由度の高い UI のカスタマイズが可能

  • Tailwind CSS(と shadcn 風 CSS 変数)を前提としたスタイリング

(Tailwind の scan 対象としてローカルで設定が必要)([GitHub][1])

💡 推奨セットアップ例

import 'wysiwyg-pdf/styles.css'
import { ReportKonvaEditor, WysiwygEditorToolbar, WysiwygPropertiesPanel } from 'wysiwyg-pdf'

また、i18n(国際化)対応 はホストアプリ側で提供する方式を採用しており柔軟に組み込めます。([GitHub][1])


🧠 利用シーン

wysiwyg-pdf が活躍する場面の例:

✅ カスタム帳票や申請書のテンプレート作成ツール ✅ PDF フォームや受領書、請求書系 UI の内製エディタ ✅ CMS や業務アプリで「そのまま印刷できる」ドキュメント編集 ✅ PDF のレイアウトを視覚的に設計したい SaaS / Web アプリ


💡 他のライブラリとの位置づけ

一般的な WYSIWYG ライブラリ(例: Editor.js や Quill など)はリッチテキスト表現が中心ですが、wysiwyg-pdfPDF レイアウト寄りのドキュメント設計をターゲットとしています。 通常のリッチテキストとは異なり、A4 ページ物の精密な配置設計ができる点が特徴です。


📦 インストール

npm i wysiwyg-pdf

また React / ReactDOM が peerDependency として必要です。


✍️ まとめ

wysiwyg-pdf は、React アプリケーションに テンプレート編集 & PDF 印刷ワークフローを組み込むための強力な WYSIWYG toolkit です。 ビジュアルに自由度の高い UI、JSON で編集状態を管理するアーキテクチャ、そしてブラウザ印刷向けの設計方針で、カスタム帳票編集を簡単に実装したい開発者に最適な選択肢となります。