bc-asset-loader 1.0.0

package/README.md

@@ -0,0 +1,209 @@
+# bc-asset-loader
+
+画像・フォント・動画を非同期で一括プリロードする JavaScript ライブラリです。
+ロードの進捗を `progress` プロパティで参照でき、プログレスバーやパーセント表示UIの実装に使用できます。
+
+---
+
+## インストール
+
+**npm**
+
+```bash
+npm install bc-asset-loader
+```
+
+**scriptタグ or CDN（jsDelivr）**
+
+```html
+<script src="bc-asset-loader.js"></script>
+```
+
+```html
+<script src="https://cdn.jsdelivr.net/gh/beicun/bc-asset-loader/dist/bc-asset-loader.js"></script>
+```
+
+---
+
+## 使用例
+
+### npm経由での使用
+
+```typescript
+import BcAssetLoader from 'bc-asset-loader';
+
+const loader = new BcAssetLoader({
+  image: [
+    { url: '/img/hero.jpg' },
+    { url: '/img/bg.png' },
+  ],
+  font: [
+    { url: '/fonts/NotoSansJP-Regular.woff2', family: 'Noto Sans JP', weight: '400' },
+    { url: '/fonts/NotoSansJP-Bold.woff2',    family: 'Noto Sans JP', weight: '700' },
+  ],
+  extFont: [
+    {
+      url: 'https://fonts.googleapis.com/css2?family=Roboto:wght@400;700',
+      families: [
+        { family: 'Roboto', weights: ['400', '700'] },
+      ],
+    },
+  ],
+  video: [
+    { url: '/video/intro.mp4' },
+  ],
+  onComplete: () => {
+    console.log('全アセットのロード完了');
+  },
+});
+
+loader.load();
+
+// プログレスバーの更新
+const progressBar = document.querySelector('.progress-bar');
+
+requestAnimationFrame(function update() {
+  progressBar.style.width = `${loader.progress * 100}%`;
+  if (!loader.loaded) requestAnimationFrame(update);
+});
+```
+
+### scriptタグ or CDN（jsDelivr）での使用
+
+```html
+<!-- ローカルファイル -->
+<script src="bc-asset-loader.js"></script>
+
+<!-- CDN（jsDelivr） -->
+<script src="https://cdn.jsdelivr.net/gh/beicun/bc-asset-loader/dist/bc-asset-loader.js"></script>
+
+<script>
+  const loader = new BcAssetLoader({
+    image: [{ url: '/img/hero.jpg' }],
+    onComplete: () => {
+      console.log('全アセットのロード完了');
+    },
+  });
+  loader.load();
+</script>
+```
+
+---
+
+## API
+
+### コンストラクタ
+
+```typescript
+new BcAssetLoader(options: BcAssetLoaderOptions)
+```
+
+#### BcAssetLoaderOptions
+
+| プロパティ | 型 | 必須 | 説明 |
+|-----------|-----|------|------|
+| `image` | 配列 | 任意 | ロードする画像のリスト |
+| `font` | 配列 | 任意 | ロードするセルフホストフォントのリスト |
+| `extFont` | 配列 | 任意 | ロードする外部ホストフォント（Google Fontsなど）のリスト |
+| `video` | 配列 | 任意 | ロードする動画のリスト |
+| `onComplete` | 関数 | 任意 | 全アセットのロード完了時に呼ばれるコールバック |
+
+```typescript
+interface BcAssetLoaderOptions {
+  image?: {
+    url: string;
+  }[];
+  font?: {
+    url: string;
+    family: string;
+    weight?: string;
+    style?: string;
+    stretch?: string;
+  }[];
+  extFont?: {
+    url: string;
+    families: {
+      family: string;
+      weights?: string[];
+      style?: 'normal' | 'italic';
+    }[];
+  }[];
+  video?: {
+    url: string;
+  }[];
+  onComplete?: () => void;
+}
+```
+
+---
+
+### メソッド
+
+#### `load(): Promise<void>`
+
+全アセットのロードを開始する。  
+`onComplete` コールバックは、ロード完了後に呼ばれる。
+
+```typescript
+await loader.load();
+```
+
+---
+
+### プロパティ
+
+#### `loaded: boolean`
+
+全アセットのロードが完了したかどうか。
+
+#### `loadedAmount: number`
+
+ロード済みの量。以下の合計値。
+
+| アセット種別 | 加算タイミング・値 |
+|-------------|-----------------|
+| `image` | 1ファイル完了ごとに `+1` |
+| `font` | 1ファイル完了ごとに `+1` |
+| `extFont` | 1URLの全フォントが完了したら `+1` |
+| `video` | バッファ済み割合（`0〜1`）をリアルタイムで加算 |
+
+> `video` のみ小数になるため、`loadedAmount` は整数とは限らない。
+
+#### `totalAmount: number`
+
+アセットの総量。以下の合計値。
+
+| アセット種別 | カウント方法 |
+|-------------|------------|
+| `image` | 指定した画像ファイルの数 |
+| `font` | 指定したフォントファイルの数 |
+| `extFont` | 指定した URL の数（1URL = 1） |
+| `video` | 指定した動画ファイルの数 |
+
+#### `progress: number`
+
+ロードの進捗（`0〜1`）。`loadedAmount / totalAmount` で計算される。
+
+#### `onComplete: () => void`
+
+コンストラクタで渡した `onComplete` コールバックへの参照。
+
+---
+
+## エラーハンドリング
+
+- 個別アセットのロードが失敗した場合、コンソールにエラーを出力し、そのアセットをスキップして残りのロードを続行する。
+- 全アセットのロード試行が完了した時点で `loaded = true` となり `onComplete` が呼ばれる。
+- ロード失敗したアセットは `progress` の計算から除外される。
+
+---
+
+## TypeScript
+
+型定義ファイル（`dist/bc-asset-loader.d.ts`）が同梱されています。追加インストールは不要です。
+
+---
+
+## ライセンス
+
+MIT

package/dist/bc-asset-loader.cjs.js

@@ -0,0 +1,223 @@
+/*!
+* bc-asset-loader v1.0.0
+* (c) 2026 beicun
+* Released under the MIT License
+*/
+//#region src/core/ImageLoader.ts
+var ImageLoader = class {
+	url;
+	loaded = false;
+	constructor(options) {
+		this.url = options.url;
+	}
+	/**
+	* 画像をロードする。
+	* 失敗した場合はエラーをコンソールに出力し、resolve する（後続のロードを止めない）。
+	*/
+	load() {
+		return new Promise((resolve) => {
+			const img = new Image();
+			img.onload = () => {
+				this.loaded = true;
+				resolve();
+			};
+			img.onerror = () => {
+				console.error(`ImageLoader: Failed to load image "${this.url}".`);
+				resolve();
+			};
+			img.src = this.url;
+		});
+	}
+};
+//#endregion
+//#region src/core/FontLoader.ts
+var FontLoader = class {
+	url;
+	family;
+	weight;
+	style;
+	stretch;
+	loaded = false;
+	constructor(options) {
+		this.url = options.url;
+		this.family = options.family;
+		this.weight = options.weight ?? "400";
+		this.style = options.style ?? "normal";
+		this.stretch = options.stretch ?? "normal";
+	}
+	/**
+	* FontFace API を使ってフォントをロードし、document.fonts に登録する。
+	* 登録後は CSS で font-family 名を指定するだけで使用できるようになる。
+	* 失敗した場合はエラーをコンソールに出力し、処理を継続する。
+	*/
+	async load() {
+		const fontFace = new FontFace(this.family, `url(${this.url})`, {
+			weight: this.weight,
+			style: this.style,
+			stretch: this.stretch
+		});
+		try {
+			await fontFace.load();
+			document.fonts.add(fontFace);
+			this.loaded = true;
+		} catch (e) {
+			console.error(`FontLoader: Failed to load font "${this.family}".`, e);
+		}
+	}
+};
+//#endregion
+//#region src/core/CdnFontLoader.ts
+var CdnFontLoader = class {
+	url;
+	families;
+	loaded = false;
+	constructor(options) {
+		this.url = options.url;
+		this.families = options.families;
+	}
+	/**
+	* 外部Webフォントをロードする。
+	* <link> タグを注入してスタイルシートを読み込み、
+	* 指定したフォントファミリーが使用可能になるまで待つ。
+	* 失敗した場合はエラーをコンソールに出力し、resolve する（後続のロードを止めない）。
+	*/
+	load() {
+		return new Promise((resolve) => {
+			const link = document.createElement("link");
+			link.rel = "stylesheet";
+			link.href = this.url;
+			link.onload = async () => {
+				const checks = this.families.flatMap(({ family, weights, style }) => {
+					const styleStr = style === "italic" ? "italic" : "normal";
+					return (weights && weights.length > 0 ? weights : ["400"]).map((weight) => document.fonts.load(`${styleStr} ${weight} 16px "${family}"`));
+				});
+				try {
+					await Promise.all(checks);
+					this.loaded = true;
+				} catch (e) {
+					console.error(`CdnFontLoader: Failed to verify fonts from "${this.url}".`, e);
+				}
+				resolve();
+			};
+			link.onerror = () => {
+				console.error(`CdnFontLoader: Failed to load stylesheet "${this.url}".`);
+				resolve();
+			};
+			document.head.appendChild(link);
+		});
+	}
+};
+//#endregion
+//#region src/core/VideoLoader.ts
+var VideoLoader = class {
+	url;
+	loaded = false;
+	/** バッファ済みの割合（0〜1）。progress イベントのたびに更新される。 */
+	bufferProgress = 0;
+	constructor(options) {
+		this.url = options.url;
+	}
+	/**
+	* 動画をロードする。
+	* progress イベントでバッファ済み割合をリアルタイムに onProgress へ通知し、
+	* canplaythrough イベントを完了とみなして resolve する。
+	* 失敗した場合はエラーをコンソールに出力し、resolve する（後続のロードを止めない）。
+	* @param onProgress - バッファ済み割合（0〜1）を受け取るコールバック
+	*/
+	load(onProgress) {
+		return new Promise((resolve) => {
+			const video = document.createElement("video");
+			video.preload = "auto";
+			video.src = this.url;
+			video.addEventListener("progress", () => {
+				if (video.duration && video.buffered.length > 0) {
+					this.bufferProgress = video.buffered.end(video.buffered.length - 1) / video.duration;
+					onProgress(this.bufferProgress);
+				}
+			});
+			video.addEventListener("canplaythrough", () => {
+				this.bufferProgress = 1;
+				this.loaded = true;
+				onProgress(1);
+				resolve();
+			});
+			video.addEventListener("error", () => {
+				console.error(`VideoLoader: Failed to load video "${this.url}".`);
+				resolve();
+			});
+			video.load();
+		});
+	}
+};
+//#endregion
+//#region src/index.ts
+var BcAssetLoader = class {
+	loaded = false;
+	/**
+	* ロード済みの量。image・font・extFont は完了ごとに +1、
+	* video はバッファ済み割合（0〜1）をリアルタイムで加算するため小数になる場合がある。
+	*/
+	loadedAmount = 0;
+	/**
+	* アセットの総量。
+	* extFont は URL 単位で 1 としてカウントする。
+	*/
+	totalAmount = 0;
+	/** ロードの進捗（0〜1）。loadedAmount / totalAmount で計算される。 */
+	progress = 0;
+	onComplete;
+	imageLoaders;
+	fontLoaders;
+	extFontLoaders;
+	videoLoaders;
+	constructor(options) {
+		this.onComplete = options.onComplete ?? (() => {});
+		this.imageLoaders = (options.image ?? []).map((o) => new ImageLoader(o));
+		this.fontLoaders = (options.font ?? []).map((o) => new FontLoader(o));
+		this.extFontLoaders = (options.extFont ?? []).map((o) => new CdnFontLoader(o));
+		this.videoLoaders = (options.video ?? []).map((o) => new VideoLoader(o));
+		this.totalAmount = this.imageLoaders.length + this.fontLoaders.length + this.extFontLoaders.length + this.videoLoaders.length;
+	}
+	async load() {
+		if (this.totalAmount === 0) {
+			this.loaded = true;
+			this.progress = 1;
+			this.onComplete();
+			return;
+		}
+		const imagePromises = this.imageLoaders.map((loader) => loader.load().then(() => {
+			this.loadedAmount += 1;
+			this._updateProgress();
+		}));
+		const fontPromises = this.fontLoaders.map((loader) => loader.load().then(() => {
+			this.loadedAmount += 1;
+			this._updateProgress();
+		}));
+		const extFontPromises = this.extFontLoaders.map((loader) => loader.load().then(() => {
+			this.loadedAmount += 1;
+			this._updateProgress();
+		}));
+		const videoProgressValues = this.videoLoaders.map(() => 0);
+		const videoPromises = this.videoLoaders.map((loader, index) => loader.load((progress) => {
+			const prev = videoProgressValues[index];
+			videoProgressValues[index] = progress;
+			this.loadedAmount += progress - prev;
+			this._updateProgress();
+		}));
+		await Promise.all([
+			...imagePromises,
+			...fontPromises,
+			...extFontPromises,
+			...videoPromises
+		]);
+		this.loaded = true;
+		this.loadedAmount = this.totalAmount;
+		this.progress = 1;
+		this.onComplete();
+	}
+	_updateProgress() {
+		this.progress = this.loadedAmount / this.totalAmount;
+	}
+};
+//#endregion
+module.exports = BcAssetLoader;

package/dist/bc-asset-loader.d.ts

@@ -0,0 +1,53 @@
+declare class BcAssetLoader {
+    loaded: boolean;
+    /**
+     * ロード済みの量。image・font・extFont は完了ごとに +1、
+     * video はバッファ済み割合（0〜1）をリアルタイムで加算するため小数になる場合がある。
+     */
+    loadedAmount: number;
+    /**
+     * アセットの総量。
+     * extFont は URL 単位で 1 としてカウントする。
+     */
+    totalAmount: number;
+    /** ロードの進捗（0〜1）。loadedAmount / totalAmount で計算される。 */
+    progress: number;
+    onComplete: () => void;
+    private imageLoaders;
+    private fontLoaders;
+    private extFontLoaders;
+    private videoLoaders;
+    constructor(options: BcAssetLoaderOptions);
+    load(): Promise<void>;
+    private _updateProgress;
+}
+export default BcAssetLoader;
+
+declare interface BcAssetLoaderOptions {
+    image?: {
+        url: string;
+    }[];
+    font?: {
+        url: string;
+        family: string;
+        weight?: string;
+        style?: string;
+        stretch?: string;
+    }[];
+    extFont?: {
+        url: string;
+        /** ロード完了の確認に使うフォントファミリーのリスト */
+        families: {
+            family: string;
+            weights?: string[];
+            style?: 'normal' | 'italic';
+        }[];
+    }[];
+    video?: {
+        url: string;
+    }[];
+    /** 全アセットのロード完了時に呼ばれるコールバック */
+    onComplete?: () => void;
+}
+
+export { }

package/dist/bc-asset-loader.es.js

@@ -0,0 +1,223 @@
+/*!
+* bc-asset-loader v1.0.0
+* (c) 2026 beicun
+* Released under the MIT License
+*/
+//#region src/core/ImageLoader.ts
+var ImageLoader = class {
+	url;
+	loaded = false;
+	constructor(options) {
+		this.url = options.url;
+	}
+	/**
+	* 画像をロードする。
+	* 失敗した場合はエラーをコンソールに出力し、resolve する（後続のロードを止めない）。
+	*/
+	load() {
+		return new Promise((resolve) => {
+			const img = new Image();
+			img.onload = () => {
+				this.loaded = true;
+				resolve();
+			};
+			img.onerror = () => {
+				console.error(`ImageLoader: Failed to load image "${this.url}".`);
+				resolve();
+			};
+			img.src = this.url;
+		});
+	}
+};
+//#endregion
+//#region src/core/FontLoader.ts
+var FontLoader = class {
+	url;
+	family;
+	weight;
+	style;
+	stretch;
+	loaded = false;
+	constructor(options) {
+		this.url = options.url;
+		this.family = options.family;
+		this.weight = options.weight ?? "400";
+		this.style = options.style ?? "normal";
+		this.stretch = options.stretch ?? "normal";
+	}
+	/**
+	* FontFace API を使ってフォントをロードし、document.fonts に登録する。
+	* 登録後は CSS で font-family 名を指定するだけで使用できるようになる。
+	* 失敗した場合はエラーをコンソールに出力し、処理を継続する。
+	*/
+	async load() {
+		const fontFace = new FontFace(this.family, `url(${this.url})`, {
+			weight: this.weight,
+			style: this.style,
+			stretch: this.stretch
+		});
+		try {
+			await fontFace.load();
+			document.fonts.add(fontFace);
+			this.loaded = true;
+		} catch (e) {
+			console.error(`FontLoader: Failed to load font "${this.family}".`, e);
+		}
+	}
+};
+//#endregion
+//#region src/core/CdnFontLoader.ts
+var CdnFontLoader = class {
+	url;
+	families;
+	loaded = false;
+	constructor(options) {
+		this.url = options.url;
+		this.families = options.families;
+	}
+	/**
+	* 外部Webフォントをロードする。
+	* <link> タグを注入してスタイルシートを読み込み、
+	* 指定したフォントファミリーが使用可能になるまで待つ。
+	* 失敗した場合はエラーをコンソールに出力し、resolve する（後続のロードを止めない）。
+	*/
+	load() {
+		return new Promise((resolve) => {
+			const link = document.createElement("link");
+			link.rel = "stylesheet";
+			link.href = this.url;
+			link.onload = async () => {
+				const checks = this.families.flatMap(({ family, weights, style }) => {
+					const styleStr = style === "italic" ? "italic" : "normal";
+					return (weights && weights.length > 0 ? weights : ["400"]).map((weight) => document.fonts.load(`${styleStr} ${weight} 16px "${family}"`));
+				});
+				try {
+					await Promise.all(checks);
+					this.loaded = true;
+				} catch (e) {
+					console.error(`CdnFontLoader: Failed to verify fonts from "${this.url}".`, e);
+				}
+				resolve();
+			};
+			link.onerror = () => {
+				console.error(`CdnFontLoader: Failed to load stylesheet "${this.url}".`);
+				resolve();
+			};
+			document.head.appendChild(link);
+		});
+	}
+};
+//#endregion
+//#region src/core/VideoLoader.ts
+var VideoLoader = class {
+	url;
+	loaded = false;
+	/** バッファ済みの割合（0〜1）。progress イベントのたびに更新される。 */
+	bufferProgress = 0;
+	constructor(options) {
+		this.url = options.url;
+	}
+	/**
+	* 動画をロードする。
+	* progress イベントでバッファ済み割合をリアルタイムに onProgress へ通知し、
+	* canplaythrough イベントを完了とみなして resolve する。
+	* 失敗した場合はエラーをコンソールに出力し、resolve する（後続のロードを止めない）。
+	* @param onProgress - バッファ済み割合（0〜1）を受け取るコールバック
+	*/
+	load(onProgress) {
+		return new Promise((resolve) => {
+			const video = document.createElement("video");
+			video.preload = "auto";
+			video.src = this.url;
+			video.addEventListener("progress", () => {
+				if (video.duration && video.buffered.length > 0) {
+					this.bufferProgress = video.buffered.end(video.buffered.length - 1) / video.duration;
+					onProgress(this.bufferProgress);
+				}
+			});
+			video.addEventListener("canplaythrough", () => {
+				this.bufferProgress = 1;
+				this.loaded = true;
+				onProgress(1);
+				resolve();
+			});
+			video.addEventListener("error", () => {
+				console.error(`VideoLoader: Failed to load video "${this.url}".`);
+				resolve();
+			});
+			video.load();
+		});
+	}
+};
+//#endregion
+//#region src/index.ts
+var BcAssetLoader = class {
+	loaded = false;
+	/**
+	* ロード済みの量。image・font・extFont は完了ごとに +1、
+	* video はバッファ済み割合（0〜1）をリアルタイムで加算するため小数になる場合がある。
+	*/
+	loadedAmount = 0;
+	/**
+	* アセットの総量。
+	* extFont は URL 単位で 1 としてカウントする。
+	*/
+	totalAmount = 0;
+	/** ロードの進捗（0〜1）。loadedAmount / totalAmount で計算される。 */
+	progress = 0;
+	onComplete;
+	imageLoaders;
+	fontLoaders;
+	extFontLoaders;
+	videoLoaders;
+	constructor(options) {
+		this.onComplete = options.onComplete ?? (() => {});
+		this.imageLoaders = (options.image ?? []).map((o) => new ImageLoader(o));
+		this.fontLoaders = (options.font ?? []).map((o) => new FontLoader(o));
+		this.extFontLoaders = (options.extFont ?? []).map((o) => new CdnFontLoader(o));
+		this.videoLoaders = (options.video ?? []).map((o) => new VideoLoader(o));
+		this.totalAmount = this.imageLoaders.length + this.fontLoaders.length + this.extFontLoaders.length + this.videoLoaders.length;
+	}
+	async load() {
+		if (this.totalAmount === 0) {
+			this.loaded = true;
+			this.progress = 1;
+			this.onComplete();
+			return;
+		}
+		const imagePromises = this.imageLoaders.map((loader) => loader.load().then(() => {
+			this.loadedAmount += 1;
+			this._updateProgress();
+		}));
+		const fontPromises = this.fontLoaders.map((loader) => loader.load().then(() => {
+			this.loadedAmount += 1;
+			this._updateProgress();
+		}));
+		const extFontPromises = this.extFontLoaders.map((loader) => loader.load().then(() => {
+			this.loadedAmount += 1;
+			this._updateProgress();
+		}));
+		const videoProgressValues = this.videoLoaders.map(() => 0);
+		const videoPromises = this.videoLoaders.map((loader, index) => loader.load((progress) => {
+			const prev = videoProgressValues[index];
+			videoProgressValues[index] = progress;
+			this.loadedAmount += progress - prev;
+			this._updateProgress();
+		}));
+		await Promise.all([
+			...imagePromises,
+			...fontPromises,
+			...extFontPromises,
+			...videoPromises
+		]);
+		this.loaded = true;
+		this.loadedAmount = this.totalAmount;
+		this.progress = 1;
+		this.onComplete();
+	}
+	_updateProgress() {
+		this.progress = this.loadedAmount / this.totalAmount;
+	}
+};
+//#endregion
+export { BcAssetLoader as default };

package/dist/bc-asset-loader.js

@@ -0,0 +1,225 @@
+/*!
+* bc-asset-loader v1.0.0
+* (c) 2026 beicun
+* Released under the MIT License
+*/
+var BcAssetLoader = (function() {
+	//#region src/core/ImageLoader.ts
+	var ImageLoader = class {
+		url;
+		loaded = false;
+		constructor(options) {
+			this.url = options.url;
+		}
+		/**
+		* 画像をロードする。
+		* 失敗した場合はエラーをコンソールに出力し、resolve する（後続のロードを止めない）。
+		*/
+		load() {
+			return new Promise((resolve) => {
+				const img = new Image();
+				img.onload = () => {
+					this.loaded = true;
+					resolve();
+				};
+				img.onerror = () => {
+					console.error(`ImageLoader: Failed to load image "${this.url}".`);
+					resolve();
+				};
+				img.src = this.url;
+			});
+		}
+	};
+	//#endregion
+	//#region src/core/FontLoader.ts
+	var FontLoader = class {
+		url;
+		family;
+		weight;
+		style;
+		stretch;
+		loaded = false;
+		constructor(options) {
+			this.url = options.url;
+			this.family = options.family;
+			this.weight = options.weight ?? "400";
+			this.style = options.style ?? "normal";
+			this.stretch = options.stretch ?? "normal";
+		}
+		/**
+		* FontFace API を使ってフォントをロードし、document.fonts に登録する。
+		* 登録後は CSS で font-family 名を指定するだけで使用できるようになる。
+		* 失敗した場合はエラーをコンソールに出力し、処理を継続する。
+		*/
+		async load() {
+			const fontFace = new FontFace(this.family, `url(${this.url})`, {
+				weight: this.weight,
+				style: this.style,
+				stretch: this.stretch
+			});
+			try {
+				await fontFace.load();
+				document.fonts.add(fontFace);
+				this.loaded = true;
+			} catch (e) {
+				console.error(`FontLoader: Failed to load font "${this.family}".`, e);
+			}
+		}
+	};
+	//#endregion
+	//#region src/core/CdnFontLoader.ts
+	var CdnFontLoader = class {
+		url;
+		families;
+		loaded = false;
+		constructor(options) {
+			this.url = options.url;
+			this.families = options.families;
+		}
+		/**
+		* 外部Webフォントをロードする。
+		* <link> タグを注入してスタイルシートを読み込み、
+		* 指定したフォントファミリーが使用可能になるまで待つ。
+		* 失敗した場合はエラーをコンソールに出力し、resolve する（後続のロードを止めない）。
+		*/
+		load() {
+			return new Promise((resolve) => {
+				const link = document.createElement("link");
+				link.rel = "stylesheet";
+				link.href = this.url;
+				link.onload = async () => {
+					const checks = this.families.flatMap(({ family, weights, style }) => {
+						const styleStr = style === "italic" ? "italic" : "normal";
+						return (weights && weights.length > 0 ? weights : ["400"]).map((weight) => document.fonts.load(`${styleStr} ${weight} 16px "${family}"`));
+					});
+					try {
+						await Promise.all(checks);
+						this.loaded = true;
+					} catch (e) {
+						console.error(`CdnFontLoader: Failed to verify fonts from "${this.url}".`, e);
+					}
+					resolve();
+				};
+				link.onerror = () => {
+					console.error(`CdnFontLoader: Failed to load stylesheet "${this.url}".`);
+					resolve();
+				};
+				document.head.appendChild(link);
+			});
+		}
+	};
+	//#endregion
+	//#region src/core/VideoLoader.ts
+	var VideoLoader = class {
+		url;
+		loaded = false;
+		/** バッファ済みの割合（0〜1）。progress イベントのたびに更新される。 */
+		bufferProgress = 0;
+		constructor(options) {
+			this.url = options.url;
+		}
+		/**
+		* 動画をロードする。
+		* progress イベントでバッファ済み割合をリアルタイムに onProgress へ通知し、
+		* canplaythrough イベントを完了とみなして resolve する。
+		* 失敗した場合はエラーをコンソールに出力し、resolve する（後続のロードを止めない）。
+		* @param onProgress - バッファ済み割合（0〜1）を受け取るコールバック
+		*/
+		load(onProgress) {
+			return new Promise((resolve) => {
+				const video = document.createElement("video");
+				video.preload = "auto";
+				video.src = this.url;
+				video.addEventListener("progress", () => {
+					if (video.duration && video.buffered.length > 0) {
+						this.bufferProgress = video.buffered.end(video.buffered.length - 1) / video.duration;
+						onProgress(this.bufferProgress);
+					}
+				});
+				video.addEventListener("canplaythrough", () => {
+					this.bufferProgress = 1;
+					this.loaded = true;
+					onProgress(1);
+					resolve();
+				});
+				video.addEventListener("error", () => {
+					console.error(`VideoLoader: Failed to load video "${this.url}".`);
+					resolve();
+				});
+				video.load();
+			});
+		}
+	};
+	//#endregion
+	//#region src/index.ts
+	var BcAssetLoader = class {
+		loaded = false;
+		/**
+		* ロード済みの量。image・font・extFont は完了ごとに +1、
+		* video はバッファ済み割合（0〜1）をリアルタイムで加算するため小数になる場合がある。
+		*/
+		loadedAmount = 0;
+		/**
+		* アセットの総量。
+		* extFont は URL 単位で 1 としてカウントする。
+		*/
+		totalAmount = 0;
+		/** ロードの進捗（0〜1）。loadedAmount / totalAmount で計算される。 */
+		progress = 0;
+		onComplete;
+		imageLoaders;
+		fontLoaders;
+		extFontLoaders;
+		videoLoaders;
+		constructor(options) {
+			this.onComplete = options.onComplete ?? (() => {});
+			this.imageLoaders = (options.image ?? []).map((o) => new ImageLoader(o));
+			this.fontLoaders = (options.font ?? []).map((o) => new FontLoader(o));
+			this.extFontLoaders = (options.extFont ?? []).map((o) => new CdnFontLoader(o));
+			this.videoLoaders = (options.video ?? []).map((o) => new VideoLoader(o));
+			this.totalAmount = this.imageLoaders.length + this.fontLoaders.length + this.extFontLoaders.length + this.videoLoaders.length;
+		}
+		async load() {
+			if (this.totalAmount === 0) {
+				this.loaded = true;
+				this.progress = 1;
+				this.onComplete();
+				return;
+			}
+			const imagePromises = this.imageLoaders.map((loader) => loader.load().then(() => {
+				this.loadedAmount += 1;
+				this._updateProgress();
+			}));
+			const fontPromises = this.fontLoaders.map((loader) => loader.load().then(() => {
+				this.loadedAmount += 1;
+				this._updateProgress();
+			}));
+			const extFontPromises = this.extFontLoaders.map((loader) => loader.load().then(() => {
+				this.loadedAmount += 1;
+				this._updateProgress();
+			}));
+			const videoProgressValues = this.videoLoaders.map(() => 0);
+			const videoPromises = this.videoLoaders.map((loader, index) => loader.load((progress) => {
+				const prev = videoProgressValues[index];
+				videoProgressValues[index] = progress;
+				this.loadedAmount += progress - prev;
+				this._updateProgress();
+			}));
+			await Promise.all([
+				...imagePromises,
+				...fontPromises,
+				...extFontPromises,
+				...videoPromises
+			]);
+			this.loaded = true;
+			this.loadedAmount = this.totalAmount;
+			this.progress = 1;
+			this.onComplete();
+		}
+		_updateProgress() {
+			this.progress = this.loadedAmount / this.totalAmount;
+		}
+	};
+	//#endregion
+	return BcAssetLoader;
+})();

package/dist/bc-asset-loader.umd.js

@@ -0,0 +1,227 @@
+/*!
+* bc-asset-loader v1.0.0
+* (c) 2026 beicun
+* Released under the MIT License
+*/
+(function(global, factory) {
+	typeof exports === "object" && typeof module !== "undefined" ? module.exports = factory() : typeof define === "function" && define.amd ? define([], factory) : (global = typeof globalThis !== "undefined" ? globalThis : global || self, global.BcAssetLoader = factory());
+})(this, function() {
+	//#region src/core/ImageLoader.ts
+	var ImageLoader = class {
+		url;
+		loaded = false;
+		constructor(options) {
+			this.url = options.url;
+		}
+		/**
+		* 画像をロードする。
+		* 失敗した場合はエラーをコンソールに出力し、resolve する（後続のロードを止めない）。
+		*/
+		load() {
+			return new Promise((resolve) => {
+				const img = new Image();
+				img.onload = () => {
+					this.loaded = true;
+					resolve();
+				};
+				img.onerror = () => {
+					console.error(`ImageLoader: Failed to load image "${this.url}".`);
+					resolve();
+				};
+				img.src = this.url;
+			});
+		}
+	};
+	//#endregion
+	//#region src/core/FontLoader.ts
+	var FontLoader = class {
+		url;
+		family;
+		weight;
+		style;
+		stretch;
+		loaded = false;
+		constructor(options) {
+			this.url = options.url;
+			this.family = options.family;
+			this.weight = options.weight ?? "400";
+			this.style = options.style ?? "normal";
+			this.stretch = options.stretch ?? "normal";
+		}
+		/**
+		* FontFace API を使ってフォントをロードし、document.fonts に登録する。
+		* 登録後は CSS で font-family 名を指定するだけで使用できるようになる。
+		* 失敗した場合はエラーをコンソールに出力し、処理を継続する。
+		*/
+		async load() {
+			const fontFace = new FontFace(this.family, `url(${this.url})`, {
+				weight: this.weight,
+				style: this.style,
+				stretch: this.stretch
+			});
+			try {
+				await fontFace.load();
+				document.fonts.add(fontFace);
+				this.loaded = true;
+			} catch (e) {
+				console.error(`FontLoader: Failed to load font "${this.family}".`, e);
+			}
+		}
+	};
+	//#endregion
+	//#region src/core/CdnFontLoader.ts
+	var CdnFontLoader = class {
+		url;
+		families;
+		loaded = false;
+		constructor(options) {
+			this.url = options.url;
+			this.families = options.families;
+		}
+		/**
+		* 外部Webフォントをロードする。
+		* <link> タグを注入してスタイルシートを読み込み、
+		* 指定したフォントファミリーが使用可能になるまで待つ。
+		* 失敗した場合はエラーをコンソールに出力し、resolve する（後続のロードを止めない）。
+		*/
+		load() {
+			return new Promise((resolve) => {
+				const link = document.createElement("link");
+				link.rel = "stylesheet";
+				link.href = this.url;
+				link.onload = async () => {
+					const checks = this.families.flatMap(({ family, weights, style }) => {
+						const styleStr = style === "italic" ? "italic" : "normal";
+						return (weights && weights.length > 0 ? weights : ["400"]).map((weight) => document.fonts.load(`${styleStr} ${weight} 16px "${family}"`));
+					});
+					try {
+						await Promise.all(checks);
+						this.loaded = true;
+					} catch (e) {
+						console.error(`CdnFontLoader: Failed to verify fonts from "${this.url}".`, e);
+					}
+					resolve();
+				};
+				link.onerror = () => {
+					console.error(`CdnFontLoader: Failed to load stylesheet "${this.url}".`);
+					resolve();
+				};
+				document.head.appendChild(link);
+			});
+		}
+	};
+	//#endregion
+	//#region src/core/VideoLoader.ts
+	var VideoLoader = class {
+		url;
+		loaded = false;
+		/** バッファ済みの割合（0〜1）。progress イベントのたびに更新される。 */
+		bufferProgress = 0;
+		constructor(options) {
+			this.url = options.url;
+		}
+		/**
+		* 動画をロードする。
+		* progress イベントでバッファ済み割合をリアルタイムに onProgress へ通知し、
+		* canplaythrough イベントを完了とみなして resolve する。
+		* 失敗した場合はエラーをコンソールに出力し、resolve する（後続のロードを止めない）。
+		* @param onProgress - バッファ済み割合（0〜1）を受け取るコールバック
+		*/
+		load(onProgress) {
+			return new Promise((resolve) => {
+				const video = document.createElement("video");
+				video.preload = "auto";
+				video.src = this.url;
+				video.addEventListener("progress", () => {
+					if (video.duration && video.buffered.length > 0) {
+						this.bufferProgress = video.buffered.end(video.buffered.length - 1) / video.duration;
+						onProgress(this.bufferProgress);
+					}
+				});
+				video.addEventListener("canplaythrough", () => {
+					this.bufferProgress = 1;
+					this.loaded = true;
+					onProgress(1);
+					resolve();
+				});
+				video.addEventListener("error", () => {
+					console.error(`VideoLoader: Failed to load video "${this.url}".`);
+					resolve();
+				});
+				video.load();
+			});
+		}
+	};
+	//#endregion
+	//#region src/index.ts
+	var BcAssetLoader = class {
+		loaded = false;
+		/**
+		* ロード済みの量。image・font・extFont は完了ごとに +1、
+		* video はバッファ済み割合（0〜1）をリアルタイムで加算するため小数になる場合がある。
+		*/
+		loadedAmount = 0;
+		/**
+		* アセットの総量。
+		* extFont は URL 単位で 1 としてカウントする。
+		*/
+		totalAmount = 0;
+		/** ロードの進捗（0〜1）。loadedAmount / totalAmount で計算される。 */
+		progress = 0;
+		onComplete;
+		imageLoaders;
+		fontLoaders;
+		extFontLoaders;
+		videoLoaders;
+		constructor(options) {
+			this.onComplete = options.onComplete ?? (() => {});
+			this.imageLoaders = (options.image ?? []).map((o) => new ImageLoader(o));
+			this.fontLoaders = (options.font ?? []).map((o) => new FontLoader(o));
+			this.extFontLoaders = (options.extFont ?? []).map((o) => new CdnFontLoader(o));
+			this.videoLoaders = (options.video ?? []).map((o) => new VideoLoader(o));
+			this.totalAmount = this.imageLoaders.length + this.fontLoaders.length + this.extFontLoaders.length + this.videoLoaders.length;
+		}
+		async load() {
+			if (this.totalAmount === 0) {
+				this.loaded = true;
+				this.progress = 1;
+				this.onComplete();
+				return;
+			}
+			const imagePromises = this.imageLoaders.map((loader) => loader.load().then(() => {
+				this.loadedAmount += 1;
+				this._updateProgress();
+			}));
+			const fontPromises = this.fontLoaders.map((loader) => loader.load().then(() => {
+				this.loadedAmount += 1;
+				this._updateProgress();
+			}));
+			const extFontPromises = this.extFontLoaders.map((loader) => loader.load().then(() => {
+				this.loadedAmount += 1;
+				this._updateProgress();
+			}));
+			const videoProgressValues = this.videoLoaders.map(() => 0);
+			const videoPromises = this.videoLoaders.map((loader, index) => loader.load((progress) => {
+				const prev = videoProgressValues[index];
+				videoProgressValues[index] = progress;
+				this.loadedAmount += progress - prev;
+				this._updateProgress();
+			}));
+			await Promise.all([
+				...imagePromises,
+				...fontPromises,
+				...extFontPromises,
+				...videoPromises
+			]);
+			this.loaded = true;
+			this.loadedAmount = this.totalAmount;
+			this.progress = 1;
+			this.onComplete();
+		}
+		_updateProgress() {
+			this.progress = this.loadedAmount / this.totalAmount;
+		}
+	};
+	//#endregion
+	return BcAssetLoader;
+});

package/package.json

@@ -0,0 +1,33 @@
+{
+  "name": "bc-asset-loader",
+  "version": "1.0.0",
+  "author": "beicun",
+  "license": "MIT",
+  "type": "module",
+  "scripts": {
+    "dev": "vite --config vite.config.dev.ts",
+    "build": "tsc && vite build",
+    "preview": "vite preview",
+    "format": "prettier --write \"src/**/*.ts\" \"demo/**/*.{ts,html,css}\""
+  },
+  "main": "./dist/bc-asset-loader.cjs.js",
+  "module": "./dist/bc-asset-loader.es.js",
+  "types": "./dist/bc-asset-loader.d.ts",
+  "exports": {
+    ".": {
+      "import": "./dist/bc-asset-loader.es.js",
+      "require": "./dist/bc-asset-loader.cjs.js",
+      "types": "./dist/bc-asset-loader.d.ts"
+    }
+  },
+  "files": [
+    "dist"
+  ],
+  "devDependencies": {
+    "@types/node": "^25.5.0",
+    "prettier": "^3.8.1",
+    "typescript": "~5.9.3",
+    "vite": "^8.0.1",
+    "vite-plugin-dts": "^4.5.4"
+  }
+}