MENU

なかぴょん

元WEBディレクターがPythonエンジニアになるために勉強中です。プログラミング記事多めに更新していきます。ブログ関連記事も少々。

【30日間無料体験】AI初心者が無料で基礎知識を学ぶなら「Audible」

EmDashの使い方まとめ!管理画面・テーマ・プラグイン・CLIを実践解説

記事には広告が含まれています

Cloudflare製の次世代CMS「EmDash」は、管理画面でのコンテンツ編集からCLIによるプログラム操作、AIエージェントとの連携まで、幅広い使い方に対応しています。しかし2026年4月にベータ公開されたばかりということもあり、具体的な操作方法をまとめた日本語の情報はまだ多くありません。

本記事では、EmDashを実際に触ったうえで知っておきたい管理画面の操作、テーマのカスタマイズ、プラグイン開発、CLI・MCPの活用方法を実践的に解説します。EmDashの概要や導入手順については別記事でまとめていますので、そちらもあわせてご覧ください。

管理画面の使い方|コンテンツ作成とスキーマ管理

EmDashの管理画面は、WordPressの操作経験があればすぐに使い始められる設計です。開発サーバー起動後、/_emdash/adminにアクセスすると管理画面が開きます。左サイドバーにはPages、Posts、Media、Comments、Menus、Redirects、Widgets、Categories、Tagsなどのメニューが並んでおり、WordPress経験者であれば直感的に操作できるでしょう。

記事・ページの作成と編集

コンテンツの作成は、左メニューからPosts(またはPages)を選び、新規作成ボタンを押すだけです。エディタにはTipTapベースのリッチテキストエディタが搭載されており、太字・イタリック・見出し・リスト・引用・画像挿入といった基本的な編集機能が揃っています。

WordPressのGutenbergブロックエディタとは異なり、EmDashのエディタはシンプルな構成です。入力したコンテンツはPortable Text(構造化JSON)として保存されるため、HTML文字列ではなく構造化されたデータとしてコンテンツが管理されます。

スラッグは自動生成されますが、手動で変更することも可能です。ステータスはドラフト・公開・予約公開に対応しており、リビジョン管理やフルテキスト検索(FTS5)も標準で利用できます。

カスタムコンテンツタイプの作成

EmDashでは、管理画面のContent Typesメニューからカスタムコンテンツタイプを視覚的に定義できます。WordPressでカスタム投稿タイプを作るにはAdvanced Custom Fieldsなどのプラグインが必要でしたが、EmDashではプラグインなしで管理画面から直接スキーマを設計できます。

作成したコンテンツタイプには、それぞれ専用のSQLテーブルが割り当てられます。WordPressのようにすべてを1つのwp_postsテーブルに詰め込む設計とは異なり、データベースレベルで整理されている点が特徴です。

型定義の自動生成

スキーマ定義後にnpx emdash typesを実行すると、ライブスキーマからTypeScriptの型定義が自動生成されます。フロントエンドでコンテンツを取得する際に型安全なコードが書けるため、開発効率が大幅に向上します。

メディア管理

メディアライブラリはドラッグ&ドロップでのアップロードに対応しています。アップロードされたファイルは署名付きURLを通じて安全に管理され、Cloudflareの場合はR2ストレージに保存されます。ローカル開発ではファイルシステムに保存されるため、特別な設定は不要です。

Astroテーマのカスタマイズ方法

EmDashのテーマは、標準的なAstroプロジェクトそのものです。Astroの開発経験がある方であれば、テーマカスタマイズに新たな学習はほぼ必要ありません。テーマの構成要素は、Pages(ルーティング)、Layouts(共通レイアウト)、Components(UIパーツ)、Styles(CSS)、そしてSeedファイル(コンテンツタイプの初期定義)です。

テーマのディレクトリ構成

EmDashプロジェクトのsrc/ディレクトリは、Astroの標準構成に従います。ページテンプレートはsrc/pages/に配置し、Astroのファイルベースルーティングがそのまま適用されます。

テーマの主なディレクトリ構成
  • src/pages/:ルーティングとページテンプレート([slug].astro など)
  • src/layouts/:共通レイアウト
  • src/components/:再利用可能なUIコンポーネント
  • astro.config.mjs:EmDash統合の設定
  • seed.ts:コンテンツタイプとサンプルデータの定義

コンテンツの取得と表示

テンプレート内でCMSのコンテンツを取得するには、getEmDashCollectiongetEmDashEntryを使います。AstroのLive Collectionsとして提供されるため、ビルドなしでリアルタイムにデータベースからコンテンツを取得できます。取得したコンテンツのリッチテキスト部分はPortableTextコンポーネントでレンダリングします。

たとえばブログ一覧ページではgetEmDashCollection("posts")で投稿一覧を取得し、個別ページではgetEmDashEntryでスラッグに対応する記事を取得する、という流れです。WordPressのWP_Queryに相当する機能ですが、TypeScriptの型が効いた状態で開発できる点が大きな違いです。

公式テンプレートの選択

テーマを一から作らずに始めたい場合は、公式テンプレートを利用できます。2026年4月時点では以下の5種類が用意されています。

テンプレート名 用途 主な機能
Blog ブログ・メディアサイト カテゴリ・タグ・全文検索・RSS・ダークモード
Marketing ランディングページ ヒーロー・料金表・FAQ・問い合わせフォーム
Portfolio ポートフォリオ プロジェクト一覧・タグフィルター・ケーススタディ
Starter 汎用的な出発点 投稿・固定ページ・カテゴリ・タグの基本構成
Blank 最小構成 EmDash統合のみの空プロジェクト

自分のデザインシステムがすでにある場合や、独自の情報設計が必要な場合はBlankテンプレートから始めるとよいでしょう。一方、素早くサイトを立ち上げたい場合はBlogやMarketingテンプレートが実用的です。

プラグイン開発の基本|definePlugin APIの使い方

EmDashのプラグインは、TypeScriptモジュールとしてdefinePlugin() APIで定義します。プラグインには「Standard」と「Native」の2種類があり、ほとんどのケースではStandard形式を使います。

プラグインの構成要素

EmDashプラグインは、大きく2つのパーツで構成されています。1つ目はPlugin Descriptor(プラグイン記述子)で、メタデータやケイパビリティを宣言するもの。ビルド時にastro.config.mjsで読み込まれます。2つ目はPlugin Definition(プラグイン定義)で、definePlugin()で記述するランタイムのロジックです。フックやAPIルートの実装がここに入ります。

definePlugin()は、プラグイン名・バージョン・ケイパビリティ配列・ライフサイクルフックを受け取ります。利用できるフックにはcontent:afterSaveonInstallonActivateonContentChangeonCronなどがあり、コンテンツの変更やスケジュール実行をトリガーに処理を組み込めます。

サンドボックスの制約

サンドボックスモードで動作するStandardプラグインでは、Node.jsのビルトインモジュール(fspathchild_processなど)は使用できません。外部APIとの通信には、ケイパビリティでnetwork:fetchを宣言し、ctx.http.fetch()を使う必要があります。開発時はtrustedモード(制限なし)で動作させ、本番ではsandboxedモードにデプロイする、というワークフローが推奨されています。

プラグインの登録と実行モード

作成したプラグインはastro.config.mjsに登録します。plugins: []に記述するとインプロセス(trusted)モードで動作し、sandboxed: []に記述するとCloudflareのDynamic Worker内で隔離実行されます。Standard形式のプラグインはどちらのモードでも動作しますが、Native形式はtrustedモードのみです。

また、管理画面のMarketplaceメニューからプラグインをインストールすることもできます。2026年4月時点ではwebhook-notifier、audit-log、atproto(Bluesky連携)などの公式プラグインが利用可能です。ただしサードパーティ製のプラグインはまだほとんどありません。

CLIとMCPサーバーの活用|AIエージェントとの連携

EmDash CLIは、管理画面で行えるすべての操作をコマンドラインから実行できるツールです。AIエージェントとEmDashを接続するブリッジとしても機能し、コンテンツ・スキーマ・メディア・プラグインの管理をプログラム的に行えます。

CLIの主要コマンド

CLIの出力はJSON形式に対応しているため、スクリプトやAIエージェントが結果をパースしやすい設計になっています。主要な操作を紹介します。

EmDash CLI 主要コマンド一覧
  • コンテンツ操作emdash content list / create / update / search
  • スキーマ管理emdash schema list / create
  • メディア操作emdash media upload / list
  • プラグイン管理emdash plugin install / enable / list
  • 型生成npx emdash types
  • シード適用emdash seed

たとえばCLIで記事を作成する場合は、emdash content create --collection posts --title "記事タイトル" --status draftのように実行します。CLIはローカルの開発インスタンスだけでなく、リモートのデプロイ済みサイトに対しても操作が可能です。

MCPサーバーでAIツールと直接接続する

EmDashの全インスタンスには、MCPサーバーが組み込まれています。Claude Desktop、Cursor、Kiroなどの MCP対応クライアントからEmDashに直接接続し、「新しいブログ記事を作成して」「ドラフトの記事をすべて公開して」といった指示を自然言語で実行できます。

MCPサーバーは、コンテンツ管理・スキーマ操作・メディア管理・プラグイン管理・ユーザー管理など、CMS全体の操作をツールとして公開しています。認証にはAPIトークンを使い、トークンごとにスコープを制限できるため、プラグインと同じ「最小権限の原則」が適用されます。

Agent Skillsとは

EmDashにはAgent Skillsと呼ばれる構造化ドキュメントが同梱されています。これはAIエージェント向けに、プラグインのフック一覧・テーマ構成・コンテンツスキーマ・WordPressからの移行手順などを記述したものです。AIエージェントにEmDashのコードベースを渡すだけで、エージェントがCMSの機能を理解し、テーマやプラグインの開発を自律的に行える設計になっています。

Cloudflare Workersへのデプロイ

EmDashをCloudflare Workersにデプロイする最も簡単な方法は、Cloudflareダッシュボードの「Workers & Pages」セクションからテンプレートを選ぶことです。Gitアカウント連携・プロジェクト名・D1データベース・R2バケットの設定を行えば、数クリックでデプロイが完了します。

デプロイ後は、自動的にCloudflareのエッジネットワーク上でサイトが配信されます。スケールトゥゼロに対応しているため、アクセスがない間はコストが発生せず、トラフィック増加時には自動的にスケールアウトします。

なお、Node.jsサーバーへのデプロイも可能です。この場合はSQLiteがデータベースとして使われ、プラグインのサンドボックス隔離は無効になります。プロトタイピングやCMSの編集体験を試す目的であればNode.jsで十分ですが、本格運用ではCloudflareへのデプロイが推奨されます。

EmDashを使う際の注意点とつまずきやすいポイント

実際にEmDashを使う際に、知っておくべき注意点をまとめます。

認証まわりの不安定さ

EmDashの認証はデフォルトでパスキー(WebAuthn)方式です。パスワードには対応していません。フォールバックとしてマジックリンク(メール認証)が用意されていますが、ベータ版のため環境によっては動作が不安定との報告もあります。ローカル開発環境では特にパスキーの設定に手間取ることがあるため、事前にブラウザのWebAuthn対応を確認しておくとよいでしょう。

エディタの機能制限

EmDashのリッチテキストエディタは、WordPressのGutenbergと比較すると機能が限定的です。基本的なテキスト編集と画像挿入には対応していますが、ブロックエディタのような高度なレイアウト編集は現時点ではできません。コンテンツの見た目を細かく調整したい場合は、テーマ側のAstroコンポーネントで対応する必要があります。

大規模サイトでのパフォーマンス

EmDashのデータベースはD1(Cloudflare)またはSQLiteがベースです。数百〜数千ページ規模のサイトでは、KVキャッシュの活用など追加のパフォーマンスチューニングが必要になる可能性があります。コーポレートサイトやポートフォリオのように、管理するページ数が限定的なケースでは十分な性能が期待できます。

エコシステムの未成熟さ

WordPressには60,000以上のプラグインと数千のテーマがありますが、EmDashのエコシステムはまだ黎明期です。必要な機能が公式プラグインでカバーされていない場合は、自作する前提で検討する必要があります。ただし、AIエージェントを活用したプラグイン開発のワークフローが整備されているため、開発のハードル自体はWordPressのPHPプラグイン開発より低いと感じる方も多いでしょう。

EmDash使い方まとめ

EmDashは、管理画面での直感的なコンテンツ編集から、Astroベースのテーマカスタマイズ、TypeScriptによるプラグイン開発、CLI・MCPを使ったAIエージェント連携まで、モダンなCMSワークフローを一通りカバーしています。

  • 管理画面はWordPress経験者なら迷わず使える設計で、カスタムコンテンツタイプもGUI操作で作成可能
  • テーマは標準的なAstroプロジェクトであり、Astro経験者はそのまま開発に入れる
  • プラグインはdefinePlugin() APIで定義し、ケイパビリティ宣言による権限制御が特徴
  • CLIとMCPサーバーにより、AIエージェントがCMS操作を自律的に実行できる
  • Cloudflare Workersへのデプロイは数クリックで完了するが、プラグイン隔離には有料プラン(月額5ドル〜)が必要
  • 認証・エディタ・エコシステムの成熟度にはベータ版ならではの制約がある

ベータ版であることを前提に、まずはローカルかPlayground環境で一通り触ってみるのがおすすめです。特にAstroやTypeScriptに馴染みのあるフロントエンドエンジニアにとっては、EmDashの開発体験は期待以上の手応えを感じられるはずです。


参考
EmDash GitHub リポジトリGitHub

参考
EmDash 公式テンプレートGitHub

参考
Introducing EmDashCloudflare Blog

X
SHARE