メディアライブラリ | EmDash CMS Everything

EmDash には画像やドキュメントなどを管理するメディアライブラリがあります。本ガイドではアップロード、整理、コンテンツでの利用方法を説明します。

メディアライブラリを開く

管理画面のサイドバーで Media をクリックします。プレビュー、ファイル名、アップロード日時付きで一覧表示されます。

ファイルをアップロードする

メディアライブラリから

管理サイドバーで Media をクリック
Upload をクリックするか、ファイルをアップロード領域にドラッグ
コンピューターから 1 つ以上のファイルを選択
アップロード完了を待つ

コンテンツエディターから

リッチテキストエディターで画像ボタンをクリック
メディアピッカーで Upload をクリック
ローカルファイルを選択
代替テキストを入力し Insert をクリック

対応ファイル形式

EmDash は一般的な Web 向け形式をサポートします。

種類	拡張子
画像	`.jpg`, `.jpeg`, `.png`, `.gif`, `.webp`, `.avif`, `.svg`
文書	`.pdf`, `.doc`, `.docx`, `.xls`, `.xlsx`, `.ppt`, `.pptx`
動画	`.mp4`, `.webm`, `.mov`
音声	`.mp3`, `.wav`, `.ogg`

ストレージバックエンド

複数のストレージバックエンドに対応しています。Astro の設定で指定します。

Local Storage

import { defineConfig } from "astro/config";
import emdash, { local } from "emdash/astro";

export default defineConfig({
  integrations: [
    emdash({
      storage: local({
        directory: "./uploads",
        baseUrl: "/_emdash/api/media/file",
      }),
    }),
  ],
});

ファイルは ./uploads に保存されます。開発や単一サーバー向けに適しています。

Cloudflare R2

import { defineConfig } from "astro/config";
import emdash, { r2 } from "emdash/astro";

export default defineConfig({
  integrations: [
    emdash({
      storage: r2({
        binding: "MEDIA_BUCKET",
        publicUrl: "https://media.example.com",
      }),
    }),
  ],
});

wrangler.jsonc で R2 バケットを設定する必要があります。

{
	"r2_buckets": [
		{
			"binding": "MEDIA_BUCKET",
			"bucket_name": "my-media-bucket",
		},
	],
}

S3-Compatible

import { defineConfig } from "astro/config";
import emdash, { s3 } from "emdash/astro";

export default defineConfig({
  integrations: [
    emdash({
      storage: s3({
        endpoint: "https://s3.amazonaws.com",
        bucket: "my-media-bucket",
        accessKeyId: process.env.S3_ACCESS_KEY_ID,
        secretAccessKey: process.env.S3_SECRET_ACCESS_KEY,
        region: "us-east-1",
        publicUrl: "https://media.example.com",
      }),
    }),
  ],
});

Cloudflare R2（S3 API）、MinIO など S3 互換サービスで利用できます。

アップロードの流れ

EmDash は署名付き URL で安全にアップロードします。

クライアントが API にアップロード URL を要求
サーバーが有効期限付きの署名 URL を生成
クライアントがその URL 経由でストレージに直接アップロード
サーバーがファイルのメタデータをデータベースに記録

大きなファイルはアプリケーションサーバーを経由せず、クラウドストレージへ直接送れます。

メディアの整理

フォルダ

フォルダで分類できます。

メディアライブラリで New Folder をクリック
フォルダ名を入力
Create をクリック
ファイルをフォルダにドラッグ

検索

検索ボックスでファイル名を検索します。部分一致に対応します。

フィルター

次で絞り込めます。

Type — 画像、文書、動画、音声
Date — アップロード日の範囲
Folder — 特定のフォルダ

コンテンツでメディアを使う

リッチテキストエディターで

画像を入れたい位置にカーソルを置く
ツールバーの画像ボタンをクリック
メディアライブラリから選ぶか新規アップロード
代替テキストを入力
Insert をクリック

アイキャッチ画像として

エディターでコンテンツエントリを開く
サイドバーの Featured Image を探す
Select Image をクリック
メディアライブラリから選ぶかアップロード
Save をクリック

カスタムフィールドで

画像またはファイル型のフィールドは、フィールドをクリックしてメディアピッカーを開きます。

テンプレートでメディアを表示する

コンテンツデータからメディア URL を参照します。

---
import { getEmDashEntry } from "emdash";

const { entry: post } = await getEmDashEntry("posts", Astro.params.slug);
---

{post?.data.featured_image && (
  <img
    src={post.data.featured_image}
    alt={post.data.featured_image_alt ?? ""}
  />
)}

レスポンシブ画像

外部 URL に対して Astro の Image コンポーネントでレスポンシブ画像を実現します。

レスポンシブ画像

外部 URL に対して Astro の Image コンポーネントでレスポンシブ画像を実現します。

---
import { Image } from "astro:assets";
import { getEmDashEntry } from "emdash";

const { entry: post } = await getEmDashEntry("posts", Astro.params.slug);
---

{post?.data.featured_image && (
  <Image
    src={post.data.featured_image}
    alt={post.data.featured_image_alt ?? ""}
    width={800}
    height={450}
  />
)}

Tip

astro.config.mjs で許可する画像ドメインを設定し、Image コンポーネントで外部 URL を使います。

export default defineConfig({
	image: {
		domains: ["media.example.com"],
	},
});

メディアの削除

削除するファイルを選択
Delete をクリック
削除を確認

メディア API

管理 API からプログラムでメディアにアクセスします。

ファイルをアップロード

multipart/form-data でアップロードします。

POST /_emdash/api/media
Content-Type: multipart/form-data
Authorization: Bearer YOUR_API_TOKEN

file=<binary file data>

レスポンス例：

{
	"success": true,
	"data": {
		"item": {
			"id": "01ABC123",
			"filename": "hero-image.jpg",
			"mime_type": "image/jpeg",
			"storage_key": "media/abc123/hero-image.jpg",
			"width": 1200,
			"height": 800
		}
	}
}

メディアを一覧

GET /_emdash/api/media?prefix=images/&limit=20
Authorization: Bearer YOUR_API_TOKEN

メディアを削除

DELETE /_emdash/api/media/images/hero.jpg
Authorization: Bearer YOUR_API_TOKEN

メディアプロバイダー

ローカルストレージに加え、専用の画像・動画ホスティング向け外部プロバイダーに対応しています。メディアピッカーではタブとして表示されます。

利用可能なプロバイダー

Cloudflare Images

Cloudflare Images は画像ホスティングに自動最適化、リサイズ、フォーマット変換を提供します。

import { defineConfig } from "astro/config";
import emdash from "emdash/astro";
import { cloudflareImages } from "@emdash-cms/cloudflare";

export default defineConfig({
  integrations: [
    emdash({
      // ... database, storage config
      mediaProviders: [
        cloudflareImages({
          accountId: import.meta.env.CF_ACCOUNT_ID,
          apiToken: import.meta.env.CF_IMAGES_TOKEN,
          // Optional: custom delivery domain
          deliveryDomain: "images.example.com",
        }),
      ],
    }),
  ],
});

機能：

管理画面から画像の閲覧とアップロード
自動最適化とフォーマット変換
URL ベースの変換（サイズ、切り抜き、フォーマット）
柔軟なレスポンシブバリアント

Cloudflare Stream

Cloudflare Stream は HLS/DASH アダプティブストリーミング向けの動画ホスティングを提供します。

import { defineConfig } from "astro/config";
import emdash from "emdash/astro";
import { cloudflareStream } from "@emdash-cms/cloudflare";

export default defineConfig({
  integrations: [
    emdash({
      // ... database, storage config
      mediaProviders: [
        cloudflareStream({
          accountId: import.meta.env.CF_ACCOUNT_ID,
          apiToken: import.meta.env.CF_STREAM_TOKEN,
          // Optional: player settings
          controls: true,
          autoplay: false,
          loop: false,
        }),
      ],
    }),
  ],
});

機能：

管理画面から動画の閲覧・検索・アップロード
HLS と DASH アダプティブストリーミング
サムネイルの自動生成
大容量ファイルのダイレクトアップロード

複数のプロバイダー

複数設定でき、それぞれがピッカー内のタブとして表示されます。

import { defineConfig } from "astro/config";
import emdash from "emdash/astro";
import { cloudflareImages, cloudflareStream } from "@emdash-cms/cloudflare";

export default defineConfig({
  integrations: [
    emdash({
      database: d1({ binding: "DB" }),
      storage: r2({ binding: "MEDIA" }),
      mediaProviders: [
        cloudflareImages({
          accountId: import.meta.env.CF_ACCOUNT_ID,
          apiToken: import.meta.env.CF_IMAGES_TOKEN,
        }),
        cloudflareStream({
          accountId: import.meta.env.CF_ACCOUNT_ID,
          apiToken: import.meta.env.CF_STREAM_TOKEN,
        }),
      ],
    }),
  ],
});

ローカルメディアライブラリ（「Library」タブ）は、設定したプロバイダーと常に併用できます。

プロバイダーメディアのレンダリング

Image コンポーネントでレンダリングします。

---
import { Image } from "emdash/ui";
import { getEmDashEntry } from "emdash";

const { entry: post } = await getEmDashEntry("posts", Astro.params.slug);
---

{post?.data.featured_image && (
  <Image
    image={post.data.featured_image}
    width={800}
    height={450}
  />
)}

コンポーネントは次を行います。

保存値からプロバイダーを判定
最適化された <img> を出力
プロバイダー固有の最適化を適用（例：Cloudflare Images の変換）

MediaValue 型

メディアフィールドはプロバイダー情報を含む MediaValue オブジェクトを保存します。

interface MediaValue {
  provider?: string;    // Provider ID, defaults to "local"
  id: string;           // Provider-specific ID
  src?: string;         // Direct URL (for local media or legacy data)
  previewUrl?: string;  // Preview URL for admin display (external providers)
  filename?: string;    // Original filename
  mimeType?: string;    // MIME type
  width?: number;       // Image/video width
  height?: number;      // Image/video height
  alt?: string;         // Alt text
  meta?: Record<string, unknown>; // Provider-specific metadata
}

ホスティング先に関わらず、EmDash が正しくレンダリングできます。

次のステップ

Working with Content — コンテンツでメディアを使う
Create a Blog — 投稿に画像を追加
Querying Content — テンプレートでメディアを表示