AIチュートリアル

EmDash Buildで編集可能なAI生成ウェブサイトを構築・実行する

EmDash Buildが概要から編集可能なEmDashサイトとAstroサイトを生成する仕組み、Cloudflareアーキテクチャ、ローカルでの設定と実行方法を解説します。エージェントのワークフロー、検証コマンド、永続化、公開管理、セキュリティ上の考慮事項、実践的な開発のヒントも紹介します。

2026年9月29日約15分で読了

EmDash Buildとは？

EmDash Buildは、記述したブリーフを編集可能なEmDashウェブサイトに変換するオープンソースのAIサイトビルダーです。静的なページマークアップだけを生成するのではなく、構造化されたコンテンツモデルを作成し、EmDashのModel Context Protocolサーバーを通じてそのモデルにデータを入力し、コンテンツを表示する型付きAstroページとコンポーネントを書き出します。

生成されるプロジェクトには、サーバーレンダリングされたページ、構造化コンテンツ、メディアストレージ、EmDash管理画面が含まれます。初回生成後もサイトを継続して利用できます。編集者はテキストやメディアの更新、セクションの追加や複製、コンテンツブロックの並べ替え、投稿の予約、大規模なコンテンツ変更やデザイン変更のエージェントへの依頼を行えます。

重要： EmDash Buildは、ホスティングプロバイダー、ウェブサイトビルダー、プラットフォームを対象としたアルファ版のリファレンスアプリケーションです。ホストされたデモでは公開機能が無効になっています。

ホストされたデモを試すことはできますが、そこからサイトを公開することはできません。

主な機能

構造化された確認： ブリーフに重要な判断が含まれていない場合、エージェントが要点を絞った質問をします。
エージェントが設計するコンテンツモデル： 再利用可能なエンティティ用のコレクションと、編集者が並べ替えられるページセクション用の構造化ブロックを作成します。
編集可能なAstroサイト： フロントエンドでは型付きAstroコンポーネントを使用し、通常のコンテンツはEmDashから管理できます。
ライブプレビューと修復： プロジェクトは非公開のBuilderプレビューで表示されます。エージェントは同じループ内で出力を検証し、失敗を調査して修復できます。
コンテンツワークフロー： 編集者はEmDash管理画面から、テキスト、メディア、セクション、ブロック、予約済みコンテンツを管理できます。
永続的な履歴： ソースコードとローカルCMSの状態は、Cloudflare ArtifactsにGitコミットとして保存されます。
管理された公開： 検証済みの静的リリースをWorkers for Platforms向けにパッケージ化できます。ただし、オペレーターが明示的に公開を有効化して設定した場合に限られます。

アーキテクチャの仕組み

生成されるすべてのプロジェクトには、準備済みのEmDash、Astro、Tailwindプロジェクトを含むCloudflare Sandboxが割り当てられます。BuilderAgent Durable Objectが、会話とモデル・ツールのループを管理します。

エージェントはEmDash MCPツールを使ってスキーマとコンテンツを作成します。Sandbox内に公開用フロントエンドを書き込み、非公開プレビューを起動し、表示されたサイトを検証してから、ターンを完了する前にエラーを修正します。

Cloudflare Artifactsは、一貫性のある各プロジェクト状態をGit履歴として保存します。Sandboxがスリープ状態になった場合、EmDash BuildはソースコードとローカルCMSの状態を新しいコンテナに復元し、プレビューを再起動できます。

エージェントのワークフロー

理解： ブリーフを読み、重要な判断材料の不足を特定します。
モデル化： どのデータを再利用可能なコレクションにし、どのページに構造化ブロックが必要かを決定します。
構築： EmDashスキーマを作成し、生成された型を更新して、型付きAstroレンダラーを書きます。
入力： EmDash MCPツールを通じて、代表的なコンテンツとメディアを追加します。
検証： プロジェクトの型チェック、公開ルートの表示、プレビューの確認を行い、問題を修復します。
保存： 完成したプロジェクト状態をCloudflare Artifactsにコミットします。

前提条件

ローカル開発には、ローカルツールと複数のCloudflareサービスへのアクセスが必要です。開始する前に、以下を準備してください。

Node.js 24以降
pnpm 11.9
稼働中のDocker互換デーモン
Cloudflareアカウントに認証済みのWrangler
Cloudflare Workersへのアクセス
Durable Objectsへのアクセス
Cloudflare Sandboxへのアクセス
Workers AIおよびAI Gatewayへのアクセス
Cloudflare Artifactsへのアクセス
Workers for Platformsへのアクセス

プロバイダーリソースと信頼境界には慎重な設定が必要なため、アプリケーションをデプロイする前に、リポジトリのセルフホスティングガイドを読んでください。

EmDash Buildのインストールと設定

1. 依存関係をインストールする

リポジトリのルートから、ロックされた依存関係のバージョンをインストールします。

pnpm install --frozen-lockfile

2. プロバイダー設定を作成する

provider.config.example.jsonを、Gitで無視されるprovider.config.jsonファイルにコピーします。

cp provider.config.example.json provider.config.json

provider.config.jsonを開き、すべてのサンプル値をCloudflareアカウントのリソースに置き換えます。必要なリソースは、サンプル値に頼らず、セルフホスティングガイドに従って作成してください。

3. 設定を検証して生成する

事前チェックを実行し、プロバイダー固有のWrangler設定を生成します。

pnpm preflight
pnpm configure

ドキュメントに記載されたローカル起動コマンドで使用される生成済み設定はwrangler.provider.jsoncです。デプロイまたは機密性の高い環境で実行する前に、このプロバイダー固有のファイルを確認してください。

4. ローカルシークレットを設定する

開発用シークレットのテンプレートをコピーします。

cp .dev.vars.example .dev.vars

ビルダーに必要なAI Gatewayの認証情報を.dev.varsに追加します。UNSPLASH_ACCESS_KEYは任意です。追加すると、生成中にストック画像を検索できるようになります。

プロバイダーの認証情報を生成されたプロジェクト内に配置しないでください。公開はサーバーによって管理され、生成されたサイトにプロバイダーの認証情報が渡されることはありません。

5. 完全なローカルアプリケーションを起動する

生成されたプロバイダー設定でEmDash Buildを起動します：

EMDASH_WRANGLER_CONFIG=wrangler.provider.jsonc pnpm dev

開発サーバーの準備ができたら、http://localhost:5173を開きます。

6. 必要に応じてUI専用モードを起動する

インターフェースのみを作業する場合は、次を使用します：

pnpm dev:ui

このモードでは、Sandboxを利用したサイト生成は起動しません。ビルダーエージェント、プロジェクト作成、または生成されたプレビューのライブ表示をテストする場合は、完全な開発コマンドを使用してください。

基本的な使い方：概要からサイトを生成する

1. 有用な概要を書く

作成するWebサイト、その対象ユーザー、主要ページ、再利用可能なコンテンツ、希望するビジュアルの方向性を説明します。例：

アイスランドの風景写真家向けのポートフォリオサイトを作成してください。
ホームページ、再利用可能な写真コレクション、概要ページ、
編集者が並べ替えられる構造化されたページセクションを含めてください。

概要で重要な選択が未解決のままになっている場合、エージェントは具体的な確認質問をすることがあります。整合性のあるスキーマとフロントエンドを期待する前に、これらの質問に回答してください。

2. エージェントにサイトのモデル化と構築を任せる

確認後、エージェントは再利用可能なコレクションに含める情報と、構造化ブロックを使用するナラティブページを判断します。その後、EmDashスキーマを作成し、生成型を更新し、Astroレンダラーを記述して、MCPツール経由で代表的なコンテンツを追加します。

3. 非公開プレビューを確認する

Builderのライブプレビューを使用して、生成されたルートと全体的なデザインを確認します。EmDash Buildは生成されたプロジェクトを検証し、エージェントループ内で検出された問題を修復できます。

4. EmDashで編集を続ける

初期プロジェクトが使用可能になったら、通常のコンテンツをEmDash管理インターフェースで管理します。テキストやメディアの編集、セクションの追加や複製、ブロックの並べ替え、投稿のスケジュール設定ができます。より広範な構造、コンテンツ、デザインの変更が必要な場合は、エージェントに戻ります。

5. プロジェクト状態を保存・復元する

整合性のあるプロジェクト状態は、Git履歴としてCloudflare Artifactsにコミットされます。この永続化により、Sandboxがスリープして新しいコンテナが必要になった場合でも、EmDash BuildはプロジェクトソースとローカルCMS状態を復元できます。

検証と開発コマンド

変更の種類に応じて、適切なリポジトリコマンドを使用します：

pnpm devはデフォルト設定でEmDash Buildを起動します。
pnpm dev:uiはCloudflare Sandboxコンテナなしでインターフェースを起動します。
pnpm checkはアプリケーションとWorkerテストの型チェックを行います。
pnpm testはアプリケーションのテストスイートを実行します。
pnpm test:workerはWorkers統合テストスイートを実行します。
pnpm buildはデフォルト設定でEmDash Buildをビルドします。
pnpm build:providerはwrangler.provider.jsoncを使用してビルドします。
pnpm formatはoxfmtでリポジトリをフォーマットします。

コントリビューションを提出する前に、プロジェクトが推奨する完全な検証手順を実行します：

pnpm format
pnpm check
pnpm test
pnpm test:worker
pnpm build

高度なヒント

適切な開発モードを選択する

Sandboxコンテナの起動を避けられるため、インターフェースを分離して作業する場合はpnpm dev:uiを使用します。生成ワークフローの検証には使用しないでください。UI専用モードではSandboxを利用した生成を実行できません。

コンテンツ編集と構造変更を分ける

テキスト、メディア、セクション、順序の変更など通常の編集作業には、EmDash管理インターフェースを使用します。より大規模なデザインやコンテンツモデルの変更には、エージェントを使用します。これにより、構造化されたCMSデータと型付きAstroレンダリングコードの役割分担を維持できます。

プロバイダー設定を確認する

サンプルのプロバイダー設定はテンプレートとしてのみ扱ってください。すべてのサンプル値を置き換え、pnpm preflightを実行し、pnpm configureでWrangler設定を生成して、対象のCloudflareアカウント向けの出力を確認します。

公開を明示的に管理する

公開はサーバーが管理し、デフォルトでは無効になっています。運用プロバイダーがWorkers for Platforms向けに検証済みの静的リリースをパッケージ化できる状態になった場合にのみ、有効化して設定してください。ホストされているデモでも公開は無効になっています。

デプロイ前にセキュリティ境界を確認する

モデルツール、Sandbox実行、シークレット、非公開プレビュー、永続化、公開については、リポジトリの脅威モデルを参照してください。運用上の確認には運用ガイドを使用します。

リポジトリを効率的に確認する

src/workerには、Workerルート、BuilderAgent、プロンプト、ツール、永続化、公開制御が含まれています。
src/clientには、React製のBuilderインターフェース、チャット、アクティビティビュー、ライブプレビューが含まれています。
prototype/builder-cloudflareには、新規プロジェクトで使用する、準備済みの空のEmDashおよびAstroスキャフォールドが含まれています。
migrationsには、認証とプロバイダー制御用のデータベースマイグレーションが含まれています。
scriptsには、プロバイダー設定、スモークテスト、運用ヘルパーが含まれています。
testには、アプリケーションとWorkerのテストカバレッジが含まれています。
docsには、セルフホスティング、セキュリティ、運用、実装に関するドキュメントが含まれています。

まとめ

EmDash Buildは、AI支援による生成と、永続的で編集可能なCMSワークフローを組み合わせています。構造化されたEmDashコンテンツと型付きAstroコンポーネントを作成し、プライベートなCloudflare Sandboxプレビューで結果を検証して、プロジェクト履歴をCloudflare Artifactsに保存します。インフラ要件が大きいアルファ版のリファレンスアプリケーションであるため、プロバイダーのリソースを慎重に設定し、セキュリティドキュメントを確認したうえで、公開を明示的に制御してください。