📅 2025年12月26日 06:12

エッジで高速スクレイピング：SvelteKit＋Cloudflare Workersで作るサクサク漫画リーダー

要約

海外開発者がSvelteKitとCloudflare Workersを使い、広告無しで高速に動く「漫画リーダー」をエッジで実装した事例を解説。スクレイピングをエッジで実行し、画像のホットリンク対策をプロキシで回避するアプローチが中心。

この記事を読むべき理由

日本は世界でも漫画文化が強く、モバイル回線での読みやすさや広告対策は実用的なニーズ。エッジでの軽量スクレイピング設計は、国内向けサービス／個人プロジェクトにも即応用できる実践的な知見が得られる。

詳細解説

• 技術スタック（要点）
  • SvelteKit：SSRと高速描画、開発体験が良好でフロントエンド責務を明確にできる。
  • Cloudflare Workers：エッジでスクレイピング処理を実行し、ユーザーに低遅延でデータを返す。日本（東京）にもエッジがあり国内配信で有利。
  • Cheerio：軽量なHTMLパーサーでサーバ側のDOM抽出に適合。
  • TailwindCSS：モバイル優先のUIを素早く構築。
• アーキテクチャ（流れ）
  1. フロント（SvelteKit）から「作品/章」を要求。
  2. 要求はCloudflare Workerに到達。Workerが対象サイトからHTMLをfetch。
  3. Cheerioで必要な情報（タイトル、ページ画像URL、目次）だけを抽出。広告・トラッカーは除去。
  4. クリーンなJSONを返却。クライアントが即座にレンダリング。
  5. 画像に関しては多くのサイトがRefererチェック（ホットリンク防止）を行うため、画像取得用プロキシを用意してRefererを付与して取得・中継する。
• 画像プロキシ（ホットリンク回避） フロントが直接外部の画像URLを参照すると拒否されるため、Worker側でRefererを付けてフェッチし、透過的に返す。例（Cloudflare Worker / SvelteKit内のエンドポイント）:

export async function GET({ url }) {
  const imageUrl = url.searchParams.get('src');
  const sourceReferer = 'https://original-manga-site.com';
  const res = await fetch(imageUrl, { headers: { 'Referer': sourceReferer } });
  return new Response(res.body, {
    status: res.status,
    headers: {
      'Content-Type': res.headers.get('Content-Type') || 'image/jpeg',
      // 必要に応じてキャッシュ制御を追加
    }
  });
}

• 拡張性：アダプターパターン 各スキャンサイトのHTML構造が違うため、サイトごとの抽出ロジックを「アダプター」として分離。新しいサイト対応はアダプターを追加するだけにして保守性を高める。

• 注意点（法的・技術的）

  • 元記事同様「コンテンツをホストしない」アプローチが採られているが、著作権や利用規約違反のリスクは常に確認すること。
  • 取得先サイトのレート制限、robots.txt、利用規約に配慮する。
  • CloudflareのWorkers実行時間・帯域制限、キャッシュ戦略を設計すること。

実践ポイント

• まずは小さなプロトタイプ：SvelteKitでUI、Cloudflare Workersでfetch→Cheerio→JSON返却を実装してみる。
• 画像はプロキシ経由でRefererをつけて中継。必要ならCache-Controlでエッジキャッシュを有効に。
• 各サイトごとにアダプターを作り、共通パイプライン（fetch → parse → normalize）に差し込む設計にする。
• 法務チェック：著作権と対象サイトの利用規約を必ず確認。公開前にリスク評価を行う。
• パフォーマンス計測：実ユーザーの接続経路でエッジの効果を確認（東京〜地方間のレイテンシ比較など）。
• UIはモバイルファーストで、画像プリロードやページ遷移の遅延を最小化する工夫を。

引用元

• タイトル: Scraping on the Edge: How I Built a Lightning-Fast Manga Reader with SvelteKit
• URL: https://dev.to/adrian_fathan/scraping-on-the-edge-how-i-built-a-lightning-fast-manga-reader-with-sveltekit-h8o

📌 引用元:
Scraping on the Edge: How I Built a Lightning-Fast Manga Reader with SvelteKit
Hacker News Score: | Comments: