Claudeに「目」を与える！Screenshot MCPでWebページを自動撮影する魔法のツール
こんにちは！YaroTechです。
昨日のDay33で、PDFの文字を読み取る機能（OCR）の実装に6時間かけて挑戦しましたが、最終的に断念しました。
でも、その失敗から新しいアイデアが生まれました。
「PDFを画像にして、それを既存のOCRツール（Google DriveやAdobe）に渡せばいいじゃない！」
この逆転の発想から生まれたのが、今日ご紹介するScreenshot MCPです。
🖥️ 実行環境
PC: Windows 11（Surface Laptop）
必要なソフト: Claude Desktop、Node.js
作業時間: 約1.5時間（クロ助のおかげで高速開発！）
🎯 この記事で得られること
画面を自動で撮影するツールの作り方
失敗から新しいアイデアを生む方法
すぐに使える3つの活用例
技術知識ゼロでも使える設定方法
📊 Screenshot MCPとは？
一言で説明すると...
「Claudeにカメラを持たせて、Webページを自動撮影させるツール」
身近な例で言うと...
スマホのスクリーンショット機能と同じです。でも、以下が違います：
| スマホのスクショ | Screenshot MCP |
|--------------------------------|--------------------------------------------|
| 手動でボタンを押す | Claudeに「撮って」と言うだけ |
| 画面に見える部分だけ | ページ全体を1枚の画像に |
| 1枚ずつ撮影 | 複数ページを自動で連続撮影 |
🚀 なぜPuppeteerを選んだのか
レストランのメニューに例えると...
Webページを撮影するツールは、レストランのコース料理のようなものです：
Playwright = 高級フレンチのフルコース（豪華だけど重い）
Selenium = 老舗料亭の懐石料理（格式高いけど準備が大変）
Puppeteer = 定食屋のセットメニュー（シンプルで使いやすい！）✨
私たちに必要なのは「簡単に使えて、確実に動くもの」でした。
※もちろん提案してくれたのはクロ助（ClaudeDesktop）です！
Puppeteerの魅力を家電に例えると
全自動洗濯機のような手軽さ：
1. スイッチON（起動）
2. 洗濯物を入れる（URL指定）
3. ボタンを押す（実行）
→ きれいに仕上がる（画像保存）🔧 開発の様子（1.5時間の記録）
10:00 - 準備開始
必要なものをインストール。コーヒーを飲みながら待機。
最初のインストール：npmパッケージのインストール（10数秒で完了）
setup.batを実行すると、必要なnpmパッケージがインストールされます。
実際にはPuppeteerが初回実行時にChromiumをダウンロードします（約150MB）。
10:30 - 最初の挑戦
まず、下記プロンプトで一番シンプルな形から始めました。
「Googleのトップページを撮影する」だけの機能です。
下記画像をスクリーンショット撮って保存してくれました。
11:00 - つまずきポイント
設定ファイルの書き方で少しつまずきました。
でも、たった1行追加するだけで解決！
解決策：「モジュール形式」という設定を追加
（詳しく知らなくても大丈夫です）11:30 - 完成！🎉
クロ助（Claude Desktop）が効率的にコードを生成してくれたおかげで、わずか1.5時間で完成！
📸 実際の動作を見てみましょう
デモ1: Googleを撮影
あなた：「https://www.google.com のスクリーンショットを撮って」
Claude：
✅ 撮影成功しました！
撮影したページ: Google
保存場所: C:\Users\YourName\Downloads\screenshots\
ファイル名: google_com_screenshot_20250812_140523.png
エクスプローラーで開いてご確認ください！実際の画像：Googleのトップページがそのまま画像ファイルになります。
デモ2: 縦長のページも1枚に！
あなた：「Wikipediaの日本のページ全体を撮影して」
Claude：
✅ ページ全体の撮影に成功しました！
撮影したページ: Wikipedia - 日本
ファイルサイズ: 縦12,580ピクセルの巨大画像！
通常のスクショでは10回以上必要なページが、
1枚の画像になりました。※下記画像は縮小してますがかなり長いスクショ画像になっています。
デモ3: 存在しないページへの対応
あなた：「ヤホー」と入力
→ Claudeは「Yahoo」のページを撮影
あなた：「Yahow」と入力
→ Claudeは「Yahow.com」のページを撮影（リダイレクトされる可能性）
あなた：「Yahow.co.jp」と入力
→ 存在しないページのエラーが表示
Claude：
❌ 申し訳ございません、撮影できませんでした。
理由: ページが見つかりません
対処法:
1. URLのスペルを確認してください
2. インターネット接続を確認してください
3. しばらく待ってから再度お試しくださいURLの解釈には注意が必要で、正確なURLを指定することが重要です。
※スクショした画像２つ
💡 開発で学んだ3つの教訓
1. 小さく始める
最初は「Googleを撮影する」だけから始めました。
いきなり完璧を目指さず、まず動くものを作る。
料理で例えると：
❌ いきなりフルコース料理に挑戦
⭕ まず目玉焼きから練習
2. エラーは成長のチャンス
エラーが出るたびに、新しい発見がありました：
「時間がかかるページがある」→ 待機時間を設定
「URLが間違っている」→ 確認機能を追加
「メモリが足りない」→ 定期的にリセット機能を実装
3. ユーザー目線で考える
専門用語は使わず、分かりやすいメッセージに：
❌ 「ERR_NAME_NOT_RESOLVED」
⭕ 「ページが見つかりません。URLをご確認ください」
🎨 すぐに使える3つの活用例
活用例1: 毎朝のダッシュボード撮影
シーン: 毎朝、複数のサイトの数値を確認している方へ
朝9時に自動実行：
1. Google Analytics（アクセス数）
2. 売上管理システム
3. 在庫管理画面
→ 3枚の画像が自動で保存される
→ それを見るだけで朝の確認完了！効果: 各サイトにログインする手間が省けて、15分→1分に短縮
活用例2: 競合サイトの定期チェック
シーン: 競合他社の価格や商品をチェックしている方へ
1時間ごとに自動実行：
- 競合A社の価格ページ
- 競合B社の新商品ページ
→ 変更があったら通知
→ 価格変更にすぐ対応できる効果: 手動チェックが不要になり、見逃しゼロに
活用例3: Webページの記録保存
シーン: 重要なWebページを画像として保存したい方へ
ワークフロー：
1. 契約書や重要な通知のWebページ
2. Screenshot MCPで画像化
3. 日付付きファイル名で自動保存
4. 証拠として長期保管効果: 後から「あの時のページ」を確認できる
🚀 設定方法（コピペでOK）※「公開希望」のコメントはあれば公開予定※
ステップ1: ファイルをダウンロード
記事内のコードをダウンロードして、以下の場所に保存：
※「公開希望」コメントありましたら公開しますね！
C:\Users\YourName\Documents\mcp-projects\screenshot-mcp\ステップ2: セットアップ実行
付属の`setup.bat`をダブルクリック。
※クロ助（ClaudeDesktop）が作ったバッチファイル（クリックするだけでいろんな設定ができる便利なファイル）のエラー問題については別途、記事にしたいと思います。
npmパッケージのインストールが始まります（10数秒で完了）。
実際の処理内容：
npmパッケージのインストール（10数秒）
Chromiumの自動ダウンロード（バックグラウンドで実行、約300MB）
保存先：`%APPDATA%\.cache\puppeteer`フォルダ（自動作成）
※ダウンロード表示はありませんが、インターネット速度により1-5分かかります。
ステップ3: Claude Desktopに追加
Claude Desktopの設定ファイルに、以下をコピペ：
場所: %APPDATA%\Claude\claude_desktop_config.json
追加する内容:
"screenshot": {
"command": "node",
"args": ["C:\\Users\\YourName\\Documents\\mcp-projects\\screenshot-mcp\\dist\\index.js"]
}ステップ4: 完了！
Claude Desktopを再起動して、
「スクリーンショットツールを表示」
と話しかけてみてください。
📁 撮影した画像の保存場所
デフォルトの保存先:
C:\Users\YourName\Downloads\screenshots\ファイル名の例:
`google_com_screenshot_20250812_140523.png`
`wikipedia_org_fullpage_20250812_141035.png`
日付と時刻が自動で付くので、いつ撮影したか一目で分かります。
🔧 技術的な補足
メモリ管理機能（実装済み）
ソースコードを確認したところ、BrowserManagerクラスでメモリ管理が実装されています：
機能の仕組み：
- ブラウザインスタンスを10回使用後に自動で再起動
- メモリの蓄積を防ぐ効果的な対策
- 長時間の連続使用でも安定動作現在の制限事項と今後の拡張予定
PDFファイルの直接スクリーンショット：
現在のバージョンでは、WebページのURL（http://またはhttps://）のみ対応しています。
ローカルPDFファイルの直接撮影はできません。クロ助（ClaudeDesktop）にはPDFのスクリーンショットも要件に含めていたのですが、今回は漏れていたようです。
ただし、朗報があります！
調査の結果、わずか数行のコード追加でPDF対応が可能なことが判明しました。
具体的には、Puppeteerのブラウザ起動オプションに2行追加するだけで実現できます。
今すぐ使える回避策：
PDFをChromeブラウザで開く
アドレスバーから`file:///C:/Users/...`形式のURLをコピー
そのURLをScreenshot MCPに渡す
Day35での改善予定：
✨ PDFの直接スクリーンショット機能を実装
✨ 複数ページPDFの一括撮影機能
✨ PDF内の特定ページ指定機能
Browser Automation MCPとの連携可能性
ブラウザMCPとの違い：
Screenshot MCP: ヘッドレスブラウザ（画面に表示されない）で撮影
Browser Automation MCP: 実際のブラウザを操作
現在可能な連携パターン：
検証フロー: Browser MCPで操作 → Screenshot MCPで結果撮影
デバッグフロー: Screenshot MCPで問題箇所を特定 → Browser MCPで修正
証跡保存: 操作前後のスクリーンショットを自動保存
Day35での拡張予定：
✨ 要素座標取得機能: ボタンやリンクの位置を自動検出
✨ クリック可能マップ生成: どこがクリックできるか視覚化
✨ 統合ワークフロー: 撮影と操作を組み合わせた自動テストツール
将来的には「ビジュアル自動ツール」への進化を目指します！
🔗 関連記事
今回の内容に関連する過去記事もぜひご覧ください：
📝 まとめ
実現できたこと
✅ 1.5時間で完成（クロ助の効率的なコード生成のおかげ）
✅ Webページの自動撮影（Claudeに頼むだけ）
✅ 縦長ページも1枚に（スクロール不要）
✅ 日本語サイトも完璧（文字化けなし）
✅ メモリ管理機能実装済み（10回使用後に自動再起動）
こんな方におすすめ
毎日同じWebページをチェックしている
複数のダッシュボードを確認している
Webページを画像として記録保存したい
競合サイトを定期的に監視したい
レポート用の画像が欲しい
開発時間の内訳
準備: 15分（ツールのダウンロード）
実装: 45分（基本機能の作成）
調整: 20分（エラー対策）
テスト: 10分（動作確認）
合計: 1.5時間💡 最後に：失敗は成功のもと
昨日6時間かけてOCR実装に失敗しました。
でも、その失敗があったからこそ、Screenshot MCPが生まれました。
完璧じゃなくても、別の方法で問題は解決できる。
プログラミングができなくても、アイデアと工夫で新しいツールは作れます。
明日のDay35では、約束通りPDF対応機能を実装し、さらにBrowser MCPとの画期的な連携方法を実現します！
コードの説明では「Webページ・PDFのスクリーンショット撮影ツール」と書きましたが、実はPDF機能は未実装でした。
でも調査の結果、わずか30分の作業で実装可能なことが判明！明日、完全版をお届けします。
最後まで読んでいただき、ありがとうございました！
Screenshot MCPの設定で分からないことがあれば、コメントでお気軽にご質問ください。
「PDFも撮影したい！」「Browser MCPと連携したい！」というリクエストもお待ちしています。
Day35では、皆さんのリクエストを反映した改良版を希望があれば公開予定です！
