30分で激変！Screenshot MCPにPDF対応と座標取得を追加したら最強ツールになった話

// BrowserManagerクラスのブラウザ起動オプションに追加
args.push('--disable-web-security');        // セキュリティ制限を解除
args.push('--allow-file-access-from-files'); // ローカルファイルアクセス許可

// PDFファイルパスをfile://形式に変換
if (urlOrPath.endsWith('.pdf')) {
  const absolutePath = path.resolve(urlOrPath);
  targetUrl = `file:///${absolutePath.replace(/\\/g, '/')}`;
  
  // ページ番号も指定可能（#page=n形式）
  if (pageNumber > 1) {
    targetUrl += `#page=${pageNumber}`;
  }
}

あなた：「PDFファイルを撮影してください」

Claude：（screenshot_pdfツールを実行）
✅ PDFスクリーンショット撮影成功！

PDFファイル: C:\Users\YourName\Documents\contract.pdf
ページ番号: 1
保存先: C:\Users\YourName\Downloads\screenshots\contract_screenshot_2025-08-13_1000.png
フルページ: いいえ

async function captureWithElements(url: string) {
  // ページ内のすべてのクリック可能要素を検出
  const elements = await page.evaluate(() => {
    const clickableElements = [];
    const selectors = ['button', 'a', 'input', 'select', '[onclick]'];
    
    selectors.forEach(selector => {
      const elements = document.querySelectorAll(selector);
      elements.forEach(el => {
        const rect = el.getBoundingClientRect();
        clickableElements.push({
          tagName: el.tagName,
          text: el.innerText,
          x: rect.x,
          y: rect.y,
          width: rect.width,
          height: rect.height
        });
      });
    });
    
    return clickableElements;
  });
  
  // JSONファイルとして保存
  await fs.writeFile('elements.json', JSON.stringify(elements));
}

✅ 要素座標付きスクリーンショット撮影成功！

URL: https://www.google.com
画像保存先: C:\Users\YourName\Downloads\screenshots\www_google_com_elements_map_2025-08-13_0937.png
要素情報保存先: C:\Users\YourName\Downloads\screenshots\www_google_com_elements_map_2025-08-13_0937_elements.json
検出された要素数: 20個

主要な要素（上位10個）:
- a: "Googleについて" [21,15]
- a: "ストア" [142,15]
- a: "Gmail" [1687,16]
- a: "画像" [1736,16]
- a: "ログイン" [1825,8]
- a: "広告" [20,1030]
- a: "ビジネス" [78,1030]
- a: "検索の仕組み" [164,1030]

【シナリオ】: お問い合わせフォームの自動入力

1. Screenshot MCPで入力欄を検出
「お問い合わせページの要素座標を取得してください」
→ 以下の要素を検出：
   - input[name="name"]: [100, 200]
   - input[name="email"]: [100, 250]
   - textarea[name="message"]: [100, 300]
   - button[type="submit"]: [200, 400]

2. Browser Automation MCPを起動
「ブラウザを起動してお問い合わせページを開いてください」
→ browser_launchとnavigate_toツールで準備完了

3. 各入力欄に自動入力
「名前欄[100,200]をクリックして'山田太郎'と入力」
→ click_elementとtype_textツールで入力

「メール欄[100,250]をクリックして'yamada@example.com'と入力」
→ 同様に処理

4. 送信ボタンをクリック
「送信ボタン[200,400]をクリック」
→ フォーム送信完了！

あなた：「elements.jsonから、クリック可能な領域を
        視覚化したHTMLを作成してください」

Claude：「承知しました。クリック可能マップのHTMLを生成します」

<!-- clickable_map.html -->
<div class="clickable-area" 
     style="position: absolute; left: 100px; top: 200px; 
            width: 150px; height: 30px; 
            border: 2px solid red;">
  <span class="tooltip">名前入力欄</span>
</div>

# Webフォームの自動入力デモ
## 対象サイト
https://forms.gle/hscacc9WWDzZW1UeA
## 実行手順
1. Browser MCPでブラウザを起動（headless: false）
2. フォームページにアクセス
3. Screenshot MCPで要素座標付きスクリーンショットを撮影
4. 取得した要素情報から入力フィールドを特定
5. Browser MCPで各フィールドに自動入力：
   - 名前: "YaroTech"
   - メール: "test@example.com"
   - コメント: "MCPによる自動入力テスト"
6. 送信ボタンの座標を特定してクリック
7. 完了画面をスクリーンショット
各ステップで座標情報とスクリーンショットを表示してください。

1ページのPDFは完璧に撮影成功！
「よし、これで完成だ！」

↓ 複数ページPDFで試すと...

「あれ？1ページ目しか撮れない...」

// パターン1: ページ番号をURLに追加
targetUrl = `file:///${pdfPath}#page=2`;  // ❌ 効かない

// パターン2: PDFのパラメータを試す
targetUrl = `file:///${pdfPath}?page=2`;  // ❌ これも効かない

// パターン3: アンカーを使う
targetUrl = `file:///${pdfPath}#2`;      // ❌ ダメ

「Screenshot MCPで複数ページが無理なら...
 Browser MCPでPDFを開いてみよう」

↓ Browser MCPでテスト

「え！？Browser MCPならPDFのページ送りができる！」

// 1. Browser MCPでPDFを開く
await browser_launch();
await navigate_to(`file:///${pdfPath}`);

// 2. PDFビューアのページ送りボタンをクリック
await wait_for_element('[aria-label="Next page"]');
await click_element('[aria-label="Next page"]');

// 3. 2ページ目を撮影
await take_screenshot('pdf_page2.png');

「よし、PDF対応を追加しよう！」
↓ index.tsを修正
↓ さらに座標取得機能も追加
↓ エラーが出たので元に戻そうと...

「あ...バックアップ取ってない！元のコードが...」

@echo off
echo 利用可能なバックアップ:
echo 1. 初期バージョン（v1.0.0）
echo 2. PDF対応版（v1.1.0）
echo 3. 座標取得版（v2.0.0）
set /p choice="復元するバージョンを選択 (1-3): "

if "%choice%"=="1" (
    copy backup\index_v1.0.0.ts src\index.ts
    echo ✅ v1.0.0に復元しました
) else if "%choice%"=="2" (
    copy backup\index_v1.1.0.ts src\index.ts
    echo ✅ v1.1.0（PDF対応版）に復元しました
) else if "%choice%"=="3" (
    copy backup\index_v2.0.0.ts src\index.ts
    echo ✅ v2.0.0（最新版）に復元しました
)

npm run build
echo 🎉 ビルド完了！MCPサーバーを再起動してください

開発前に必ず実行：
copy src\index.ts backup\index_%date:~0,4%%date:~5,2%%date:~8,2%.ts

ワークフロー：
1. PDF Reader MCPで契約書を読み込み
2. 画像形式の場合、Screenshot MCPで各ページを撮影
3. 重要な箇所（署名欄、金額、日付）を座標で特定
4. 画像認識APIに渡して内容を確認

ワークフロー：
1. Screenshot MCPで入力フォームの座標を取得
2. 各入力欄の位置を特定
3. Browser MCPで座標をクリックして入力
4. 送信ボタンの座標もクリック

ワークフロー：
1. screenshot_with_elementsでページ全体を分析
2. クリック可能領域のサイズを確認
3. 44×44ピクセル未満の要素を検出
4. 改善レポートを自動生成

screenshots/
├── webpage_screenshot_20250813_100000.png      # 画像
├── webpage_elements_map_20250813_100100.png    # 画像
├── webpage_elements_map_20250813_100100.json   # 座標データ
└── clickable_map.html                          # 可視化マップ

PDF対応: 30分（調査10分＋実装20分）
座標取得: 45分（設計15分＋実装30分）
連携デモ: 15分（スクリプト作成）
合計: 1.5時間（約束通り！）