PinshotDrive 📸
PinshotDriveは、Webブラウザ上の固定された領域をショートカットキーひとつで連続撮影し、Googleドライブへ自動保存するChrome拡張機能です。
システム監視の定点観測、テストのエビデンス取得、動画のキャプチャなど、「同じ場所を何度も記録したい」シーンで圧倒的な効率化を実現します。
✨ 主な機能
- 固定領域の連続撮影: 一度範囲を指定すれば、あとはショートカットキー (
Ctrl+Shift+S) を押すだけ。
- Googleドライブ直行: ローカルを経由せず、Googleドライブ内の
PinshotDrive フォルダに自動アップロード。
- 高速なレスポンス (Optimistic UI): 撮影ボタンを押した瞬間にバッジを更新。裏側でアップロードを行うため、処理待ち時間はゼロです。
- 非同期キューイング処理: 連打しても処理落ちしないよう、バックグラウンドでリクエストをキューイング（順番待ち）して安全に処理します。
- 履歴ログ機能: ポップアップから直近の撮影履歴を確認可能。成功したログからはGoogleドライブのプレビューへ直接アクセスできます。
- Manifest V3準拠: Googleの最新仕様であるManifest V3、Service Worker、Offscreen APIを採用したモダンな設計。
🛠 技術スタック
- Platform: Chrome Extension (Manifest V3)
- Languages: JavaScript (ES2022), HTML5, CSS3
- APIs:
- Google Drive API v3
- Chrome Identity API (OAuth2)
- Chrome Scripting API
- Chrome Offscreen API (Canvasによる画像トリミング)
- Chrome Storage API (unlimitedStorage)
📦 インストール方法 (開発者向け)
このリポジトリをクローンして、Chromeに読み込ませる手順です。
- リポジトリのクローン
git clone [https://github.com/ユーザー名/PinshotDrive.git](https://github.com/ユーザー名/PinshotDrive.git)
- Chromeへの読み込み
- Chromeブラウザで
chrome://extensions/ を開く。
- 右上の「デベロッパーモード」をONにする。
- 「パッケージ化されていない拡張機能を読み込む」をクリック。
- クローンしたフォルダを選択。
- Google Cloud設定 (自身のIDを使う場合)
manifest.json 内の client_id は開発者個人のGoogle Cloudプロジェクトに紐付いています。- フォークして自身で使用する場合は、Google Cloud Consoleでプロジェクトを作成し、OAuth2クライアントIDを取得して
manifest.json を書き換える必要があります。
- 必要なスコープ:
https://www.googleapis.com/auth/drive.file
📖 使い方
- 連携: 拡張機能アイコンをクリックし、ポップアップ内の「Googleと連携する」ボタンを押して認証します。
- 範囲指定: 「📷 範囲を選択する」ボタンを押し、Webページ上で撮影したいエリアをドラッグして保存します。
- 撮影: 任意のタイミングでショートカットキー (
Ctrl+Shift+S / Mac: Command+Shift+S) を押します。
- 確認: アイコンのバッジ数が増えます。ポップアップを開くと履歴ログが表示され、リンクから画像を閲覧できます。
📂 ディレクトリ構成
```text
PinshotDrive/
├── manifest.json # 設定ファイル (V3)
├── background.js # バックグラウンド処理 (Service Worker)
├── popup.html # ポップアップ画面 (UI)
├── popup.js # ポップアップのロジック
├── popup.css # ポップアップのスタイル
├── selector.js # 範囲選択用スクリプト (Content Script)
├── offscreen.html # 画像処理用HTML
├── offscreen.js # 画像トリミング処理 (Canvas)
└── icons/ # アイコン画像