メディアライブラリ

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

管理画面のサイドバーで「メディア」を選択します。「メインライブラリ」には、フォルダーと、フォルダーに入れていないファイルがあります。フォルダーを選択するとそのファイルを閲覧でき、グリッド表示とリスト表示を切り替えられます。

サイトに外部のメディアプロバイダーがある場合は、プロバイダーごとに別のソースとして表示されます。プロバイダーによってできることは異なり、閲覧と選択はできても、フォルダー、ローカルでの画像編集、削除には対応していない場合があります。

ファイルのアップロード

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

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

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

画像、ファイル、ギャラリーのフィールドと、Portable Textの画像のフィールドでは、メディアピッカーを使います。フィールドを開き、「Upload files」を選択して、ファイルを選ぶかドロップします。完了したアップロードは、現在の選択に加わります。失敗したアップロードは表示されたまま残るため、再試行するか削除できます。

ギャラリーの場合は、「Selected media」を確認し、移動の操作部品で順番を決めてから「画像を追加」を選択します。画像やファイルが1つの場合は、アップロードが終わってから「選択」または「Insert image」を選択します。

受け付けるファイルとサイズの上限

ローカルのメディアライブラリは、既定で次の種類のファイルを受け付けます。

• PNG、JPEG、GIF、WebP、AVIFの画像
• MP4、WebM、QuickTimeなどの一般的な動画の形式
• MP3、WAV、Oggなどの一般的な音声の形式
• PDFのドキュメント

SVGファイルは実行可能な内容を含むことがあるため、SVGは既定のアップロードの一覧から除外されています。コンテンツモデルで、より狭い範囲や別の形式を選ばせる必要がある場合は、画像やファイルのフィールドで、受け付けるファイルの種類を独自に定義できます。EmDashは、image/png や application/pdf のようなメディアタイプで各ファイルを識別し、コンテンツを保存するときにフィールドの一覧と改めて照合します。ブラウザーのファイル選択画面を変えても、このサーバーでの確認は回避できません。

既定の上限は、1ファイルあたり50MBです。サイトの開発者は、maxUploadSizeでこの上限を変更できます。プロバイダーが形式やサイズの制限を別に設けている場合があり、その場合の失敗はアップロードの行に表示されます。

ファイルの検索と整理

検索では、ファイル名の一部で一致するものが見つかります。種類の絞り込みでは、画像、ドキュメント、動画、音声のいずれかに結果を絞れます。ファイル名での検索は、フォルダーを開いているときでもローカルのライブラリ全体が対象です。検索せずにフォルダーを閲覧した場合は、そのフォルダーに割り当てたファイルだけが表示されます。

編集者は、「メインライブラリ」で「新しいフォルダーを追加」を選択できます。ローカルのファイルを移動するには、そのカードや行を表示中のフォルダーにドラッグするか、ファイルを開いて「保存場所」を変更し、「保存」を選択します。ファイルを今のフォルダーから外すには、保存場所に「メインライブラリ」を指定します。

投稿者は、自分がアップロードしたローカルのファイルを移動できます。編集者は、すべてのローカルのファイルを移動できます。外部のプロバイダーの項目は、メディアライブラリのフォルダーに割り当てられません。

フォルダーを削除すると、その中のファイルは「メインライブラリ」に戻ります。ファイルは削除されず、URLも変わらず、コンテンツからの参照も外れません。

コンテンツで使うメディアの選択

Portable Textの画像

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

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

「画像を選択」や「ファイルを選択」などのフィールドの操作を選択し、項目を選んで選択を確定します。フィールドのMIMEタイプのルールによって、表示されるライブラリの項目とメディアのソースが絞られます。

ブログテンプレートの featured_image フィールドは、選択したメディアの値を投稿と一緒に保存します。エントリーを保存すると、その参照が下書きに保存されます。公開すると、公開用のコンテンツのクエリからその参照を使えるようになります。

ギャラリーのフィールド

1つ以上の画像を選択し、「Selected media」で並べて確定します。ギャラリーは、独自の並び順と、画像ごとの代替テキストとキャプションを持ちます。複数の位置でメディアライブラリの項目を参照している場合も同じです。

コンテンツで使っている画像の編集

選択したローカルの画像には、影響する範囲が異なる操作があります。

• 「置き換え」は、このフィールド、ブロック、ギャラリーの位置で使うメディアライブラリの項目を、別のものに変えます。元の項目を使っているほかのエントリーは変わりません。
• 「Edit asset」は、元になっているメディアライブラリの項目を開きます。メタデータの変更や、元に戻せない画像の変更は、その項目のほかの使用箇所にも影響することがあります。
• 「削除」は、このコンテンツからの参照を外します。メディアライブラリの項目は残ります。

「Edit asset」でトリミングしたコピーを作ると、ピッカーは現在の使用箇所に新しいコピーを選択します。Portable Textとギャラリーの画像は、その使用箇所の代替テキスト、キャプション、レイアウト、位置を保ちます。「Edit asset」で元の画像を置き換えると、メディアのIDは変わらないため、その項目を使っているすべての箇所に変更後の画像が表示されます。

外部のプロバイダーの画像とファイルのフィールドでは、「置き換え」と「削除」を使えますが、ローカルのアセットエディターは開きません。

ローカルの画像の置き換え

「画像を置き換え」は、既存のメディアライブラリの項目の中身のデータを、新しくアップロードしたものに入れ替えます。その項目を参照しているすべての場所で、新しい版の画像を表示したい場合に使います。

この操作は、準備ができているJPEG、PNG、WebPの項目で使えます。投稿者は、自分がアップロードした画像を置き換えられます。編集者は、すべてのローカルの画像を置き換えられます。

EmDashは、メディアのID、ファイル名、URL、代替テキスト、キャプション、フォルダーを保ちます。そのため、既存のコンテンツからの参照はそのまま動き、置き換えた画像が表示されます。保存されていた焦点の座標は新しい画像に合わない可能性があるため、置き換えると焦点は消去されます。

1つのフィールドや画像ブロックだけを変えたい場合は、代わりにコンテンツのエディターで「置き換え」を使います。

焦点の設定

焦点は、レイアウトが画像を正方形、横長、縦長などの決まった形に収めるためにトリミングするときに、見えたままにしておきたい部分を示します。

独自に設定した焦点を消すには、「リセット」を選択します。フィールドやギャラリーで画像を選ぶと、EmDashはアセットの現在の焦点をそのコンテンツの値にコピーします。すでにその画像を使っているコンテンツは、画像を選び直すまで、保存済みの焦点を保ちます。コンテンツのフィールドから「Edit asset」を開いた場合は、保存した焦点で、その現在の使用箇所が更新されます。

ローカルの画像のトリミング

トリミングは、EmDashが保存している、準備ができているJPEG、PNG、WebPの画像で使えます。外部のプロバイダーの画像は、ローカルのアセットエディターではトリミングできません。

「Replace original」は、縦横比が「Original」のときだけ使えます。「Freeform」とほかの比率では、「Create cropped copy」を使います。トリミングしたコピーは元の画像と同じフォルダーに入り、重複しないファイル名が付きます。

アニメーションWebPをトリミングすると、静止画のWebPになります。トリミングした結果には、アニメーションは残りません。

ファイルの使用箇所の確認

ローカルのファイルを開いて「使用状況」を選択すると、そのファイルを参照しているコンテンツのエントリーが一覧表示されます。それぞれの結果には、参照を含むコレクションとフィールドが示され、そのエントリーを編集用に開けます。ゴミ箱にあるエントリーは、一覧の中で区別して示されます。

この一覧がすべてをそろえるには、メディアの使用状況の記録が有効になっている必要があります。管理者が、サイトごとに一度だけ有効にします。

メディアの使用状況の記録は、一度有効にすると無効にできません。新しいコンテンツの変更は、記録が有効になったあとから追跡されます。すでにあったエントリーの参照は、バックグラウンドの走査で追加されます。

「使用状況」の表示で、インデックスの作成が実行中、古い、一部のみ、失敗のいずれかと報告された場合は、その結果を不完全なものとして扱います。管理者は「メディアの使用状況」に戻って、現在の状態と復旧の案内を確認できます。

テンプレートでの画像の描画

画像のフィールドは、単なる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 は、ページの上部に表示されるメインの画像にだけ使います。priority を付けると、遅延させずに読み込むよう要求し、ブラウザーに取得の優先度が高いことを伝えます。ほかの画像は、コンポーネントの既定の遅延読み込みのままにします。

フィールドにダークモード用の対になるフィールドがある場合、Image は両方のソースを描画し、訪問者の配色設定に合わせてどちらかを選びます。フィールドとテンプレートの設定については、ダークモード用の画像を参照します。

テンプレートは、メディアライブラリへの別のクエリなしで、コンテンツの参照と一緒に保存されたメディアのメタデータを受け取ります。独自の連携でプロバイダーの最新のメタデータが必要な場合は、その項目を明示的に取得します。その際、コレクションのページで画像ごとにプロバイダーに問い合わせることは避けます。保存されるファイルと画像の値については、フィールド型リファレンスで説明しています。

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

ローカルのライブラリは、サイトで設定したストレージアダプターを通してファイルを保存します。Node.jsのサイトではローカルのディスクまたはS3互換のストレージを使えます。Cloudflareのサイトでは、一般にR2のバインディングを使います。データをどこに保存するかはアダプターが決め、メディアライブラリの作業の流れは変わりません。設定と、本番環境でデータを保持するための要件については、メディアストレージを参照します。

Cloudflare ImagesとCloudflare Streamは、外部のメディアプロバイダーとして登録できます。これらはピッカーにソースとして表示され、Image はプロバイダーの画像の値を扱えます。プロバイダーの項目は引き続きそのサービスが管理するため、EmDashのアセットエディターでは、ローカルのフォルダー、焦点、トリミング、置き換えは使えません。

メディアの安全な削除

メディアライブラリでファイルを開き、「削除」を選択して、完全な削除を確定します。投稿者は、自分がアップロードしたローカルのファイルを削除できます。編集者は、すべてのローカルのファイルを削除できます。プロバイダーの項目がプロバイダーから削除されるのは、そのソースが削除に対応していて、現在のユーザーに権限がある場合だけです。

アップロードとメディアの管理を自動化する場合は、メディアのエンドポイントのリファレンスまたはCLIのメディアのコマンドを参照します。選択したメディアを使うエントリーを公開するには、コンテンツの作成と公開に進みます。