メディアライブラリ

メディアライブラリは、再利用可能な画像、ドキュメント、動画、音声を保存します。編集者はファイルを一度アップロードし、コンテンツフィールドや 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 はアクティブなコンテンツを含む可能性があるため、デフォルトのアップロードリストから除外されています。コンテンツモデルがより狭い選択や別の形式を必要とする場合、画像またはファイルフィールドは受け入れられるファイルタイプの独自リストを定義できます。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 を選択すると、それを参照するコンテンツエントリとサイト設定が一覧表示されます。各コンテンツ結果は参照を含むコレクションとフィールドを示し、編集のためにエントリを開けます。ゴミ箱のエントリはリストで識別されます。Site Settings の結果は、ファイルを選択する設定を示します: Logo、Favicon、または Default Social Image。

Used in は次の参照を確認します:

• 画像フィールドとファイルフィールド
• リピーター内の画像フィールド
• blocks フィールド内の画像、ファイル、Portable Text フィールド
• Portable Text フィールド内の画像ブロックとギャラリーブロック
• サイトのロゴ、ファビコン、デフォルトのソーシャル画像

使用カバレッジが完了し、ファイルにこれらの参照がない場合、リストは No tracked references found を表示します。カバレッジが完了するまで、空のリストは No usage to show yet を表示します。

コンテンツ結果が完全になる前に、メディア使用追跡が有効である必要があります。サイト設定は追跡が有効かどうかにかかわらず一覧表示されます。管理者はサイトに対して追跡を一度有効にします:

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

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 優先度ヒントを与えます。他の画像はコンポーネントの遅延読み込みデフォルトを維持してください。

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

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

ストレージとプロバイダーを設定する

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

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

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

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

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