メディアライブラリ

メディアライブラリは再利用可能な画像、ドキュメント、ビデオ、オーディオを保存します。エディターはファイルを一度アップロードし、コンテンツフィールドや Portable Text から選択し、どのコンテンツエントリがローカルメディアアイテムを参照しているかを確認できます。

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

管理サイドバーで Media を選択します。メインライブラリにはフォルダに配置されていないフォルダとファイルが含まれます。フォルダを選択してファイルを閲覧するか、グリッドビューとリストビューを切り替えます。

サイトに外部メディアプロバイダーがある場合、各プロバイダーは別のソースとして表示されます。プロバイダーの機能はさまざまです：ソースは閲覧と選択をサポートしていてもフォルダ、ローカル画像編集、削除はサポートしていない場合があります。

ファイルのアップロード

ライブラリからアップロード

アップロードはファイルが追加されるとすぐに開始します。新しいローカルファイルは、アップロード前に別のフォルダが開かれていてもメインライブラリに入ります。

コンテンツ編集中のアップロード

画像、ファイル、ギャラリー、Portable Text 画像フィールドはメディアピッカーを使用します。フィールドを開き、Upload files を選択してファイルを選択またはドロップします。完了したアップロードは現在の選択の一部になります。失敗したアップロードは再試行または削除できるよう表示されたままになります。

ギャラリーの場合、Selected media を確認し、移動コントロールを使用して Add images を選択する前に順序を設定します。単一の画像またはファイルの場合、アップロード完了後に Select または Insert image を選択します。

受け入れファイルとサイズ制限

ローカルメディアライブラリはデフォルトで以下のファイルグループを受け入れます：

• PNG、JPEG、GIF、WebP、AVIF 画像；
• MP4、WebM、QuickTime ビデオなどの一般的なビデオ形式；
• MP3、WAV、Ogg オーディオなどの一般的なオーディオ形式；
• PDF ドキュメント。

SVG はデフォルトのアップロードリストから除外されています。SVG ファイルにはアクティブなコンテンツが含まれる可能性があるためです。コンテンツモデルがより狭い選択肢や別の形式を必要とする場合、画像またはファイルフィールドは独自の受け入れファイルタイプリストを定義できます。EmDash は各ファイルをそのメディアタイプ（image/png や application/pdf などのラベル）で識別し、コンテンツが保存される時にフィールドのリストを再度チェックします。ブラウザのファイル選択ダイアログを変更しても、そのサーバーチェックは回避できません。

デフォルトの最大サイズはファイルあたり 50 MB です。サイト開発者は maxUploadSize で変更できます。プロバイダーは追加のフォーマットまたはサイズ制限を課す場合があり、そのエラーをアップロード行で報告します。

ファイルの検索と整理

検索は部分的なファイル名にマッチします。タイプフィルターは結果を画像、ドキュメント、ビデオ、またはオーディオに限定します。ファイル名検索はフォルダが開いている場合でもローカルライブラリ全体をカバーします。検索なしでフォルダを閲覧すると、そのフォルダに割り当てられたファイルのみが表示されます。

エディターはメインライブラリで Add new folder を選択できます。ローカルファイルをカードまたは行を表示されているフォルダにドラッグして移動するか、ファイルを開いて Location を変更し Save を選択します。ファイルを現在のフォルダから削除するには Main library をロケーションとして使用します。

著者はアップロードしたローカルファイルを移動できます。エディターは任意のローカルファイルを移動できます。外部プロバイダーのアイテムはメディアライブラリフォルダに割り当てできません。

フォルダを削除すると、そのファイルはメインライブラリに戻ります。ファイルの削除、URL の変更、コンテンツ参照の削除は行いません。

コンテンツ用のメディアを選択する

Portable Text 画像

Portable Text フィールドにカーソルを置き、ブロックメニューを開いて Image を選択します。画像を選択またはアップロードし、Insert image を選択します。その後画像ブロックを選択して代替テキスト、キャプション、表示サイズ、配置を追加します。

画像フィールドとファイルフィールド

Select image や Select file などのフィールドアクションを選択し、アイテムを選んで選択を確認します。フィールドの MIME タイプルールは、表示されるライブラリアイテムとメディアソースを制限します。

ブログテンプレートの featured_image フィールドは選択したメディア値を投稿とともに保存します。エントリを保存するとその参照が下書きに保存されます。公開すると公開コンテンツクエリで利用可能になります。

ギャラリーフィールド

1つ以上の画像を選択し、Selected media の下に並べて確認します。ギャラリーは複数の位置がメディアライブラリアイテムを参照している場合でも、独自の順序と画像ごとの代替テキストとキャプションを保持します。

コンテンツで使用されている画像を編集する

選択したローカル画像は異なるスコープのアクションを提供します：

• Replace はこのフィールド、ブロック、またはギャラリーの位置に別のメディアライブラリアイテムを選択します。元のアイテムを使用する他のエントリは変更されません。
• Edit asset は基となるメディアライブラリアイテムを開きます。メタデータの変更と破壊的な画像変更は、そのアイテムの他の使用に影響を与える可能性があります。
• Remove はこのコンテンツ参照をクリアします。メディアライブラリアイテムは引き続き利用可能です。

Edit asset がクロップコピーを作成すると、ピッカーは現在の使用用に新しいコピーを選択します。Portable Text とギャラリー画像はその使用の代替テキスト、キャプション、レイアウト、位置を保持します。Edit asset がオリジナルを置き換えると、メディア ID は同じままなので、そのアイテムのすべての使用が変更された画像を受け取ります。

外部プロバイダー画像とファイルフィールドは Replace と Remove を提供しますが、ローカルアセットエディターは開きません。

ローカル画像を置き換える

Replace image は既存のメディアライブラリアイテムの背後に新しいバイトをアップロードします。アイテムを参照するすべての場所が画像の新しいバージョンを表示すべき場合に使用します。

このアクションは準備完了の JPEG、PNG、WebP アイテムで利用可能です。著者はアップロードした画像を置き換えることができます。エディターは任意のローカル画像を置き換えることができます。

EmDash はメディア ID、ファイル名、URL、代替テキスト、キャプション、フォルダを保持します。そのため既存のコンテンツ参照は引き続き機能し、置き換えを表示します。置き換えは保存されたフォーカルポイントをクリアします。その座標が新しい画像を記述していない可能性があるためです。

1つのフィールドまたは画像ブロックのみを変更する場合は、代わりにコンテンツエディターで Replace を使用します。

フォーカルポイントを設定する

フォーカルポイントは、レイアウトが正方形、横長、縦長、その他の固定形状に画像をクロップする際に表示されたままにすべき画像の部分をマークします。

カスタムポイントを削除するには Reset を選択します。フィールドまたはギャラリー用に画像を選択すると、EmDash はアセットの現在のフォーカルポイントをそのコンテンツ値にコピーします。すでに画像を使用しているコンテンツは、画像を再度選択するまで保存されたポイントを保持します。コンテンツフィールドから Edit asset を開くと、保存したポイントでその現在の使用を更新します。

ローカル画像をクロップする

クロップは EmDash が保存する準備完了の JPEG、PNG、WebP 画像で利用可能です。外部プロバイダー画像はローカルアセットエディターでクロップできません。

Replace original は Original アスペクト比でのみ利用可能です。Freeform とその他の比率には Create cropped copy を使用します。クロップコピーはソースと同じフォルダに留まり、一意のファイル名を受け取ります。

アニメーション WebP をクロップすると静止 WebP が作成されます。クロップ結果はアニメーションを保持しません。

ファイルの使用場所を確認する

ローカルファイルを開いて Used in を選択すると、それを参照するコンテンツエントリが一覧表示されます。各結果は参照を含むコレクションとフィールドを示し、編集用にエントリを開くことができます。ゴミ箱に入ったエントリはリストで識別されます。

このリストが完全になるためには、メディア使用追跡がアクティブである必要があります。管理者がサイトに対して一度有効にします：

有効にすると、メディア使用追跡はオフにできません。キャプチャがアクティブになった後、新しいコンテンツの変更が追跡されます。バックグラウンドスキャンは既に存在していたエントリからの参照を追加します。

Used in ビューがインデックスが実行中、古い、部分的、または失敗したと報告する場合、その結果を不完全として扱います。管理者は Media usage tracking に戻って現在のステータスとリカバリガイダンスを確認できます。

テンプレートで画像をレンダリングする

画像フィールドはプレーン URL ではなくメディア値を返します。emdash/ui の Image でその値をレンダリングし、ローカルおよびプロバイダーバックの画像が適切な URL、サイズ、フォーカルポイント、レスポンシブバリアント、低品質プレースホルダーを使用するようにします：

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

const { entry: post, error } = await getEmDashEntry("posts", Astro.params.slug);
if (error) return new Response("Unable to load post", { status: 500 });
if (!post) return Astro.redirect("/404");
---

{post.data.featured_image && (
  <Image image={post.data.featured_image} width={1200} height={675} priority />
)}

priority はページ上部に表示されるメイン画像にのみ使用します。eager ローディングを要求し、ブラウザに高い fetch-priority ヒントを与えます。他の画像はコンポーネントのデフォルトの lazy-loading を保持すべきです。

フィールドにダークモードの対応物がある場合、Image は両方のソースをレンダリングし、訪問者のカラースキームから1つを選択します。フィールドとテンプレートの設定についてはダークモード画像を参照してください。

テンプレートはメディアライブラリへの追加クエリなしに、コンテンツ参照とともに保存されたメディアメタデータを受け取ります。カスタム統合がプロバイダーの最新メタデータを必要とする場合、そのアイテムを明示的にリクエストし、コレクションページで画像ごとに1回のプロバイダー検索を避けます。フィールドタイプリファレンスは保存されたファイルと画像の値を説明します。

ストレージとプロバイダーの設定

ローカルライブラリはサイトの設定されたストレージアダプターを通じてファイルを保存します。Node.js サイトはローカルディスクまたは S3 互換ストレージを使用できます。Cloudflare サイトは一般的に R2 バインディングを使用します。アダプターはバイトの保存場所を決定し、メディアライブラリは同じオーサリングワークフローを維持します。設定と本番環境の永続性要件についてはメディアストレージを参照してください。

Cloudflare Images と Cloudflare Stream は外部メディアプロバイダーとして登録できます。ピッカーでソースとして表示され、Image はプロバイダーバックの画像値を理解します。プロバイダーアイテムはそのサービスによって管理されたままなので、ローカルフォルダ、フォーカルポイント、クロップ、置き換えは EmDash アセットエディターでそれらのアイテムには利用できません。

メディアを安全に削除する

メディアライブラリでファイルを開き、Delete を選択して永久削除を確認します。著者はアップロードしたローカルファイルを削除できます。エディターは任意のローカルファイルを削除できます。プロバイダーアイテムは、そのソースが削除を公開し、現在のユーザーに権限がある場合にのみプロバイダーから削除されます。

自動化されたアップロードとメディア管理については、メディアエンドポイントリファレンスまたは CLI メディアコマンドを参照してください。選択したメディアを使用するエントリを公開するにはコンテンツの操作に進んでください。