ImageCollector2 実装仕様書

ImageCollector2_plan.md

ImageCollector2 実装仕様書

概要

ImageCollector2は、Webページ上の画像を効率的に収集し、ユーザーに視覚的に表示し、ダウンロードリンクを提供するUserscriptです。TampermonkeyやFirefoxの右クリックメニューから起動し、収集した画像をモーダルウィンドウ内でグリッドレイアウトで表示します。

• 使用技術: Userscript (JavaScript), HTML, CSS
• リクエスト: CORS制限を回避するため、全てGM_xmlhttpRequestを使用。fetchは使用しない。
• 構造: クラスベースで構造化された実装を採用。
• デバッグ: クラスはunsafeWindowに露出され、コンソールから操作可能。

---

処理の流れ

1. 起動: Tampermonkeyメニューまたは右クリックメニュー（Firefoxのみ）から起動。
2. 進捗表示: 進捗表示バーで収集状況を表示。
3. 画像収集: 裏で画像収集を実行。
4. モーダル表示: 収集した画像をグリッドレイアウトでモーダル内に表示。
5. ユーザー操作: 全画面表示、ダウンロード、元リンク表示などの操作が可能。
6. 終了: 閉じるボタンまたはモーダルの欄外クリックでモーダルを閉じる。

---

UIデザイン

モーダルスタイル

• 背景: 黒めの灰色で覆い、モーダルが際立つデザイン。欄外クリックで閉じることが直感的に分かる。
• モーダル本体: 半透明のガラススタイル（Frosted Glass）。
• 閉じるボタン: モーダル内に配置。
• グリッドレイアウト: 画像が美しく理路整然と配置され、少し透けたスタイル。
• 全画面モード:
  • 画像をクリックで全画面表示。
  • 上部にファイル名を表示。
  • ダウンロードボタンと元リンクへのリンクを提供。
• 巨大ファイル対応: ファイルサイズが大きすぎる画像はプレースホルダーを表示し、サイズ確認後に読み込み可能。

---

主なクラス

1. MenuRegister

   • Tampermonkeyのメニューを管理。
   • 起動コマンドを登録。

2. UIBuilder

   • モーダルやグリッドレイアウトのUIを構築。

3. UIStyles

   • UI用のCSSスタイルを管理。
   • 半透明ガラススタイルやグリッドデザインを定義。

4. UIBatchUpdater

   • 構築済みのUIに画像データをバッチ処理で追加。

5. UIEventHandler

   • モーダルのクリック、全画面表示、ダウンロードなどのイベントを処理。

6. ImageCollectorMain

   • 画像収集の心臓部。詳細は後述。

7. BadImageHandler

   • 小さすぎる、大きすぎる、表示不可、リクエスト失敗などの画像を除去。

8. Toast

   • トースト通知を表示（成功・失敗通知など）。

9. ProgressBar

   • 収集進捗をプログレスバーで表示。

10. RequestBatchLimiter

    • リクエスト制限とバッチ処理を管理。
    • サーバー負荷を考慮した非同期処理。

---

ImageCollectorMain の詳細

画像収集方法

以下の方法で画像を取得し、RequestBatchLimiterと連携して低負荷・高速処理を実現。

1. img要素: src属性から取得。
2. picture要素: source要素から取得。
3. a要素: hrefから画像URLを取得。
4. 背景画像: background-imageスタイルから取得。
5. リダイレクト対応:
   • URL内に別のURLが含まれる場合（例: https://www.example.com/redirect?https://www.example2.com/example.jpg）、リダイレクトを検知・解決。
6. SNS対応:
   • Twitter(X)やその他SNSの画像URLに対応。
7. イメージホスト対応:
   • 世界の有名イメージホストサービスのURLをサポート。
   • URLリストは一元管理され、後から簡単に追加可能。

処理方針

• 非同期処理: GM_xmlhttpRequestを使用し、非同期でリクエスト。
• 負荷考慮: イメージホストおよびファーストパーティサーバーへの負荷を最小限に。
• 柔軟性: 新しい収集方法やURLパターンを簡単に追加可能。

---

技術的制約と対策

• CORS制限: fetchを使わず、GM_xmlhttpRequestで回避。
• サーバー負荷: RequestBatchLimiterでリクエストを制限・バッチ化。
• 巨大ファイル: BadImageHandlerでプレースホルダー表示を管理。

---

デバッグ

• 全てのクラスはunsafeWindowに露出。
• コンソールからクラスインスタンスを操作可能。

---

今後の拡張性

• 新しい画像ホストやSNSのURLパターンを追加する際、設定ファイルを更新するだけで対応可能。
• UIのカスタマイズ性を高めるため、UIStylesにテーマ機能を追加予定。
• ファイル名はImageCollector2.user.jsとする。