「WordPressのプラグイン更新やセキュリティ対策に疲れた」「生成AIにブログ更新を任せたいけど、管理画面を操作させるのは不安」——そんな悩みを抱えていませんか。2026年9月に正式版となったCloudflare発のCMS「EmDash」は、サーバーレスで動き、AIとつながるためのMCPサーバーを最初から備えています。
この記事では、EmDashの全体像とMCPを介したAI連携の仕組みを押さえたうえで、手元のWindows PCからEmDashをCloudflareにデプロイしてHello Worldページを公開し、さらにClaudeからそのページを更新するまでを体験します。デプロイ先にも管理画面のログイン(Cloudflare Access)にもCloudflareを使うのは、EmDashの開発元であることに加え、無料枠の広さや世界規模のエッジネットワーク、認証まで1つでそろうなど、ほかのクラウドと比べて利点が多いためです。GitHubは使わず、コマンドも最小限です。
できるようになること
この記事の手順を最後まで実施すると、次のことができるようになります。
- 手元のWindows PCで、公式のスキャフォルダーを使ってEmDashのプロジェクトを作成できる
- GitHubアカウントなしで、Wrangler(Cloudflare公式のCLI)からEmDashをCloudflare Workersにデプロイできる
- EmDashの管理画面をCloudflare Accessで保護し、Cloudflareアカウントでサインインできる
- EmDashの管理画面で「Hello World」ページを作成し、インターネットに公開できる
- ClaudeにEmDashのMCPサーバーを「カスタムコネクタ」として接続し、日本語の指示でページを読み取り・更新・公開できる
追加でインストールするのはNode.jsだけです。Wranglerはプロジェクト内に自動で導入されるため、別途インストールする必要はありません。また、本記事の範囲はWorkersの無料プラン(Workers Free)と、Cloudflare Zero TrustのFreeプランで実施できます。
完成イメージ(全体構成)
完成イメージ(公開されるページ)
URL: https://hello-emdash.<サブドメイン>.workers.dev/pages/hello-world
--------------------------------------------------------------------
Hello World
Hello World! このページは Claude が MCP 経由で更新しました。
--------------------------------------------------------------------
最初は管理画面から手動で書いた本文を公開し、最後にClaudeへの指示だけで上記の本文に書き換えます。
EmDashとは?AIとつながるサーバーレスCMS
EmDashは、Cloudflareが「WordPressの精神的後継(spiritual successor)」と位置づけるオープンソースのCMSです。2026年4月1日にv0.1.0のプレビュー版として発表され(Introducing EmDash)、2026年9月28日に安定版の1.0がリリースされました(EmDash 1.0)。ライセンスはMITで、2026年10月時点のnpm上の最新版は1.3.1です。
アーキテクチャ(Astro × Workers × D1 × R2)
- Astroベース:TypeScriptで書かれたフルスタックのCMSで、WebフレームワークのAstroの上に構築されています(Introducing EmDash)
- サーバーレス:Cloudflare上ではWorkers(実行環境)、D1(データベース)、R2(メディア保存)を使って動きます。Node.jsサーバー+SQLiteなどで動かすこともできます(GitHub - emdash-cms/emdash)
- ゼロスケール(scale to zero):Cloudflare上ではアクセスがないときにリソースを消費せず、CPU時間に対してのみ課金されます(Introducing EmDash)
セキュリティ(サンドボックス化されたプラグインとパスキー認証)
- プラグインの隔離:各プラグインは独立したサンドボックス(Cloudflare上ではDynamic Worker)で動き、マニフェストで宣言して管理者が承認した操作だけを実行できます(EmDash 1.0)
- プラグインレジストリ:1.0では、AT Protocol上に構築された分散型のプラグインレジストリ(plugins.emdashcms.com)が提供され、署名やチェックサムを検証してからインストールされます(同上)
- パスキー認証が標準:パスワードではなくパスキーでログインし、管理者・編集者・投稿者・寄稿者のロールで権限を分けられます(Introducing EmDash)
- Cloudflare Accessにも対応:Cloudflare上では、パスキーの代わりにCloudflare Accessで認証できます。Accessがエッジでユーザーを認証し、EmDashはAccessが発行した署名付きJWTを検証して、EmDashのユーザーに対応づけます。本番環境ではAccessが唯一の認証方式になり、パスキーやマジックリンクは使えなくなります(Authentication)。本記事ではこちらを使います
MCPを介したAIとの連携
本記事の後半で使うのがこの機能です。
MCPとは
MCP(Model Context Protocol)は、AIアプリケーションが外部のツールやデータにつながるためのオープン標準で、Anthropicが策定しました(Get started with custom connectors using remote MCP)。サービス側が「MCPサーバー」として操作(ツール)を公開し、AI側(MCPクライアント)がそれを呼び出す、という役割分担になっています。
EmDashの組み込みMCPサーバー
EmDashには、AIアシスタントがサイトのコンテンツを管理するためのMCPサーバーが組み込まれており、既定で有効です(AI Tools)。
| 項目 | 内容 |
|---|---|
| エンドポイント | https://<あなたのサイト>/_emdash/api/mcp |
| 通信方式 | ステートレスなStreamable HTTP(JSON-RPC 2.0) |
| 認証 | OAuth 2.1(PKCE)またはパーソナルアクセストークン。管理画面のログインセッションだけでは認証されない |
| 権限の絞り込み | 接続時の同意画面でスコープ(content:read、content:write など)を選択。さらにユーザーのロールでも制限される |
| 主なツール |
content_get(取得)、content_update(部分更新)、content_publish(公開)、media_upload(メディア追加)、search(検索)など |
ツールは、コンテンツ・メディア・タクソノミー・メニュー・サイト設定・スキーマ・リビジョンなどのカテゴリに分かれています。公開済みの記事に content_update を実行すると下書きが作られ、content_publish を実行するまで公開中の内容は変わりません(MCP Server Reference)。
Claudeとつながる仕組み
Claudeでは、リモートのMCPサーバーを「カスタムコネクタ」として登録します。カスタムコネクタを追加すると、ClaudeはあなたのPCからではなく、Anthropicのクラウド基盤からMCPサーバーに接続します(Get started with custom connectors using remote MCP)。そのため、EmDashのサイトがインターネットから到達できる状態になっている必要があります。
本記事ではEmDashの管理用パス(/_emdash/*)をCloudflare Accessで保護しますが、Anthropicのクラウドからの接続はブラウザを介さないため、Accessのサインイン画面を通過できません。そこで、Claudeが直接呼び出すMCPのエンドポイントとOAuthのエンドポイントだけをAccessの対象から外します(手順2-4)。Claudeに権限を与える同意画面はAccessで保護されたままなので、Claudeが使うトークンを発行できるのは、Accessのサインインを通過した人だけです。
MCPを介した更新の流れ
安全に使うための注意点
- 同意画面では要求された権限がすべて選択された状態で表示されるため、不要な権限は外します(AI Tools)
- スキーマ変更はデータベース構造を変え、保存済みのフィールドデータが消えることがあります。管理者権限が必要です(同上)
- 公式ドキュメントでは、いきなり公開せず、まず下書きを作って管理画面で確認する運用が推奨されています(同上)
- 悪意のあるMCPサーバーは、Claudeに意図しない操作をさせる指示(プロンプトインジェクション)を埋め込むことがあります。信頼できるサーバーだけを接続してください(Get started with custom connectors using remote MCP)
そのほかのAI向け機能
- Agent Skills:AIコーディングアシスタントにEmDashのAPIやプラグイン・テーマの作り方を教えるスキル集です(Agent Skills)
- CLI:コンテンツやスキーマを操作するコマンドラインツールです。メディアのアップロードやコンテンツ検索などができます(Introducing EmDash)
- Docs MCP:EmDashのドキュメント自体をAIに参照させるための、サイト管理用とは別のMCPサーバーです(Docs MCP for AI Tools)
WordPressとの比較と注意点
| 観点 | WordPress | EmDash |
|---|---|---|
| 言語・基盤 | PHP、MySQL | TypeScript、Astro。D1やSQLite、PostgreSQLなど |
| 動かし方 | 常時稼働するWebサーバー | サーバーレス(Workers)またはNode.jsサーバー |
| プラグインの権限 | サイト本体と同じ権限で動作する | プラグインごとにサンドボックスで隔離し、宣言した操作だけを許可する |
| ログイン | パスワードが標準 | パスキーが標準 |
| AI連携 | プラグインなどで追加 | MCPサーバー、Agent Skills、CLIを標準搭載 |
一方で、注意しておきたい点もあります。
- エコシステムはまだ小さい:第三者の調査では、2026年10月21日時点でEmDashのレジストリに掲載されたプラグインは98件で、WordPress.orgの72,000件以上とは大きな差があります(InstaWP: EmDash vs WordPress)
- Cloudflareへの依存:1.0の主要機能の多くがCloudflare固有のインフラに依存しているという指摘もあります(Search Engine Journal)
既存の大規模WordPressサイトをすぐに置き換えるというより、新規のコンテンツサイトや、AIと組み合わせた運用を試したい場面から導入するのが現実的です。
インストールせずに管理画面を触ってみたい場合は、公式のプレイグラウンド(try.emdashcms.com)も用意されています(EmDash 1.0)。
用意するもの
ハンズオンを始める前に、次の前提条件がそろっているかチェックしてください。
Node.js(LTS版)
EmDashのプロジェクト作成、ビルド、デプロイにはNode.jsとnpmが必要です。公式ドキュメントでは、Node.js 22.23.4以降とnpmが求められています(Getting Started)。npmはNode.jsに同梱されているため、インストールするのはNode.jsだけです。
- ブラウザで https://nodejs.org/ を開く
- LTS版(長期サポート版)のWindows Installer(
.msi)をダウンロードする - ダウンロードしたファイルを実行し、既定の設定のまま Next で進めてインストールする
- 途中の「Tools for Native Modules」(ネイティブモジュール用ツールの自動インストール)のチェックは付けずに進める(本記事では不要です)
- インストール後、スタート メニューで「cmd」と入力して コマンドプロンプト を開き、次のコマンドでバージョンを確認する
コマンドプロンプト(Node.jsとnpmのバージョン確認)
node --version
npm --version
v22.23.4 以降(v24.x.x など)が表示されればOKです。
本記事のコマンドは、PowerShellではなく コマンドプロンプト で実行してください。PowerShellでは、既定の実行ポリシーにより npm がエラーになることがあります(ハマりどころ1)。
R2の有効化
EmDashのテンプレートは、画像などのメディアの保存先としてR2を使います。R2を使うには、事前にアカウントへR2サブスクリプションを追加しておく必要があります(R2 Get started)。
- Cloudflareダッシュボードで Storage & databases > R2 > Overview を開く(R2 Overviewへの直接リンク)
- 画面の案内に従ってチェックアウトを完了し、R2サブスクリプションを追加する
R2には毎月の無料枠があり、使用量に応じて月単位で課金されます(R2 Get started)。
Cloudflare Zero Trustの有効化
Cloudflare Accessは、Cloudflare Zero Trustの機能です。Accessを使うには、事前にアカウントでZero Trustを有効にしておく必要があります(Cloudflare Access for Workers)。Freeプランは50ユーザーまで無料で使えます(Cloudflare Zero Trust plans)。
チーム名を決めてZero Trustを有効にする
チーム名は、Zero Trustの組織を表す一意の名前です(Get started)。すでにZero Trustを使っている場合は、この手順は不要です。
- Cloudflareダッシュボードのサイドバーで Zero Trust を選択する
- オンボーディング画面で、チーム名(例:
my-emdash-team)を入力する - Free プランを選択し、画面の案内に従ってオンボーディングを完了する
Freeプランでも、オンボーディングの途中で支払い情報の入力を求められますが、課金はされません(Get started)。
チームドメインを控える
チーム名から、<チーム名>.cloudflareaccess.com という形式のチームドメインが決まります(Getting started FAQ)。手順1-4でEmDashの設定ファイルに書き込むので、控えておきます。
- Zero Trust > Settings を開く
- チーム名とチームドメイン(
<チーム名>.cloudflareaccess.com)を確認し、メモ帳などに控える
ログイン方法を確認する
本記事では、Accessのログイン方法として、Cloudflareのアカウントでサインインする「Cloudflare」IDプロバイダーを使います。新しく作成したZero Trustの組織には、このIDプロバイダーが既定のログイン方法として自動で追加され、自分のCloudflareアカウントのメンバーだけがサインインできる設定(Restrict to account members)になっています(Cloudflare identity provider)。
- Zero Trust > Integrations > Identity providers を開く
- Your identity providers に Cloudflare があることを確認する
- ない場合は、Add new identity provider > Cloudflare を選択し、Save を選択する
手動で追加した場合、Restrict to account members は既定で無効になります(同上)。本記事では、手順2-2のポリシーで自分のメールアドレスだけを許可するため、そのままでも問題ありません。
Cloudflareアカウントを持っていない人(ほかの編集者など)にもサインインさせたい場合は、メールに届くコードでサインインする One-time PIN をログイン方法に追加します。One-time PINは、新しい組織には自動では追加されません(One-time PIN login)。
Claudeのアカウント
ClaudeからEmDashを操作するために、カスタムコネクタを使います。普段お使いのClaudeのアカウントで、https://claude.ai にログインできることを確認してください。
カスタムコネクタはFree、Pro、Max、Team、Enterpriseの各プランで使えますが、Freeプランで追加できるカスタムコネクタは1つまでです(Get started with custom connectors using remote MCP)。本記事では個人向けプラン(Free/Pro/Max)を想定しています。TeamやEnterpriseプランでは、組織のオーナーがコネクタを追加する必要があります(同上)。
実際にやってみる
ここからが実行手順の全体です。上から順番に進めてください。
本記事は2026年10月時点の公式ドキュメント、EmDash 1.3.1(create-emdash 1.3.1)に基づいています。Cloudflare、Claudeの画面やコマンドの出力は更新されることがあるため、異なる場合は各手順に記載した公式ドキュメントを正としてください。
1. EmDashのプロジェクトをローカルに作成する
公式のスキャフォルダー(create-emdash)で、Cloudflare向けのブログテンプレートからEmDashのプロジェクトを手元のPCに作成します。テンプレートはGitHub上の公開リポジトリからダウンロードされますが、GitHubのアカウントは不要です。
1-1. コマンドプロンプトを開く
以降のコマンドを実行するコマンドプロンプトを開きます。
- スタート メニューで「cmd」と入力し、コマンドプロンプト を開く
- ユーザーフォルダ(
C:\Users\<ユーザー名>)が表示されていることを確認する
1-2. プロジェクトを作成する
hello-emdash というフォルダにEmDashのプロジェクトを作成し、依存パッケージもまとめてインストールします(Getting Started)。
コマンドプロンプト(プロジェクトの作成)
npm create emdash@latest hello-emdash -- --template cloudflare:blog --pm npm --no-sandboxed-plugins --yes
- 上記のコマンドを実行する
- 「Need to install the following packages: create-emdash@...」「Ok to proceed? (y)」と表示されたら、
yを入力して Enter キーを押す - 「Done! Your EmDash project is ready at hello-emdash」と表示されるまで待つ
各オプションの意味は次のとおりです。いずれも create-emdash の --help に記載されているものです。
| オプション | 意味 |
|---|---|
--template cloudflare:blog |
Cloudflare Workers向け(D1+R2)のブログテンプレートを使う |
--pm npm |
パッケージマネージャーにNode.js同梱のnpmを使う(pnpmなどの追加インストールが不要) |
--no-sandboxed-plugins |
サンドボックス化されたプラグインを無効にする。この機能が使うWorker Loaderは有料プランでのみ利用できるため、無効のままにして無料プランでデプロイする |
--yes |
対話形式の質問を省略し、既定値(依存パッケージのインストールあり)で進める |
--yes を付けずに実行すると、プロジェクト名、デプロイ先(Cloudflare Workers/Node.js)、テンプレート、パッケージマネージャー、依存パッケージのインストール有無、サンドボックス化プラグインの有効化を順に質問されます。また、プロジェクトの .env ファイルには、プラグインの秘密情報を暗号化するための EMDASH_ENCRYPTION_KEY が自動で書き込まれます。このキーがないと保存済みのプラグインの秘密情報を復号できないため、プロジェクトフォルダごと大切に保管してください(Getting Started)。
1-3. Worker名を変更する
テンプレートの設定ファイルでは、Worker名(公開URLの一部になる名前)が my-emdash-site になっています。分かりやすいように hello-emdash に変更します。
- エクスプローラーで
C:\Users\<ユーザー名>\hello-emdashを開く -
wrangler.jsoncを右クリックし、プログラムから開く > メモ帳 を選択する -
"name": "my-emdash-site",の行を、次のように書き換えて上書き保存する
hello-emdash\wrangler.jsonc(変更後・抜粋)
{
"$schema": "node_modules/wrangler/config-schema.json",
"name": "hello-emdash",
"main": "./src/worker.ts",
"compatibility_date": "2026-02-24",
"compatibility_flags": ["nodejs_compat"],
"d1_databases": [
{
"binding": "DB",
"database_name": "my-emdash-site",
},
],
"r2_buckets": [
{
"binding": "MEDIA",
"bucket_name": "my-emdash-media",
},
],
// Sandboxed plugins require Worker Loader, available on Workers paid plans. Uncomment to enable:
// "worker_loaders": [{ "binding": "LOADER" }],
"triggers": {
"crons": ["* * * * *"],
},
}
変更するのは name の1行だけです。DB がコンテンツを保存するD1、MEDIA がメディアを保存するR2のバインディングです。worker_loaders は手順1-2のオプションによりコメントアウトされています。triggers.crons は予約公開やメンテナンス処理のための定期実行の設定です(Deploy to Cloudflare Workers)。Worker名は63文字以内で、英数字とハイフンのみを使い、先頭と末尾をハイフンにしないでください(workers.dev)。
1-4. 認証方式をCloudflare Accessに切り替える
EmDashの設定ファイル astro.config.mjs に、Cloudflare Accessで認証するための設定(auth: access(...))を追加します(Authentication、Deploy to Cloudflare Workers)。最初のデプロイからAccessで認証させるため、手順3のデプロイより前に設定します。
- エクスプローラーで
C:\Users\<ユーザー名>\hello-emdashを開く -
astro.config.mjsを右クリックし、プログラムから開く > メモ帳 を選択する -
@emdash-cms/cloudflareから読み込んでいる行に、accessを追加する -
emdash({ ... })の中のstorage: r2({ binding: "MEDIA" }),の次の行に、auth: access({ ... })の4行を追加する -
<チーム名>を、チームドメインを控えるで確認した自分のチーム名に置き換えて、上書き保存する
hello-emdash\astro.config.mjs(変更後・抜粋)
import cloudflare from "@astrojs/cloudflare";
import react from "@astrojs/react";
import { access, d1, r2 } from "@emdash-cms/cloudflare";
import { defineConfig, fontProviders } from "astro/config";
import emdash from "emdash/astro";
export default defineConfig({
// (中略)
integrations: [
react(),
emdash({
database: d1({ binding: "DB", session: "auto", coalesce: true }),
storage: r2({ binding: "MEDIA" }),
auth: access({
teamDomain: "<チーム名>.cloudflareaccess.com",
audienceEnvVar: "CF_ACCESS_AUDIENCE",
}),
}),
],
// (中略)
});
変更するのは import の行と、auth: access({ ... }) の追加だけです。各オプションの意味は次のとおりです(Authentication)。
| オプション | 意味 |
|---|---|
teamDomain |
Zero Trustのチームドメイン。EmDashは、ここから取得した公開鍵でAccessのJWTを検証する |
audienceEnvVar |
Accessアプリケーションの「AUDタグ」を入れる環境変数の名前。値は手順3-3でWorkerのシークレットとして登録する |
AUDタグは、設定ファイルには書かずに、実行時の環境変数(Workerのシークレット)から読み込ませるのが公式の推奨です(Deploy to Cloudflare Workers)。この設定でデプロイすると、本番環境ではCloudflare Accessが唯一の認証方式になり、ログイン画面、パスキー、マジックリンク、招待などは使えなくなります(Authentication)。
2. Cloudflare Accessで管理画面を保護する
EmDashをデプロイする前に、Cloudflare Accessで管理用のパス(/_emdash/*)を保護します。公式ドキュメントでは、管理画面だけを保護するとREST APIにAccessのJWTが届かなくなるため、/_emdash/* 全体を保護するよう案内されています(Authentication)。デプロイより先に設定しておくことで、デプロイした直後から管理画面とセットアップ用のAPIをAccessの内側に置けます。
このハンズオンでは、次の2つのAccessアプリケーションを作成します。
| アプリケーション | 対象(ホスト名とパス) | ポリシー | 目的 |
|---|---|---|---|
EmDash admin |
hello-emdash.<サブドメイン>.workers.dev/_emdash |
許可(Allow):自分のメールアドレス | 管理画面とREST APIを保護する |
EmDash MCP for Claude |
同じホスト名の /_emdash/api/mcp、/_emdash/api/oauth/register、/_emdash/api/oauth/token
|
バイパス(Bypass):全員 | Anthropicのクラウドから、MCPとOAuthのエンドポイントに接続できるようにする |
Accessでは、共通のパスに複数のルールがある場合、より具体的なパスのルールが優先されます(Application paths)。そのため、/_emdash 全体を保護しつつ、Claudeが使う3つのパスだけをバイパスできます。
2-1. workers.devのサブドメインを確認する
公開URL(https://<Worker名>.<サブドメイン>.workers.dev)に含まれる、アカウントのサブドメインを確認します(workers.dev)。このサブドメインは、Accessアプリケーションのホスト名にも使います。
- Cloudflareダッシュボードで Workers & Pages を開く
- Your subdomain に表示されているサブドメインを控える
サブドメインは公開URLにそのまま含まれます。変更したい場合は、Your subdomain の横にある Change から変更します(同上)。Accessアプリケーションを作成した後にサブドメインを変更すると、Accessの設定も変更が必要になるため、ここで確定させておきましょう。
2-2. Accessポリシーを作成する
「誰を通すか」を決めるポリシーを、許可用とバイパス用の2つ作成します。
- Cloudflareダッシュボードで Zero Trust > Access controls > Policies を開く
- Add a policy を選択し、次の内容で許可用のポリシーを作成して保存する
| 項目 | 入力値 |
|---|---|
| Policy name | EmDash admins |
| Action | Allow |
| Include | Selector:Emails、Value:自分のCloudflareアカウントのメールアドレス |
- もう一度 Add a policy を選択し、次の内容でバイパス用のポリシーを作成して保存する
| 項目 | 入力値 |
|---|---|
| Policy name | EmDash bypass |
| Action | Bypass |
| Include | Selector:Everyone |
バイパス(Bypass)は、一致した通信に対してAccessのセキュリティ制御を一切行わず、ログも記録しない動作です。Cloudflareは、公開が必要なエンドポイントに限って使うよう推奨しています(Access policies)。本記事では、EmDash自身が認証を行う3つのエンドポイント(手順2-4)だけに使います。
2-3. 管理画面用のAccessアプリケーションを作成する
/_emdash 以下を保護するアプリケーションを作成します(Publish a self-hosted application to the Internet、Cloudflare Access for Workers)。
- Zero Trust > Access controls > Applications を開く
- Create new application を選択し、Self-hosted and private を選択する
- Add public hostname を選択し、次のように入力する
| 項目 | 入力値 |
|---|---|
| Subdomain | hello-emdash |
| Domain |
<サブドメイン>.workers.dev(手順2-1で控えたもの) |
| Path | _emdash |
-
Access policies で、手順2-2で作成した
EmDash adminsを選択する - ログイン方法(Identity providers)で、Cloudflare が使える設定になっていることを確認する
- そのほかの設定は既定のまま進め、Create を選択する
Pathを _emdash にすると、/_emdash とその下のすべてのパス(/_emdash/admin や /_emdash/api/...)が保護されます(Application paths)。ブログの公開ページ(/ や /pages/hello-world)は対象外なので、閲覧者はこれまでどおりサインインなしで見られます。
2-4. Claude接続用のバイパスアプリケーションを作成する
Claudeのカスタムコネクタは、Anthropicのクラウドから次の3つのエンドポイントを直接呼び出します。ブラウザを介さないためAccessのサインインを通過できず、このままではAccessのサインイン画面に転送されて接続に失敗します。
| パス | 役割 |
|---|---|
/_emdash/api/mcp |
MCPのエンドポイント。Bearerトークンが必須で、EmDashがOAuthのアクセストークンを検証する(MCP Server Reference) |
/_emdash/api/oauth/register |
Claudeを、OAuthのクライアントとしてEmDashに登録する(動的クライアント登録) |
/_emdash/api/oauth/token |
認可コードを、アクセストークンに交換する |
register と token は、外部のクライアントから呼び出されることを前提としたOAuthの標準エンドポイントで、EmDashも認証なしで受け付ける公開ルートとして扱っています(EmDashのソースコード(auth.ts))。一方、Claudeに権限を与える同意画面(/_emdash/oauth/authorize)は手順2-3のアプリケーションで保護されたままなので、トークンを発行できるのはAccessのサインインを通過した人だけです。なお、OAuthの検出に使う /.well-known/... のパスは /_emdash の外にあるため、Accessの対象になりません。
- Zero Trust > Access controls > Applications で、Create new application > Self-hosted and private を選択する
-
Add public hostname を3回選択し、Subdomainに
hello-emdash、Domainに<サブドメイン>.workers.devを指定して、Pathにそれぞれ次の値を入力する
| Path |
|---|
_emdash/api/mcp |
_emdash/api/oauth/register |
_emdash/api/oauth/token |
-
Access policies で、手順2-2で作成した
EmDash bypassを選択する - Create を選択する
ブログテンプレートの公開ページは、ヘッダーの検索やコメント、一部の画像でも /_emdash/api/... を使います。閲覧者向けにこれらの機能も使う場合は、ハマりどころ11の手順でバイパスするパスを追加してください。本記事のHello Worldページの表示には影響しません。
2-5. AUDタグを控える
EmDashが「どのAccessアプリケーションが発行したJWTか」を確認するために使う、AUDタグ(Application Audience Tag)を控えます。EmDashは、JWTの署名と発行者に加えてこのAUDタグを検証し、別のアプリケーション向けのトークンは拒否します(Authentication)。
-
Zero Trust > Access controls > Applications で、
EmDash adminの設定画面を開く - Additional settings タブにある Application Audience (AUD) Tag をコピーし、メモ帳などに控える(Validate JWTs)
控えるのは、手順2-3で作成した EmDash admin のAUDタグです。EmDash MCP for Claude のものではないので注意してください。
3. EmDashをCloudflareにデプロイする
作成したプロジェクトを手元のPCでビルドし、WranglerでCloudflare Workersにデプロイします。初回のデプロイで、設定ファイルに書かれたD1データベースとR2バケットも自動で作成されます。
3-1. WranglerでCloudflareにログインする
Wrangler(プロジェクト内に導入済み)に、Cloudflareアカウントへの操作を許可します。WranglerはOAuthで認証し、ブラウザを自動で開いてログイン画面を表示します(Wrangler General commands)。
コマンドプロンプト(Cloudflareへのログイン)
cd hello-emdash
npx wrangler login
- 上記のコマンドを実行する
- ブラウザでCloudflareの画面が開いたら、ログインしたうえで、Wranglerに与える権限の内容を確認して許可(Allow)する
- コマンドプロンプトに、ログインに成功した旨のメッセージが表示されることを確認する
ブラウザが開かない、ログインが完了しないといった場合は、ハマりどころ3を参照してください。
3-2. ビルドしてデプロイする
プロジェクトをビルドし、Cloudflareにデプロイします。テンプレートの deploy スクリプトは、Astroのビルド(astro build)とWranglerのデプロイ(wrangler deploy)を続けて実行します。
コマンドプロンプト(ビルドとデプロイ)
npm run deploy
- 上記のコマンドを実行する
- ビルドとアップロードが終わるまで待つ
- 最後に表示される
https://hello-emdash.<サブドメイン>.workers.devのURLを控える
初回のデプロイでは、Wranglerが設定ファイルのD1データベースとR2バケットを自動で作成し、作成したリソースのIDを wrangler.jsonc に書き戻します(Deploy to Cloudflare Workers、Wrangler Configuration)。
R2に関するエラーで失敗した場合はハマりどころ4を参照してください。
3-3. AUDタグをWorkerのシークレットに登録する
手順2-5で控えたAUDタグを、手順1-4で指定した環境変数 CF_ACCESS_AUDIENCE として、Workerのシークレットに登録します(Deploy to Cloudflare Workers)。
コマンドプロンプト(シークレットの登録)
npx wrangler secret put CF_ACCESS_AUDIENCE
- 上記のコマンドを実行する
- 値の入力を求められたら、手順2-5で控えたAUDタグを貼り付けて Enter キーを押す
- シークレットのアップロードに成功した旨のメッセージが表示されることを確認する
wrangler secret put は、Workerの新しいバージョンを作成してすぐにデプロイします(Secrets)。そのため、npm run deploy をやり直す必要はありません。登録したシークレットは、以降の npm run deploy でも引き継がれます。
3-4. 公開URLを確認する
デプロイしたEmDashのサイトが、インターネットから見られることを確認します。
- ブラウザで、手順3-2で控えたURLを開く
- ブログのトップページが表示されることを確認する
URLを開いてもエラーになる場合はハマりどころ5を、「Error 1102」が表示される場合はハマりどころ6を参照してください。
コンテンツやメディアはCloudflare上のD1とR2に保存されるため、デプロイ後はPCの電源を切ってもサイトは公開され続けます。コードを変更した場合は、もう一度 npm run deploy を実行すると反映されます。
4. Cloudflare Accessでサインインしてサイトをセットアップする
Cloudflare Accessでサインインしてから、セットアップウィザードでサイトの基本情報を登録します。Accessを使う場合、セットアップウィザードはサイト情報の入力だけで完了し、管理者アカウントやパスキーを作成する画面はありません。Accessで最初にサインインしたユーザーが、自動で管理者(Admin)になります(Authentication)。
手順2-3のAccessアプリケーションは、hello-emdash.<サブドメイン>.workers.dev というホスト名を保護しています。後から独自ドメインで管理画面を使う場合は、そのホスト名もAccessのアプリケーションに追加する必要があります。本記事では workers.dev のURLのまま運用する前提で進めます。
4-1. 管理画面を開く
EmDashの管理画面を開きます。/_emdash 以下はAccessで保護されているため、最初にAccessのサインイン画面が表示されます。
管理画面のURL
https://hello-emdash.<サブドメイン>.workers.dev/_emdash/admin
- ブラウザで上記のURLを開く
- Cloudflare Accessのサインイン画面が表示されることを確認する
4-2. Cloudflareアカウントでサインインする
ログイン方法を確認するで確認した、Cloudflareのアカウントでサインインします(Cloudflare identity provider)。
- 画面の案内に従い、手順2-2のポリシーに登録したメールアドレスのCloudflareアカウントでサインインする
- EmDashのセットアップウィザード(Set up your site)が表示され、「You're signed in via Cloudflare Access」と表示されていることを確認する
サインインできない場合や、「Authentication failed」と表示される場合は、ハマりどころ7を参照してください。
4-3. サイト情報を入力する
サイトのタイトルなどを登録します(Getting Started)。
-
Site Title にサイト名(例:
Hello EmDash)を入力する - 必要に応じて Tagline(キャッチフレーズ)を入力する
- サンプル記事を入れたい場合は、How do you want to start? で Sample content を選択したまま進む
- Continue → を選択する
- 管理画面(ダッシュボード)が表示されることを確認する
4-4. 管理者になっていることを確認する
サインインしたユーザーが、管理者(Admin)としてEmDashに登録されたことを確認します。
- 管理画面のサイドバーに Users が表示されていることを確認する(管理者にだけ表示されるメニューです)
- Users を選択し、自分のメールアドレスのユーザーのロールが Admin になっていることを確認する
2人目以降にAccessでサインインしたユーザーは、既定で投稿者(Author)として登録されます。ロールは後からEmDashの管理画面で変更できます(Authentication)。
Accessのサインインの有効期間は、既定で24時間です。期限が切れると、管理画面を開いたときにもう一度サインインを求められます(Authorization cookie)。
5. Hello Worldページを作成して公開する
管理画面からページを作成して公開し、CMSとしての基本の流れ(作成 → 下書き保存 → 公開)を体験します。ブログテンプレートには、記事用の Posts と固定ページ用の Pages という2つのコレクションが用意されています。
5-1. Pagesコレクションを開く
固定ページの一覧を表示します(Working with Content)。
- 管理画面のサイドバーで Pages を選択する
5-2. 新しいページを作成する
Hello Worldページを下書きとして作成します(Working with Content)。
- Add New を選択する
- タイトルに
Hello Worldと入力する - 本文に「Hello World! このページは Cloudflare Workers 上の EmDash から配信しています。」と入力する
- スラッグ(URLの末尾部分)がタイトルから
hello-worldと提案されていることを確認する - Save を選択する
最初の保存で、ページは下書きとして作成されます。編集中は、入力を止めてから約2秒で自動保存されます(同上)。
5-3. ページを公開する
下書きを公開版にして、閲覧者が見られる状態にします(Working with Content)。
- Publish now を選択する
- 確認画面で公開を確定する
5-4. インターネットから表示を確認する
公開したページを、ブラウザとスマートフォンで開いて確認します。
- ブラウザで
https://hello-emdash.<サブドメイン>.workers.dev/pages/hello-worldを開き、タイトルと本文が表示されることを確認する - スマートフォンのWi-Fiをオフにし、モバイル回線から同じURLを開いて表示されることを確認する
固定ページが /pages/<スラッグ> というURLになるのは、テンプレートに次のようなルーティング用のファイルがあるためです。URLのスラッグを使ってPagesコレクションからページを取得し、表示しています。
hello-emdash\src\pages\pages[slug].astro(テンプレートのルーティング・要点のみ抜粋して簡略化)
---
import { getEmDashEntry, decodeSlug } from "emdash";
import { PortableText } from "emdash/ui";
const slug = decodeSlug(Astro.params.slug);
const { entry: page } = await getEmDashEntry("pages", slug);
if (!page) {
return Astro.rewrite("/404");
}
---
<h1>{page.data.title}</h1>
<PortableText value={page.data.content} />
6. ClaudeにEmDashのMCPサーバーを接続する
ClaudeがEmDashのコンテンツを操作できるように、EmDashの組み込みMCPサーバーをClaudeのカスタムコネクタとして登録します。認証にはOAuthを使い、Claudeに渡す権限を自分で選びます。
6-1. MCPサーバーのURLを確認する
EmDashのMCPサーバーは、サイトの /_emdash/api/mcp で既定で有効になっています(AI Tools)。
EmDashのMCPサーバーのURL
https://hello-emdash.<サブドメイン>.workers.dev/_emdash/api/mcp
- 上記のURLの
<サブドメイン>を自分のものに置き換え、メモ帳などに控えておく
このURLのパスは、手順2-4でAccessのバイパスに登録した _emdash/api/mcp です。そのため、Anthropicのクラウドからの接続はAccessに止められず、EmDashに直接届きます。
6-2. カスタムコネクタを追加する
ClaudeにEmDashのMCPサーバーを登録します(Get started with custom connectors using remote MCP)。
- ブラウザで Customize > Connectors を開く
- + Add を選択し、Add custom connector を選択する
- 名前に
EmDashと入力する - 手順6-1で控えたURLを入力し、Continue を選択する
- 検出された認証設定を確認し、Continue を選択する
- Authentication で Sign in now を選択する
- Add を選択する
6-3. EmDashにサインインして権限を承認する
ClaudeからEmDashのOAuth認証画面に移動し、Claudeに与える権限を選びます(AI Tools)。この同意画面(/_emdash/oauth/authorize)は /_emdash の下にあるため、手順2-3のAccessアプリケーションで保護されています。
- Cloudflare Accessのサインイン画面が表示された場合は、手順4-2と同じくCloudflareアカウントでサインインする(同じブラウザでAccessにサインイン済みで、有効期間内であれば、サインイン画面は表示されずに同意画面に進みます)
- 同意画面で、要求された権限の一覧を確認する
- 今回の操作に必要なコンテンツの読み取り(
content:read)と書き込み(content:write)を残し、スキーマ変更(schema:write)やサイト設定の変更(settings:manage)など、不要な権限の選択を外す - 承認して、Claudeの画面に戻ったことを確認する
スコープ名は、EmDashのMCPサーバーリファレンスに記載されているものです(MCP Server Reference)。同意画面ではすべての権限が選択された状態で表示されるため、外し忘れに注意してください。
6-4. チャットでコネクタを有効にする
会話の中でEmDashのツールを使えるようにします(Get started with custom connectors using remote MCP)。
- Claudeで新しいチャットを開く
- 入力欄の左下にある + を選択し、Connectors を選択する
- EmDash のトグルをオンにする
コネクタの追加や認証でつまずいた場合は、ハマりどころ8を参照してください。
7. Claudeからページを更新する
いよいよClaudeに日本語で指示して、Hello Worldページを更新します。公式の推奨に従い、「読み取り → 下書き更新 → 確認 → 公開」の順に、1段階ずつ進めます。
7-1. ページの内容を読み取らせる
まずは変更を加えずに、ClaudeがEmDashのコンテンツを読めることを確認します。
Claudeへの指示(読み取り)
EmDash の pages コレクションから、スラッグが hello-world のページを取得して、タイトルと本文を教えてください。まだ何も変更しないでください。
- 上記の指示をClaudeに送信する
- ツールの実行確認が表示されたら、内容を確認して許可する
- 手順5-2で入力したタイトルと本文が返ってくることを確認する
ツールの実行確認では、信頼できるサーバーとツールに限って「常に許可」を選ぶよう案内されています(Get started with custom connectors using remote MCP)。慣れるまでは、1回ずつ内容を確認して許可するのがおすすめです。
7-2. 下書きとして更新させる
本文の書き換えを指示します。公開済みのページに content_update を実行すると、公開中の内容はそのままで下書きだけが更新されます(MCP Server Reference)。
Claudeへの指示(下書き更新)
先ほどの hello-world ページの本文を「Hello World! このページは Claude が MCP 経由で更新しました。」に変更してください。まだ公開はせず、下書きとして保存するだけにしてください。
- 上記の指示をClaudeに送信する
- ツールの実行確認で、更新内容を確認して許可する
- Claudeから更新完了の報告があることを確認する
EmDashは、同時編集による上書きを防ぐため、更新時に content_get で取得した _rev(リビジョン)を求めます(MCP Server Reference)。Claudeは取得と更新を組み合わせてこれを自動で処理します。
7-3. 下書きを確認して公開する
人の目で下書きを確認してから、公開を指示します。
- EmDashの管理画面で Pages > Hello World を開く
- Preview draft で下書きの内容を、Live View で現在公開中の内容を確認する(Working with Content)
- 問題がなければ、Claudeに次の指示を送信し、ツールの実行確認を許可する
Claudeへの指示(公開)
内容を確認しました。hello-world ページの下書きを公開してください。
管理画面で Publish changes を選択して公開しても、同じ結果になります(Working with Content)。
7-4. 公開ページで反映を確認する
Claudeの操作が、インターネットに公開されたページに反映されたことを確認します。
- ブラウザで
https://hello-emdash.<サブドメイン>.workers.dev/pages/hello-worldを開き直す - 本文が「Hello World! このページは Claude が MCP 経由で更新しました。」に変わっていることを確認する
本文が変わっていない場合は、ハマりどころ10を参照してください。
おつかれさまでした。これで、EmDashで公開したページを、Claudeへの日本語の指示だけで更新できるようになりました。
ハマりどころと対処法
1. npmを実行するとスクリプトの実行が無効と表示される
【発生するトラブル/エラー】
PowerShellで npm や npx を実行すると、「このシステムではスクリプトの実行が無効になっているため、ファイル ...\npm.ps1 を読み込むことができません」のようなエラーになる。
【原因】
PowerShellでは、Node.jsが用意した npm.ps1 などのスクリプトが実行され、PowerShellの実行ポリシーによってブロックされています。Windowsクライアントの既定の実行ポリシーは、スクリプトの実行を許可しない Restricted です(about_Execution_Policies)。
【対応手順】
- PowerShellを閉じる
- スタート メニューで「cmd」と入力し、コマンドプロンプト を開く
- コマンドプロンプトで、同じコマンドを実行し直す
実行ポリシーの変更はセキュリティ設定の変更にあたるため、本記事ではコマンドプロンプトを使う方法をおすすめします。
2. プロジェクトの作成やビルドがNode.jsのバージョンエラーで失敗する
【発生するトラブル/エラー】
npm create emdash@latest や npm run deploy の実行時に、Node.jsのバージョンが古い、サポートされていないといったエラーや警告が表示されて失敗する。
【原因】
インストールされているNode.jsが、EmDashの要件(Node.js 22.23.4以降)を満たしていません(Getting Started)。
【対応手順】
- コマンドプロンプトで
node --versionを実行し、バージョンを確認する - 要件より古い場合は、Node.js(LTS版)の手順で最新のLTS版をインストールし直す
- コマンドプロンプトを開き直してから、失敗したコマンドを再実行する
プロジェクトの作成時に依存パッケージのインストールだけが失敗した場合は、作成されたファイルはそのまま残ります。cd hello-emdash でフォルダに移動し、npm install を実行して再試行してください(Getting Started)。
3. wrangler loginが完了しない
【発生するトラブル/エラー】
npx wrangler login を実行してもブラウザが開かない。またはブラウザで許可しても、コマンドプロンプトが待機したまま終わらない。
【原因】
既定の wrangler login は、ブラウザでのログイン後にPCの localhost:8976 へリダイレクトする方式です(Wrangler General commands)。ブラウザが自動で開かない場合や、このリダイレクトがうまく届かない場合に完了しません。
【対応手順】
- ブラウザが開かない場合は、コマンドプロンプトに表示されたURLをコピーしてブラウザに貼り付けて開く
- それでも完了しない場合は、Ctrl + C キーで中断し、次のコマンドでデバイス認証方式を使う
- 表示された確認用のURLをブラウザで開き、コードが一致していることを確認して承認する
コマンドプロンプト(デバイス認証方式でログイン)
npx wrangler login --device
デバイス認証方式では、PC側で待ち受けを行わず、ブラウザでの承認を待ちます。承認の要求は5分で期限切れになるため、その場合はコマンドを再実行してください(Wrangler General commands)。
4. デプロイがR2関連のエラーで失敗する
【発生するトラブル/エラー】
npm run deploy の実行中に、R2を有効にするよう求めるメッセージや、R2バケットの作成に関するエラーが表示されて失敗する。
【原因】
アカウントでR2サブスクリプションが有効になっていない可能性があります。R2を使うには、事前にダッシュボードからサブスクリプションを追加する必要があります(R2 Get started)。
【対応手順】
- Cloudflareダッシュボードで Storage & databases > R2 > Overview を開き、チェックアウトを完了する
- コマンドプロンプトで、もう一度
npm run deployを実行する
5. 公開URLを開くとエラーになる
【発生するトラブル/エラー】
デプロイ直後に公開URLを開くと「523」エラーになる。または「このサイトにアクセスできません」と表示される。
【原因】
workers.devのサブドメインを初めて使うときは、反映までに少し時間がかかることがあります。公式ドキュメントでは、初回に523エラーが出た場合は1分ほど待てば解消すると説明されています(Get started - CLI)。そのほか、URLのWorker名やサブドメインの入力ミスも考えられます。
【対応手順】
- 1分ほど待ってから、ページを再読み込みする
-
npm run deployの最後に表示されたURLをコピーして開き、入力ミスがないか確認する - Cloudflareダッシュボードの Workers & Pages で
hello-emdashを選び、Settings > Domains & Routes に表示されているworkers.devのURLと一致しているか確認する(workers.dev)
6. ページを開くとError 1102が表示される
【発生するトラブル/エラー】
サイトや管理画面を開くと「Error 1102: Worker exceeded resource limits」と表示される。
【原因】
WorkerがCPU時間またはメモリの上限を超えています(Error 1102)。Workers FreeのCPU時間は1回の呼び出しあたり10ミリ秒で(Workers Pricing)、ページをサーバー側で生成する処理が重いと上限に当たることがあります。なお、たまに上限を超える程度であれば許容される仕組みがあるため、常に発生するとは限りません(Workers Limits)。
【対応手順】
- 少し時間をおいてから、ページを再読み込みする
- Cloudflareダッシュボードで
hello-emdashを選び、Metrics > Errors の Invocation Statuses でCPU時間超過が続いていないか確認する(Workers Limits)
頻繁に発生する場合は、有料プランに切り替えるとCPU時間の上限を引き上げられます(Error 1102)。
7. 管理画面にサインインできない/「Authentication failed」と表示される
【発生するトラブル/エラー】
管理画面(/_emdash/admin)を開くと、Cloudflare Accessのサインイン画面から先に進めない。または、サインイン後の画面に「Authentication failed」とだけ表示される。
【原因】
主に次の4つが考えられます。
- サインインに使ったCloudflareアカウントのメールアドレスが、手順2-2の
EmDash adminsポリシーに含まれていない - Workerのシークレット
CF_ACCESS_AUDIENCEが登録されていない、またはEmDash admin以外のアプリケーションのAUDタグを登録している。EmDashはJWTのAUDタグを検証し、ほかのアプリケーション向けのトークンを拒否します(Authentication) -
astro.config.mjsのteamDomainが誤っている。EmDashは、チームドメインから取得した公開鍵で、JWTの署名と発行者を検証します(同上) - 手順2-3のアプリケーションのホスト名やパスが誤っていて、AccessのJWTがEmDashに届いていない(同上)
最後のケースでも、EmDashは自分でAccessのJWTを検証してリクエストを拒否するため、管理画面がサインインなしで開ける状態にはなりません。
【対応手順】
- Accessのサインイン画面から先に進めない場合は、手順2-2のポリシーのメールアドレスと、サインインしたCloudflareアカウントのメールアドレスが一致しているか確認する
- 「Authentication failed」と表示される場合は、プロジェクトのフォルダ(
hello-emdash)で次のコマンドを実行してWorkerのログを表示したまま、管理画面を開き直す - 表示された
[external-auth] Auth error:の行のメッセージを確認し、下の表に従って修正する - Ctrl + C キーでログの表示を終了する
コマンドプロンプト(Workerのログを表示)
npx wrangler tail
| ログのメッセージ | 修正内容 |
|---|---|
Environment variable "CF_ACCESS_AUDIENCE" not found or empty |
手順3-3でシークレットを登録する |
"aud" を含むエラー |
手順2-5で EmDash admin のAUDタグを控え直し、手順3-3でシークレットを登録し直す |
No Access JWT present |
手順2-3のアプリケーションのSubdomain、Domain、Pathを確認する |
JSON Web Key Set や "iss" を含むエラー |
astro.config.mjs の teamDomain を確認して修正し、npm run deploy を実行する |
シークレットは wrangler secret put を実行した時点で反映されるため、シークレットを修正した場合は再デプロイは不要です(Secrets)。
8. Claudeにコネクタを追加できない/認証に失敗する
【発生するトラブル/エラー】
カスタムコネクタを追加できない。または認証画面が表示されず、接続に失敗する。
【原因】
主に次の4つが考えられます。
- URLの末尾に
/_emdash/api/mcpが付いていない、またはサブドメインが誤っている - 手順2-4のバイパス用アプリケーションがない、またはパスが誤っている。Anthropicのクラウドからの通信がAccessに止められ、EmDashに届いていません
- Claudeの無料プランですでに別のカスタムコネクタを追加している(無料プランは1つまで)(Get started with custom connectors using remote MCP)
- ブラウザのポップアップブロックなどで、OAuthのサインイン画面が開けない
【対応手順】
- コマンドプロンプトで次のコマンドを実行し、MCPのエンドポイントがAccessを通過できるか確認する
-
HTTP/1.1 401と、WWW-Authenticate: Bearer resource_metadata=...が返ればEmDashまで届いている。401以外が返る場合や、cloudflareaccess.comを含む応答が返る場合は、Accessに止められているため、手順2-4のアプリケーションのホスト名と3つのパスを確認する - Customize > Connectors で誤って登録したコネクタを削除する(Remove または三点メニューから削除)
- 手順6-1のURLを確認し、手順6-2から登録し直す
- 無料プランで上限に達している場合は、不要なカスタムコネクタを削除する
- サインイン画面が開かない場合は、claude.aiのポップアップを許可してから再度接続する
コマンドプロンプト(MCPのエンドポイントへの到達確認)
curl -i -X POST https://hello-emdash.<サブドメイン>.workers.dev/_emdash/api/mcp
EmDashのMCPのエンドポイントは、トークンのないリクエストに 401 と、OAuthの検出先を示す WWW-Authenticate ヘッダーを返します(MCP Server Reference)。なお、カスタムコネクタは内容を直接編集できないため、URLなどを変更したいときは一度削除してから登録し直します(Get started with custom connectors using remote MCP)。
9. ClaudeのツールでINSUFFICIENT_SCOPEなどのエラーになる
【発生するトラブル/エラー】
Claudeがツールを実行すると、INSUFFICIENT_SCOPE や INSUFFICIENT_PERMISSIONS などのエラーが返る。
【原因】
同意画面で必要な権限(スコープ)を外した、またはEmDashのユーザーのロールにその操作の権限がありません。EmDashは、トークンのスコープとユーザーのロールの両方を確認し、超える操作を拒否します(AI Tools、MCP Server Reference)。
【対応手順】
- Customize > Connectors でEmDashのコネクタを削除する
- 手順6-2から登録し直し、同意画面で
content:readとcontent:writeを選択したまま承認する - 寄稿者(Contributor)など公開権限のないロールのユーザーで接続している場合は、編集者(Editor)以上のロールのユーザーで接続する
10. Claudeで更新したのに公開ページが変わらない
【発生するトラブル/エラー】
Claudeから「更新しました」と報告があったのに、公開ページの本文が古いままになっている。または ENTRY_LOCKED というエラーが返る。
【原因】
公開済みのページに対する content_update は下書きを更新するだけで、content_publish を実行するまで公開中の内容は変わりません(MCP Server Reference)。ENTRY_LOCKED は、管理画面などで同じページが編集中になっているときに返されます(同上)。
【対応手順】
- 管理画面の Preview draft で、下書きに変更が入っているか確認する
- 下書きに変更が入っていれば、手順7-3に従ってClaudeに公開を指示するか、管理画面で Publish changes を選択する
-
ENTRY_LOCKEDが返った場合は、管理画面で開いているそのページの編集画面を閉じてから、Claudeにもう一度指示する
11. 公開ページの検索やコメント、一部の画像が動かない
【発生するトラブル/エラー】
Accessにサインインしていないブラウザ(閲覧者)で公開サイトを開くと、ヘッダーの検索で結果が出ない、記事のコメントを表示・投稿できない、投稿者のアイコンなど一部の画像が表示されない。
【原因】
ブログテンプレートの公開ページは、検索(/_emdash/api/search)、コメント(/_emdash/api/comments/...)、一部の画像(/_emdash/api/media/file/...)で、/_emdash の下にあるAPIを使います。これらはEmDashが匿名でも使える公開APIとして扱っているものですが(EmDashのソースコード(auth.ts))、手順2-3で /_emdash 全体をAccessで保護したため、閲覧者のリクエストもAccessに止められます。
【対応手順】
- Zero Trust > Access controls > Applications で、Create new application > Self-hosted and private を選択する
- アプリケーション名に
EmDash public APIと入力する -
Add public hostname を3回選択し、Subdomainに
hello-emdash、Domainに<サブドメイン>.workers.devを指定して、Pathにそれぞれ_emdash/api/search、_emdash/api/comments、_emdash/api/media/fileを入力する -
Access policies で
EmDash bypassを選択し、Create を選択する
これらのパスの下にある管理者向けの操作(検索インデックスの再構築など)は、Accessをバイパスしても、EmDashがAccessのJWTを検証できなければ拒否されます。
おわりに
この記事では、EmDashの概要とMCPを介したAI連携の仕組みを整理し、手元のPCからのデプロイ、Cloudflare Accessによる管理画面の保護、Hello Worldページの公開、Claudeからの更新までを体験しました。追加したのはNode.jsだけで、GitHubも有料プランも使わずにここまで進められます。CMSにAIを「後付け」するのではなく、最初から安全な接続口が用意されている点が、EmDashの大きな魅力です。
次は、記事の下書き作成や画像の追加をClaudeに任せて、実運用に近い形を試してみてください。最後まで読んでいただき、ありがとうございました。
X(旧Twitter)でもクラウドやAI活用に関する情報を発信しています。よろしければフォローをお願いします!
https://x.com/tamaoki_tk