1 min read

EmDashでYouTube・Xのツイートを埋め込む方法【2026年4月時点】

emdashyoutubex20260405.webp

EmDashを使っていて「動画やXのポストを記事に埋め込みたい」と思ったとき、2026.04.05現在、WordPressのように貼り付けるだけでは動かない。この記事では、その理由と現時点での対処方法を整理する。

なぜURLを貼るだけでは動かないのか

EmDashはコンテンツをHTMLではなく Portable Text（構造化JSON） で保存する設計になっている。

WordPressはリッチテキストをHTMLとして保存するため、<iframe>タグをそのまま貼ることができた。一方EmDashでは、コンテンツはプレゼンテーション（HTML）から切り離されたJSONとして保存される。これはセキュリティ上の意図的な設計で、HTMLインジェクションのリスクを排除するためだ。

つまり、エディタにXのURL（https://x.com/user/status/...）を貼っても、それは単なるテキストリンクとして保存されるだけで、ツイートとしてレンダリングされることはない。

公式の埋め込み対応：@emdash-cms/plugin-embeds

EmDashには埋め込み用のfirst-partyプラグインが用意されている。

@emdash-cms/plugin-embeds@0.1.0
YouTube, Vimeo, Twitter/X, Bluesky, Mastodon, GitHub Gist, Link Preview に対応

このプラグインを使うことで、Portable Text内に { _type: "tweet", id: "..." } のような構造化ブロックとして埋め込みを保存・レンダリングできるようになる。

インストール

bash
npm install @emdash-cms/plugin-embeds

astro.config.mjs への追加

embedsPlugin()（PluginDescriptor）をplugins配列に渡す。

js
import cloudflare from "@astrojs/cloudflare";
import react from "@astrojs/react";
import { d1, r2 } from "@emdash-cms/cloudflare";
import { formsPlugin } from "@emdash-cms/plugin-forms";
import { embedsPlugin } from "@emdash-cms/plugin-embeds"; // 追加
import { defineConfig } from "astro/config";
import emdash from "emdash/astro";

export default defineConfig({
  output: "server",
  adapter: cloudflare(),
  integrations: [
    react(),
    emdash({
      database: d1({ binding: "DB", session: "auto" }),
      storage: r2({ binding: "MEDIA" }),
      plugins: [formsPlugin(), embedsPlugin()], // embedsPlugin()を追加
    }),
  ],
});

記事テンプレートへの追加

src/pages/posts/[slug].astro の PortableText コンポーネントに埋め込みコンポーネントを渡す。

astro
---
import { blockComponents as embedComponents } from "@emdash-cms/plugin-embeds/astro";
// ...既存のimport...
---

<!-- 変更前 -->
<PortableText value={post.data.content} />

<!-- 変更後 -->
<PortableText value={post.data.content} components={{ types: embedComponents }} />

現時点での制限（v0.1.0）

上記の設定を行ってデプロイしても、管理画面のリッチテキストエディタにツイートや動画を挿入するUIが現時点では存在しない。

ツールバーに埋め込みブロックの挿入ボタンが追加されることはなく、URLを貼ってもリンクとして保存されるだけだ。

なぜこうなっているのか

プラグインのブロック登録には2種類の経路がある。

Sandboxedプラグイン

Admin UIからワンクリック導入、エディタUIも統合

Cloudflare有料プラン（$5/mo〜）

Trustedプラグイン

astro.config.mjsに直接記述、フロントエンドのみ

Freeプランでも可

plugin-embedsのエディタUI統合（Admin上でのブロック挿入）はSandboxed（有料）経由でのみ機能する。Trustedで追加してもフロントエンドのレンダリング設定は通るが、エディタ上でtweetブロックとして入力する手段がないため、実質的に機能しない。

現実的な回避策

① 別フィールドで管理する（最も確実）

コレクションに tweet_url などのテキストフィールドを追加し、Astroテンプレート側でiframeやTwitterウィジェットとしてレンダリングする方法。記事1本につき埋め込み1件の制限はあるが、確実に動く。

② Cloudflare有料プランにアップグレードする

月$5〜のWorkers有料プランにすることで、Dynamic Workersが使えるようになり、Admin UIからSandboxedプラグインをワンクリックでインストールできる。これによりエディタUI統合も有効になる見込み。

③ 今後のアップデートを待つ

v0.1.0はリリースされたばかり（2026年4月）。Trusted経由でのエディタUI統合が今後実装される可能性がある。 GitHubのIssues で進捗を確認するとよい。

まとめ

やりたいこと現状URLを貼るだけで埋め込み❌ 不可（Portable Text設計のため）

plugin-embedsのインストール✅

Freeプランでも可フロントエンドでのレンダリング設定✅

テンプレート修正で対応可エディタ上での埋め込みブロック挿入❌

現時点では不可（v0.1.0の制限）Sandboxedプラグインの利用💰 Cloudflare有料プランが必要

EmDashはv0.1.0プレビューの段階であり、エコシステムが急速に整備されているところだ。埋め込み対応については今後のアップデートに期待したい。

No comments yet

Continue reading