メディアライブラリ

Page summary:

メディアライブラリはアップロード済みアセットを集約し、検索・フィルター・フォルダー整理ができます。プロバイダー設定、アップロードの流れ、コンテンツへの差し込み方を扱います。

メディアライブラリは、Strapi アプリにアップロードされたあらゆるアセットを表示し、操作する機能です。

IDENTITY CARD

プラン

無料機能

ロールと権限

Roles > Plugins - Upload で最低限「Access the Media Library」権限が必要です

有効化

既定で利用可能かつオン

環境

開発・本番の両方で利用できます

設定

メディアライブラリの一部の項目は管理パネルから、別の項目は Strapi プロジェクトのコードで設定します。

管理パネルでの設定

管理パネルのグローバル設定では、アップロードするアセットの形式・サイズ・向きなどを制御できます。メディアライブラリ画面から表示設定も変えられます。

項目の設定

設定場所: Settings > Global Settings > Media Library.

1. メディアライブラリの項目を次のとおり定義します。

   設定名	手順	既定値
   Generate AI captions and alt texts automatically on upload!	オンにすると AI によるメタデータ生成 GrowthThis feature is available with a Growth plan. が有効になります。	True
   Responsive friendly upload	オンにすると、アップロードしたアセットの複数サイズ（小・中・大）を生成します。 各サイズの既定値はコードで設定できます。	True
   Size optimization	オンにすると画像を縮小し、品質をわずかに下げます。	True
   Auto orientation	オンにすると EXIF の向きタグに従って画像を自動回転します。	False

2. Save をクリックします。

表示の設定

設定場所: Media Library

1. フォルダーとアセット一覧の直上、画面右の をクリックします。
2. 次に従って表示を設定します。

   設定名	手順
   Entries per page	ドロップダウンで、1 ページに表示するアセット数の既定を決めます。
   Default sort order	ドロップダウンでアセットの既定の並び順を決めます。メディアライブラリ内の並べ替えで上書きできます。

Note

どちらの設定もメディアライブラリと、コンテンツマネージャーのメディアアップロードモーダルで既定値として使われます。プロジェクト全体の全ユーザーに共通です。

コードベースの設定

バックエンドではメディアライブラリが Upload パッケージによって動いており、プロバイダーで設定・拡張できます。

プロバイダー

The providers maintained by Strapi are the following. Clicking on a card will redirect you to a docs page with a configuration example:

Amazon S3

Official provider for file uploads to Amazon S3.

Cloudinary

Official provider for media management with Cloudinary.

Local

Default provider for storing files locally on the server.

別のプロバイダーを入れたり自作したりする場合は次を参照してください。

メディアライブラリのプロバイダー

プロバイダーの追加や自作の方法です。

Info

このページのコード設定の説明は、既定の upload プロバイダー向けです。別プロバイダーを使う場合は、そのドキュメントのパラメーターを参照してください。

利用可能なオプション

既定の upload プロバイダーでは、config/plugins 内の upload.config に次のオプションを宣言できます。いずれも任意です。

パラメーター	説明	型	既定値
providerOptions.localServer	Upload サーバーのベースになる koa-static に渡すオプション（ローカルサーバー）	Object	-
sizeLimit	最大ファイルサイズ（バイト）（最大ファイルサイズ）	Integer	209715200 （200 MB。200 × 1024 × 1024 バイト）
breakpoints	「Responsive friendly upload」が true のときに生成するレスポンシブ画像のブレークポイント（レスポンシブ画像）	Object	{ large: 1000, medium: 750, small: 500 }
security	アップロードファイルの検証ルールでセキュリティを強化します	Object	-

Note

アップロード要求のタイムアウトは Upload プラグインではなくサーバー側の設定です。Strapi サーバー全体に効きます（アップロード要求のタイムアウト）。

Note

画像のファイル名生成ロジックを上書きする場合は プラグインの拡張 を参照してください。

カスタム設定の例

既定の upload プロバイダー向けの設定例です。

JavaScript

/config/plugins.js

module.exports = ({ env })=>({
  upload: {
    config: {
      providerOptions: {
        localServer: {
          maxage: 300000
        },
      },
      sizeLimit: 250 * 1024 * 1024, // 256mb in bytes
      breakpoints: {
        xlarge: 1920,
        large: 1000,
        medium: 750,
        small: 500,
        xsmall: 64
      },
      security: {
        allowedTypes: ['image/*', 'application/*'],
        deniedTypes: ['application/x-sh', 'application/x-dosexec']
      },
    },
  },
});

TypeScript

/config/plugins.ts

export default () => ({
  upload: {
    config: {
      providerOptions: {
        localServer: {
          maxage: 300000
        },
      },
      sizeLimit: 250 * 1024 * 1024, // 256mb in bytes
      breakpoints: {
        xlarge: 1920,
        large: 1000,
        medium: 750,
        small: 500,
        xsmall: 64
      },
      security: {
        allowedTypes: ['image/*', 'application/*'],
        deniedTypes: ['application/x-sh', 'application/x-dosexec']
      },
    },
  },
})

ローカルサーバー

既定では Strapi はローカルにアップロードしたファイル向けに localServer 設定を受け付けます。値は koa-static に渡されます。

/config/plugins を作成または編集して指定します。次の例は max-age ヘッダーを設定します。

JavaScript

/config/plugins.js

module.exports = ({ env })=>({
  upload: {
    config: {
      providerOptions: {
        localServer: {
          maxage: 300000
        },
      },
    },
  },
});

TypeScript

/config/plugins.ts

export default ({ env }) => ({
  upload: {
    config: {
      providerOptions: {
        localServer: {
          maxage: 300000
        },
      },
    },
  },
});

最大ファイルサイズ

既定の 200 MB を超えるファイルを扱うには、リクエスト解析を担う Strapi のミドルウェアも設定する必要があります。Upload パッケージの sizeLimit に加えて行います。

Caution

リバースプロキシ・ロードバランサー・ファイアウォールでも大きなボディを許可する設定が必要な場合があります。例: Nginx の client_max_body_size は既定が 1 MB 程度です。

Upload で使うのは body ミドルウェア です。/config/middlewares に直接設定を渡せます。

JavaScript

/config/middlewares.js

module.exports = [
  // ...
  {
    name: "strapi::body",
    config: {
      formLimit: "256mb", // modify form body
      jsonLimit: "256mb", // modify JSON body
      textLimit: "256mb", // modify text body
      formidable: {
        maxFileSize: 250 * 1024 * 1024, // multipart data, modify here limit of uploaded file size
      },
    },
  },
  // ...
];

TypeScript

/config/middlewares.ts

export default [
  // ...
  {
    name: "strapi::body",
    config: {
      formLimit: "256mb", // modify form body
      jsonLimit: "256mb", // modify JSON body
      textLimit: "256mb", // modify text body
      formidable: {
        maxFileSize: 250 * 1024 * 1024, // multipart data, modify here limit of uploaded file size
      },
    },
  },
  // ...
];

ミドルウェアに加え、バイト数の整数として sizeLimit を /config/plugins に書けます。

JavaScript

/config/plugins.js

module.exports = {
  // ...
  upload: {
    config: {
      sizeLimit: 250 * 1024 * 1024 // 256mb in bytes
    }
  }
};

TypeScript

/config/plugins.ts

export default {
  // ...
  upload: {
    config: {
      sizeLimit: 250 * 1024 * 1024 // 256mb in bytes
    }
  }
};

セキュリティ NewThis content is new.

Upload プラグインは、拡張子ではなく実際の MIME タイプでファイルを検証します。セキュリティルールに合うファイルだけがアップロードされます。

security には allowedTypes または deniedTypes の 2 種類で、許可／禁止するファイル種別を制御します。

Note

allowedTypes と deniedTypes は単独でも併用でも使えます。許可タイプに一致し、かつ禁止タイプに一致しないファイルだけが受け入れられます。allowedTypes に * などワイルドカードを使う場合は、deniedTypes で例外を絞り込めます。

/config/plugins に次のように allowedTypes と deniedTypes を組み合わせて定義できます。

JavaScript

/config/plugins.js

module.exports = {
  // ...
  upload: {
    config: {
      security: {
        allowedTypes: ['image/*', 'application/*'],
        deniedTypes: ['application/x-sh', 'application/x-dosexec']
      },
    }
  }
};

TypeScript

/config/plugins.ts

export default {
  // ...
  upload: {
    config: {
      security: {
        allowedTypes: ['image/*', 'application/*'],
        deniedTypes: ['application/x-sh', 'application/x-dosexec']
      },
    }
  }
};

アップロード要求のタイムアウト

既定では strapi.server.httpServer.requestTimeout は 330 秒です。アップロードもこの時間に含まれます。

回線が遅い利用者が大きいファイルを送れるようにするには、この上限を伸ばす必要があることがあります。推奨は config/server の http.serverOptions.requestTimeout です。

別法として、Strapi 起動前に動く bootstrap で requestTimeout をコードから変える方法もあります。一時的に無効化・再有効化するときなどに使います。

JavaScript

/index.js

module.exports = {

  //...

  bootstrap({ strapi }) {
    // Set the requestTimeout to 1,800,000 milliseconds (30 minutes):
    strapi.server.httpServer.requestTimeout = 30 * 60 * 1000;
  },
};

TypeScript

/index.ts

export default {

  //...

  bootstrap({ strapi }) {
    // Set the requestTimeout to 1,800,000 milliseconds (30 minutes):
    strapi.server.httpServer.requestTimeout = 30 * 60 * 1000;
  },
};

レスポンシブ画像

管理パネルの Responsive friendly upload が有効なとき、プラグインは次のサイズのレスポンシブ画像を生成します。

名前	長辺の目安
large	1000px
medium	750px
small	500px

サイズは /config/plugins で上書きできます。

JavaScript

/config/plugins.js

module.exports = ({ env }) => ({
  upload: {
    config: {
      breakpoints: {
        xlarge: 1920,
        large: 1000,
        medium: 750,
        small: 500,
        xsmall: 64
      },
    },
  },
});

TypeScript

/config/plugins.ts

export default ({ env }) => ({
  upload: {
    config: {
      breakpoints: {
        xlarge: 1920,
        large: 1000,
        medium: 750,
        small: 500,
        xsmall: 64
      },
    },
  },
});

Caution

ブレークポイントの変更は新規画像にだけ適用されます。既存画像の再生成やリサイズは行われません。

使い方

利用場所: Media Library

Info

Strapi では管理パネルから画像を上げるほか、プログラムからも可能です。API では /api/upload に multipart/form-data でファイルを送り、キャプションや alt 用の任意の fileInfo を付けられます（REST API 参照）。

メディアライブラリには、 メディアライブラリ自体からアップロードしたアセットと、 コンテンツマネージャーでメディアフィールドを扱うときにアップロードしたアセットが表示されます。

メディアライブラリのアセットは コンテンツマネージャー からコンテンツタイプに差し込めます。

メディアライブラリでは次の操作ができます。

• 新しいアセットをアップロードする（アセットの追加）やフォルダーを作る（フォルダーで整理） 1
• アセットやフォルダーを並べ替えたりフィルター 2 で探しやすくする
• リスト表示 とグリッド表示 の切り替え、 から表示の設定、テキスト検索 3 で特定のアセットやフォルドーを探す
• フォルダーの表示・移動・管理 4

Tip

画面右の検索アイコン からテキスト検索でき、アセットやフォルドーを素早く見つけられます。

アセットの追加

メディアライブラリがサポートするメディア種別と拡張子

メディア種別	対応拡張子
Image	- JPEG - PNG - GIF - SVG - TIFF - ICO - DVU
Video	- MPEG - MP4 - MOV (Quicktime) - WMV - AVI - FLV
Audio	- MP3 - WAV - OGG
File	- CSV - ZIP - PDF - XLS, XLSX - JSON

1. メディアライブラリ右上の Add new assets をクリックします。
2. コンピューターからか URL からアップロードするか選びます。
   • コンピューター … ドラッグ＆ドロップするか、ファイルを選択して参照します。
   • URL … URL 欄に URL を入力または貼り付けます。複数ある場合は改行で区切り、Next をクリックします。
3. （任意） でメタデータを開き、File name・Alternative text・Caption を設定します（個別アセットの管理）。
4. （任意）Add new assets でさらにファイルを追加し、手順 2 に戻ります。
5. Upload assets to the library をクリックします。

Strapi AI によるメタデータの自動生成

GrowthThis feature is available with a Growth plan.

管理パネルで有効にすると、Strapi AI がメディアライブラリへアップロードした画像の代替テキストとキャプションを自動生成し、アクセシビリティと SEO の助けになります。モーダルで AI が出した案を確認し、必要なら編集できます。

AI によるメタデータ生成は画像のみで、ファイルや動画は対象外です。既定ではオンで、メディアライブラリの設定からオフにできます。

メディアライブラリの設定 では、すでにアップロード済みで代替テキストやキャプションがない画像向けの生成もできます。この機能は現在 Beta です。

Strapi AI credits

Strapi AI includes 1,000 credits per month on the Growth plan, and 10 free credits during the free trial. Lightweight actions use fewer credits, while more complex ones use more.

You can check your credit usage in the Settings Overview of the admin panel. Notifications are sent when your usage reaches 80%, 90%, and 100% of your monthly allowance.

When your credits run out on the Growth plan, you can keep using Strapi AI, with overages billed monthly.

For more information about Strapi AI, please refer to the dedicated support article.

個別アセットの管理

メディアライブラリでは、ファイル情報や保存場所の変更、ダウンロード、リンクのコピー、削除などができます。画像はトリミングも可能です。

アセットの編集

アセットの をクリックして「Details」ウィンドウを開くと、利用できる管理操作がすべてそろいます。

• 左側のプレビュー上の操作ボタン 1 で次ができます。
  • でアセットを削除
  • でダウンロード
  • でアセット URL をクリップボードにコピー
  • （任意） で画像のトリミング（画像のトリミング）
  • （任意） でフォーカルポイント（フォーカルポイントの追加）
• 右側上部にメタデータ 2 が表示され、下の欄で File name・Alternative text・Caption・Location（フォルダーで整理）を更新できます 3。
• 下部の Replace Media 4 でファイルだけ差し替え（他の編集可能項目は維持）、Finish で変更を確定します。

アセットの移動

1. 移動するアセットの をクリックします。
2. 開いたウィンドウで Location をクリックし、ドロップダウンから別フォルダーを選びます。
3. Save で確定します。

Note

メディアライブラリのメイン画面からもフォルダーへ移動できます（フォルダーで整理）。複数アセットを同時に移動できます。

画像のトリミング

1. トリミングするアセットの をクリックします。
2. ウィンドウで をクリックしてトリミングモードに入ります。
3. 角のハンドルで枠のサイズを変え、ドラッグで枠を移動します。
4. で寸法を確定し、crop the original asset（元ファイルをトリミング）か duplicate & crop the asset（コピーを作り元はそのまま）を選びます。取り消す場合は でトリミングモードを終了します。

5. Finish でファイルに反映します。

フォーカルポイントの追加

フォーカルポイントは、画像が別の文脈でトリミング／リサイズされても重要な部分が残るようにします。

1. をクリックします。
2. ウィンドウでピン をクリックしてフォーカルポイントモードに入ります。
3. 十字線を動かして位置を決め、クリックでポイントを置きます。
4. で確定するか、 で変更を捨ててモードを終了します。
5. でフォーカルポイントを画像中央に戻します。
6. Finish で保存します。

アセットの削除

1. 削除するアセットの をクリックします。
2. ウィンドウでプレビュー上の操作バーから をクリックします。
3. Confirm をクリックします。

Tip

メイン画面からも 1 件または複数件削除できます。各アセット左上のチェックを入れ、画面上部（フィルター・並べ替えの下）の をクリックします。

フォルダーで整理する

フォルダーでアップロード済みアセットを整理できます。一覧上部に表示されるほか、コンテンツマネージャー のメディアフィールドのポップアップからも使えます。

メディアライブラリではフォルダー一覧の閲覧、フォルダー内容の閲覧、フォルダーの作成・編集、アセットのフォルダーへの移動、フォルダーの削除ができます。

Note

フォルダーはアセットと同じ権限モデルに従います（ユーザーとパーミッション）。フォルダー単位の権限はまだ定義できません。

既定ではルートに作成されたフォルダーとアセットが表示されます。フォルダーを開くと次が表示されます。

• フォルダー名と親へ戻るパンくず 1
• 内包するサブフォルダー 2
• このフォルダー内のアセット 3

フォルダー専用ビューでも、メイン画面と同様にフォルダー・アセットの管理・フィルター・並べ替え・検索ができます。

親フォルダーへ 1 階層戻るには、画面上部の Back を使います。

Tip

パンくずでも親へ戻れます。フォルダー名をクリックして直接移動するか、3 点メニューから親フォルダーをドロップダウンで選びます。

フォルダーの追加

1. メディアライブラリ右上の Add new folder をクリックします。
2. ウィンドウの Name にフォルダー名を入力します。
3. （任意）Location で親フォルダーを選びます。既定は現在開いているフォルダーです。
4. Create をクリックします。

Note

階層の深さに上限はありませんが、深いサブフォルダーは視覚的な階層表示がないため辿りにくい場合があります。目的のアセットを探すには、画面右の で検索するほうが速いこともあります。

フォルダーへのアセット移動

ルート表示でもフォルダー内表示でも、アセットとフォルダーを別フォルダーへ移動できます。

1. フォルダー名左のチェックボックスをクリックするか、アセット本体をクリックして移動対象を選びます。
2. 画面上部の Move をクリックします。
3. Move elements to で Location から移動先を選びます。
4. Move をクリックします。

フォルダーの編集

作成後のフォルダーは名前変更・移動・削除ができます。

1. メディアライブラリの Folders 一覧で、対象フォルダーにマウスを乗せて をクリックします。
2. ウィンドウで Name と Location を更新します。
3. Save をクリックします。

フォルダーの削除

フォルダー一覧から削除するか、1 件編集しながら削除できます。

1. フォルダー名左のチェックを入れます（複数選べます）。
2. Folders 一覧上の Delete をクリックします。
3. Confirmation で Confirm をクリックします。

Note

1 件だけ編集して削除する場合: フォルダーにマウスを乗せ を開き、Delete folder で削除を確定します。

REST API での利用

メディアライブラリ関連のエンドポイントは Strapi の REST API から呼び出せます。

REST API でアップロード

コードから REST API でファイルをアップロードする方法です。

コードで公開アセットを使う

公開アセットは、外部にそのまま配信したい静的ファイル（画像・動画・CSS など）です。

API が静的ファイルを返す必要があるため、新規の Strapi プロジェクトには既定で /public フォルダーがあります。このディレクトリ内のファイルは、他ルートに一致しないリクエストパスで、かつファイル名が一致すると配信されます（例: ./public/company-logo.png は /company-logo.png で取得できます）。

Tip

リクエストパスがフォルダー名と一致するときは index.html が返ります（例: /pictures は public/pictures/index.html を返そうとします）。

Caution

ドットファイル（.htaccess や .gitignore など、名前が . で始まるファイル）は公開されません。