メディアライブラリ | 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`

ストレージバックエンド

EmDashは複数のストレージバックエンドをサポートしています。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 from "emdash/astro";
import { r2 } from "@emdash-cms/cloudflare";

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コンポーネントを使用します：

---
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

外部URLでImageコンポーネントを使用するには、astro.config.mjsで許可された画像ドメインを設定します：

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

メディアの削除

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

メディアAPI

管理APIを使用してプログラム的にメディアにアクセスします。

ファイルのアップロード

メディアをマルチパートフォームデータとしてアップロードします：

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

メディアプロバイダー

ローカルストレージに加えて、EmDashは特殊な画像およびビデオホスティング用の外部メディアプロバイダーをサポートしています。メディアプロバイダーはメディアピッカーのタブとして表示され、編集者が複数のソースから選択できるようになります。

利用可能なプロバイダー

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 plain-string values)
  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はホスティングされている場所に関係なく、メディアを正しくレンダリングできます。

次のステップ

コンテンツの操作 - コンテンツでメディアを使用する
ブログを作成 - ブログ投稿に画像を追加する
コンテンツのクエリ - テンプレートでメディアを表示する