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

EmDashには画像、ドキュメント、その他のファイルを管理するメディアライブラリが含まれています。このガイドでは、コンテンツでのメディアのアップロード、整理、使用について説明します。

メディアライブラリへのアクセス

管理サイドバーの Media をクリックしてメディアライブラリを開きます。ライブラリにはアップロードされたすべてのファイルがプレビュー、ファイル名、アップロード日付とともに表示されます。

ファイルのアップロード

メディアライブラリから

管理サイドバーの Media をクリック
Upload をクリックするか、アップロードエリアにファイルをドラッグ
コンピューターから1つまたは複数のファイルを選択
アップロードの完了を待つ

コンテンツエディタから

リッチテキストエディタで画像ボタンをクリック
メディアピッカーの Upload をクリック
コンピューターからファイルを選択
代替テキストを追加して挿入をクリック

サポートされるファイルタイプ

EmDashは一般的なWebファイルタイプをサポートしています：

カテゴリ	拡張子
画像	`.jpg`, `.jpeg`, `.png`, `.gif`, `.webp`, `.avif`, `.svg`
ドキュメント	`.pdf`, `.doc`, `.docx`, `.xls`, `.xlsx`, `.ppt`, `.pptx`
動画	`.mp4`, `.webm`, `.mov`
音声	`.mp3`, `.wav`, `.ogg`

ストレージバックエンド

EmDashは複数のストレージバックエンドをサポートしています。Astro設定でストレージを構成します：

ローカルストレージ

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

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 をクリック
フォルダ名を入力
作成をクリック
ファイルをフォルダにドラッグして整理

検索

検索ボックスを使用してファイル名でファイルを検索します。検索は部分的なファイル名にもマッチします。

フィルタ

メディアをフィルタリング：

タイプ - 画像、ドキュメント、動画、音声
日付 - アップロード日付範囲
フォルダ - 特定のフォルダ

コンテンツでメディアを使用する

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

画像を配置したい場所にカーソルを置く
ツールバーの画像ボタンをクリック
メディアライブラリから画像を選択するか、新しい画像をアップロード
代替テキストを入力
挿入をクリック

アイキャッチ画像として

エディタでコンテンツエントリを開く
サイドバーの Featured Image フィールドを見つける
画像を選択 をクリック
メディアライブラリから選択またはアップロード
保存をクリック

カスタムフィールドで

画像またはファイルタイプとして設定されたフィールドでは、フィールドをクリックしてメディアピッカーを開きます。

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

コンテンツデータからメディア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 ?? ""}
  />
)}

レスポンシブ画像

EmDashメディアフィールドには、emdash/ui の 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}
    priority
  />
)}

priority はファーストビューのメイン画像用です。loading="eager" と fetchpriority="high" を設定します。loading はロードを遅延させるかどうかを制御し、fetchpriority はブラウザにリクエストの優先度ヒントを与えます。

メディアの削除

削除したいファイルを選択
削除をクリック
削除を確認

メディア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({
      // ... データベース、ストレージ設定
      mediaProviders: [
        cloudflareImages({
          accountId: import.meta.env.CF_ACCOUNT_ID,
          apiToken: import.meta.env.CF_IMAGES_TOKEN,
          // オプション: カスタム配信ドメイン
          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({
      // ... データベース、ストレージ設定
      mediaProviders: [
        cloudflareStream({
          accountId: import.meta.env.CF_ACCOUNT_ID,
          apiToken: import.meta.env.CF_STREAM_TOKEN,
          // オプション: プレーヤー設定
          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;    // プロバイダーID、デフォルトは "local"
  id: string;           // プロバイダー固有のID
  src?: string;         // 直接URL（ローカルメディアまたはプレーン文字列値用）
  previewUrl?: string;  // 管理画面表示用のプレビューURL（外部プロバイダー）
  filename?: string;    // 元のファイル名
  mimeType?: string;    // MIMEタイプ
  width?: number;       // 画像/動画の幅
  height?: number;      // 画像/動画の高さ
  alt?: string;         // 代替テキスト
  meta?: Record<string, unknown>; // プロバイダー固有のメタデータ
}

これにより、EmDashはホスティング場所に関係なくメディアを正しくレンダリングできます。

次のステップ

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