Studioの移行先候補EmDashはどんな技術(Astro、TypeScript)で動いていますか?

結論

EmDashは、WebフレームワークのAstroを土台に据え、TypeScriptで記述されたフルスタックCMSです。PHPや従来のWordPressのコードは含まず、Cloudflare WorkersやNode.jsなどの環境で動作し、管理画面からAPIやテンプレートまでを一体で提供します。

EmDashへの移行更新日

EmDashはどの技術の組み合わせで動いていますか?

EmDashを動かす技術基盤には、どのような要素が含まれているのでしょうか。EmDashは、WebフレームワークのAstroを基盤にしたTypeScript製のフルスタックCMSです。CMSと表示用のサイトを別々のサービスでつなぐのではなく、ひとつのプロジェクトにまとまっています。

動かす場所は2通りあります。Cloudflareで動かすなら、Workers、データベースのD1、ファイル保存のR2を組み合わせます。ただ、Cloudflareは必須ではありません。Node.jsのサーバーとSQLiteの組み合わせでも動きます。データベースの選択肢にはCloudflare D1のほか、SQLite、Turso/libSQL、PostgreSQLが用意されています。ファイル保存先もCloudflare R2に限らず、AWS S3や各種S3互換サービス、ローカルのファイルシステムから選択可能です。SQLの操作はKysely、保存先の操作はS3 APIという共通の仕組みを通すため、あとから乗せ替えやすい作りになっていますね。どちらの構成もEmDashの公式リポジトリに載っています。

プラグインのうちサンドボックス型のものは、本体から切り離して動きます。CloudflareではWorker Loader経由のDynamic Workerで、Node.jsでは別プロセスのworkerdの中で実行されます。なお、Workers for Platformsを利用するホスティング事業者のコンテンツ管理基盤としても利用可能です。

試すだけなら、npm create emdash@latestで新しいサイトを作り、Node.jsとStarterテンプレートを選びます。SQLiteとローカル保存で動くので、クラウドのアカウントがなくても手元で始められます。

Astroで作られていることはStudioからの移行で何が有利ですか?

Studioから離れるとき、今の記事のURLが変わって検索順位に響かないかを心配する人は多いはずです。StudioのCMSでは、動的ページのURLは固定のパスと記事ごとのslugで決まります。Astroはページファイルのパラメータからルートを作れるので、Studioと同じパスとslugになるようにページを用意すれば、移行前と同じURLの形を保てます。検索エンジンからの評価やブックマークを損なわずに済むのは助かりますね。ドメインも同じにする必要があり、自動で引き継がれるわけではありません。

EmDashはAstroの統合機能(Integration)として組み込めるため、設定ファイルに追加するだけで管理画面、REST API、ユーザー認証、メディアライブラリ、プラグイン機能がまとめて提供されます。記事の読み込みには、一覧ならgetEmDashCollection()、1件ならgetEmDashEntry()を使います。どちらもリクエストのたびに内容を読みにいくため、記事を公開するたびにサイト全体を作り直す必要がありません(記事の取り出し方)。

同梱されたテンプレートはAstroのserver出力を利用しており、記事を公開した次のアクセスで最新の公開版が画面へ反映されます。保存した下書きは、正式に公開されるか有効なプレビューURLから要求されるまで外部に露出しないため、安全な執筆フローを維持できます。

更新担当の人にとっては、管理画面で記事を書ける点がStudioに近く、慣れやすいでしょう。ローカルでの検証時は、ブラウザで手元の開発サーバーの「/_emdash/admin」を開くだけで直感的な管理画面へアクセスできます。一方で、ページの見た目はAstroのページとして作る必要があり、Studioのデザインはそのまま持ってこられません。

EmDash(Astro)にPagefindを入れて日本語検索を実現できますか?

EmDashには、FTS5を使った全文検索が最初から入っています。Pagefindはこれとは別の仕組みで、出来上がった静的HTMLを読み込んで検索用の索引を作ります。

Pagefindは静的HTMLであれば何にでも使えます。そのため、検索させたいページをHTMLとして書き出せる構成なら、EmDashのサイトにも組み込めます。手順は、検索の入力欄をページに置き、サイトをビルドしてから、出力先のフォルダを--siteで指定して索引を作る流れです。本番では、ビルドの後、デプロイの前に毎回実行します(Pagefindの導入手順)。公式の例にあるpublicはあくまで例なので、自分のサイトの出力先に置き換えてください。

日本語検索に関しても、CJK(日中韓)の単語分割に対応した拡張機能が「npx pagefind」の既定構成に含まれており、分かち書きのない日本語テキストを分割して処理します。ただし語幹処理には対応していないので、活用形の違いまでは拾ってくれません。言語判定はhtml要素のlang属性を見て行われるため、日本語ページ側の指定を揃えておきましょう。

とはいえ、EmDashはLive Collectionsによって再ビルドなしで最新記事を画面に出せますが、Pagefindで検索できるようにするには、HTMLの書き出しと索引生成の手順を踏む必要があります。実際、Astroで構築されたドキュメント基盤のStarlightでも検索画面にPagefindが採用されています。

EmDashの技術構成で注意する点は何ですか?

EmDashはCloudflareでしか使えないのでしょうか。実際にはNode.jsの環境でも動き、データベースもSQLite、libSQL、PostgreSQLを使えます。プラグインの切り離し実行も、Node.jsではworkerdを別プロセスで起動する形で行われます。ただし、すべてのプラグインが自動で切り離されるわけではありません。

あわせて、Studioではサーバーやデータベースの保守をプラットフォーム側に任せられましたが、EmDashの運用チームはデータベース、メディア保存先、バックアップ、バージョン更新、管理画面を含むアプリケーション全体の保守を自前で担います。記事を書く人全員が開発できる必要はありませんが、運用の担当者は決めておいたほうがいいでしょう。

WordPressからの乗り換えも考えている場合は、テーマとプラグインに注意が必要です。EmDashではWordPressのテーマもプラグインも動きません。記事は取り込めますが、デザインや独自の機能はAstroとEmDash向けに作り直すことになります(EmDashを選ぶ理由)。

ところで、CloudflareはEmDash 1.0を安定版として発表しました。本体コアはセマンティックバージョニングに従いますが、公式プラグインや開発ツール群は0.x台にとどまっており、マイナーアップデートでも仕様変更が生じる余地がある点に留意してください。

もうひとつ、データベースにCloudflare D1を採用する場合は性能特性に配慮が必要です。Cloudflare D1の制限事項に記載されている通り、D1の各データベースはクエリを一つずつ順番に処理する仕様であり、全体の処理能力は個々のクエリの実行時間に左右されます。クエリが滞留しないような設計を意識したいですね。

こんな聞き方も

  • EmDashはどんな技術(Astro、TypeScript)で動いていますか?
  • emdash 仕組み astro typescript
  • EmDash(Astro)にPagefindを入れて日本語検索を実現できますか?
  • emdash pagefind 日本語 検索
  • emdash astro
  • emdash typescript

あわせて知りたい(関連する疑問)

QEmDashはWordPressのコードを使っていますか?

WordPressの代わりとして紹介されることの多いEmDashですが、WordPressのコードは使われていません。長年の歴史を持つWordPressのコードベースを受け継いだり、PHPスクリプトを流用したりして作られたものではありません。開発元のCloudflareが、EmDashの開発にWordPressのコードを使っていないとEmDashの発表記事で明言しています。

ライセンスも違います。EmDash本体はMITライセンスのオープンソースとして、GitHubで公開されています。

作り方も、WordPressとは別物です。EmDashはAstroを土台にTypeScriptで書かれたフルスタックのCMSです。WordPressのコードは使っていませんが、すべてを自前で作ったわけではなく、Astroという既存のフレームワークの上に組まれています。

新しく始めるときは、npm create emdash@latestで新規プロジェクトを作ります。これは空のサイトを作る手順で、Studioのデータを移すためのコマンドではありません。

QEmDashはPHPで動きますか?

WordPressのように、PHPが使えるレンタルサーバーに置けばいいのでしょうか。答えはいいえで、EmDashはPHPで動くCMSではありません。Astroを土台にした、TypeScript製のCMSです。PHPのバージョン更新や拡張モジュールの管理、PHP特有のセキュリティ対策に頭を悩ませてきた方にとっては、大きな違いを感じる部分ですね。

EmDashの主な実行基盤は、Cloudflare WorkersやNode.js環境です。Cloudflare上ではエッジ環境のWorkers、リレーショナルデータベースのD1、メディア保存のR2を組み合わせてサーバーレスに動作します。一方、自前のサーバーや一般的なホスティング環境で動かす場合は、Node.jsサーバーと軽量なSQLiteを組み合わせて運用可能です。使えるデータベースはこの2種類だけではなく、libSQLやPostgreSQLも選べます。

PHP前提のレンタルサーバーしか契約していない場合は、そのままでは置けません。Node.jsを動かせるサーバーか、Cloudflareのアカウントを別途用意する必要があります。

手元で試す準備も、PHPの環境は不要です。Node.jsとnpmを用意して、公式の入門手順にあるnpm create emdash@latestを実行すれば、新しいプロジェクトができます。

QEmDashはAIツールから操作できますか?

できます。EmDashはMCPサーバーを内蔵していて、MCPに対応したAIツールから記事の下書き、編集、検索などを行えます。

つなぎ方はシンプルです。AIツールの接続先に、自分のサイトのドメインに「/_emdash/api/mcp」を続けたアドレスを登録し、OAuthか個人アクセストークンで認証します(AIツールとの接続方法)。管理画面にログインしているだけでは、MCPの認証にはなりません。

権限の面も気になるところです。AIツールからの呼び出しは、発行されたトークンの許可範囲と操作者のアカウント権限の両方によって制限されます。どちらかの権限が不足している場合、EmDash側がツール呼び出しを即座に拒否するため、AIによる意図しない公開や削除を防げます。AIをつないだからといって、管理者の権限が自動で渡ることはありません。

また、MCPだけでなく専用のCLIやREST APIも用意されているため、独自に作成した自動化スクリプトや外部の自律エージェントからプログラム経由でサイトを操作することも可能です。

Studioから移る人にとっては、記事の登録や修正の一部をAIに任せられるのは新しい選択肢になるでしょう。ただ、AIが触れるのはあくまで記事などのコンテンツで、ページのデザインを変える作業は別になります。

QAstroを知らなくてもEmDashは使えますか?

記事の執筆担当者やWeb運用の現場スタッフがAstroの知識を持っていなくても、EmDashを問題なく扱えるのでしょうか。記事を書いて公開するだけなら、Astroを知らなくても使えます。すでに出来上がっているEmDashのサイトでは、編集者はAstroのファイルに触らず、管理画面で記事の作成・更新・公開を行います。開発者はAstroでサイトを作り、編集者は管理画面で記事を扱う、という分担が前提です。

非エンジニアであっても、管理画面のUIからコンテンツの種類やカスタム入力項目を作成・変更できる設計になっています。ただし、項目を増やしても、それをページのどこにどう表示するかはAstro側の実装で決まります。入力欄を足すことと、画面に出すことは別の作業です。

一方で、デザインの変更やページの新規設計を行う立場なら、Astroの知識が必要になります。EmDashのテーマはAstroプロジェクトそのものであり、テンプレートの導入後にページや共通コンポーネントを修正するには、プロジェクト内のコードファイルを直接編集しなければなりません。

新しいサイトは公式のテンプレートから始められ、手元ではnpm create emdash@latestで作成します。記事を書くだけの人がこの操作をする必要はありません。ちなみに、Cloudflareは、AIがAstroのページを作るEmDash Buildのアルファ版も出していますが、通常の管理画面とは別のものです。

出典

この内容をChatGPTで相談

無料診断