web-content-fetcher

Web Content Fetcher

Web コンテンツの取得と解析、サイズ制限への対応、JavaScript でレンダリングされたサイトの処理、HTML からの記事コンテンツの抽出に関する専門知識です。

概要

このスキルでは、Claude Code で Web コンテンツを取得するための、実績に裏付けられた戦略を紹介し、次の重要な課題に対処します。

1. WebFetch ツールの制限：コンテンツサイズは最大約 50KB
2. Read ツールの制限：1 回の呼び出しにつきファイルサイズは最大 256KB
3. JavaScript でレンダリングされたコンテンツ：Twitter/X や React の SPA には特別な処理が必要です

4 段階のアプローチ：

• Tier 1：小さなコンテンツ（50KB 未満）には WebFetch を使用
• Tier 2：あらゆるサイズの静的コンテンツには curl + Task エージェントを使用 ⭐ デフォルト
• Tier 3：例外的なケース（EUC-JP エンコーディング、複雑な HTML）にはスクリプトを使用
• Tier 4：JavaScript でレンダリングされたサイト（Twitter/X、React の SPA）には Playwright を使用

ツールの制限事項（クイックリファレンス）

ツール	最大サイズ	最適な用途	制限事項
WebFetch	約 50KB	小さな記事、最初の試行	プロンプト長の制約
Read	256KB	取得したファイルの読み取り	大きなファイルにはページ分割が必要
curl	無制限	あらゆるサイズのコンテンツ、生データのダウンロード	解析機能なし
Task agent	無制限	あらゆるサイズの HTML からの抽出	ページ分割を自動処理

段階的な取得戦略

Tier 1：小さなコンテンツ - WebFetch を直接使用

使用する場面：シンプルな記事、API レスポンス、内容が不明な場合の最初の試行

簡単な例：

WebFetch tool with url and extraction prompt

失敗した場合：「Prompt too long」エラーが発生したら、Tier 2 に切り替えます。

Tier 2：あらゆるサイズのコンテンツ - curl + Task エージェント ⭐ 推奨

使用する場面：ニュース記事、ブログ記事、WebFetch が失敗した場合、サイズを問わないあらゆるコンテンツ

簡単なワークフロー：

# 1. Create directory
mkdir -p output/tasks/YYYYMMDD_taskname/original

# 2. Fetch HTML
curl -s "URL" > output/tasks/YYYYMMDD_taskname/original/raw_html.html

# 3. Extract with Task agent
# Prompt: "Read HTML at [path], extract article content, save to fetched_content.md"

デフォルトで使用する理由：あらゆるサイズに対応し、AI による抽出が可能で、スクリプトのセットアップも不要です。

詳しいワークフロー：references/workflows.md を参照してください。

Tier 3：スクリプトベースの抽出 - 例外的なケースのみ

使用する場面：Task エージェントが複雑な HTML や特殊なエンコーディング要件（EUC-JP）に対応できない場合

利用可能なスクリプト：

• scripts/extract_article.js - Mozilla Readability を使用した標準的な HTML
• scripts/extract_eucjp.js - EUC-JP でエンコードされた日本語サイト（4gamer.net）

簡単な例：

node .claude/skills/web-content-fetcher/scripts/extract_article.js raw_html.html > fetched_content.md

注：まず Task エージェント（Tier 2）を試してください。スクリプトを使うのは、Task エージェントが明示的に失敗した場合のみです。

スクリプトの詳細：references/advanced-fetching.md を参照してください。

Tier 4：JavaScript でレンダリングされたコンテンツ - Playwright

使用する場面：Twitter/X、React の SPA、動的なサイト、静的取得で空の結果やエラーが返される場合

簡単な例：

node .claude/skills/web-content-fetcher/scripts/fetch_js_content.js \
  "https://x.com/user/status/123456789" \
  --output fetched_content.md

対象となる主なサイト：Twitter/X、Threads、Instagram、React/Vue/Angular の SPA、AJAX で読み込まれるコンテンツ

画像の抽出：

• 画像が存在する場合は自動的に抽出します（Twitter/X、Threads、ブログなど）
• メインコンテンツ領域から、代替テキスト付きの画像 URL を取得します
• 小さな画像（アイコンやロゴなど）は自動的に除外します
• 出力には、ダウンロード用 URL を含む構造化された Media セクションが含まれます

セットアップが必要です（一度のみ）：

cd .claude/skills/web-content-fetcher
pnpm add -D playwright --save-catalog-name=dev
pnpm exec playwright install chromium

Playwright の詳細：references/advanced-fetching.md を参照してください。

判断フローチャート

適切なアプローチを選ぶには、次のフローチャートを使用してください。

Need to fetch web content?
│
├─ JavaScript-rendered site (Twitter/X, React SPA, dynamic content)?
│  └─ Use Playwright script (Tier 4)
│     └─ See: references/advanced-fetching.md
│
├─ Size unknown or small expected content?
│  └─ Try WebFetch (Tier 1)
│     ├─ Success? → Done ✓
│     └─ "Prompt too long" error? → Use Tier 2
│
├─ Any other case (medium/large content, WebFetch failed)?
│  └─ Use curl + Task agent (Tier 2) ⭐ DEFAULT
│     ├─ Success? → Done ✓
│     └─ Task agent struggles? → Use Tier 3
│        └─ See: references/advanced-fetching.md
│
└─ Edge cases (Task agent fails, special encoding)?
   └─ Use curl + script (Tier 3)
      └─ See: references/advanced-fetching.md

標準ワークフローのクイックリファレンス

最も一般的なパターン（ケースの 90% で機能します）：

# 1. Setup
mkdir -p output/tasks/20260111_taskname/original

# 2. Fetch
curl -s "URL" > output/tasks/20260111_taskname/original/raw_html.html

# 3. Extract (Task agent prompt)
"Read HTML file at [path], extract main article content,
remove navigation/ads/sidebars/comments/footer,
save clean markdown to: [path]/fetched_content.md"

# 4. Use
Read: output/tasks/20260111_taskname/original/fetched_content.md

詳しいワークフローとパターン：references/workflows.md を参照してください。

一般的なユースケース

画像付きの翻訳：

1. コンテンツを取得します（Tier 2、または JavaScript サイトの場合は Tier 4）
2. 読みやすい形式で original/fetched_content.md に抽出します（画像 URL を含む Media セクションがあります）
3. Media セクションの URL を使って画像をダウンロードします
4. /translate コマンドに渡します

分析：

1. コンテンツを取得します（Tier 2 または Tier 4）
2. 読みやすい形式で original/fetched_content.md に抽出します
3. 読み込んで分析します

ソーシャルメディアの投稿（Twitter/X、Threads、Instagram）：

1. Playwright（Tier 4）を直接使用します
2. テキスト、画像、メタデータを自動的に抽出します
3. 読みやすい形式で Media セクションを含む fetched_content.md に出力します
4. 抽出した URL から画像をダウンロードします
5. 翻訳や分析に使用します

すべてのパターンについて：references/workflows.md を参照してください

問題が発生した場合

よくある問題と簡単な解決方法：

問題	簡単な解決方法	詳細
WebFetch の「Prompt too long」	Tier 2 に切り替えます	troubleshooting.md
Read ツールでファイルが大きすぎる	Task エージェントを使います	troubleshooting.md
日本語の文字化け	EUC-JP のエンコーディングの問題です	troubleshooting.md
JavaScript が必要	Playwright（Tier 4）を使います	troubleshooting.md
ボット対策	user agent を追加します	troubleshooting.md
認証が必要	ヘッダーや Cookie を指定して curl を使います	troubleshooting.md

トラブルシューティングの完全ガイドについて：references/troubleshooting.md を参照してください

ベストプラクティス

1. 常にタスクディレクトリを使用します：output/tasks/YYYYMMDD_taskname/
2. デフォルトでは Tier 2 を使います：curl + Task エージェントでほぼすべてのケースに対応できます
3. 生の HTML を保持します：参照用に original/raw_html.html に保存します（Tier 4 を除く）
4. JavaScript サイトには Playwright を使います：Twitter/X、React SPA、動的コンテンツ
5. コンテンツを整形します：抽出したコンテンツは常に Markdown として保存します
6. わかりやすい名前を付けます：日付のプレフィックス（YYYYMMDD_）と説明的なタスク名を使います
7. まずはシンプルな方法を試します：WebFetch → curl + Task エージェント → スクリプト（必要な場合のみ）
8. 抽出には Task エージェントを使います：ページネーションや解析の複雑な処理を AI に任せます

参考ファイル

このスキルでは、効率化のためにプログレッシブディスクロージャーを採用しています。基本情報はこのファイルに記載されています。詳細なガイドは参考ファイルに記載されています。

• references/workflows.md - 標準的なワークフロー、一般的なパターン、ディレクトリ構造、コンテンツ抽出の優先順位
• references/advanced-fetching.md - Tier 3 のスクリプトベースの抽出、Tier 4 の Playwright の詳細、セットアップ手順
• references/troubleshooting.md - よくある問題、解決方法、コマンドのクイックリファレンス

特定の状況について詳しい手順が必要な場合は、参考ファイルを読んでください。

クイックスタートの例

シンプルな記事：

mkdir -p output/tasks/20260111_article/original
curl -s "https://example.com/article" > output/tasks/20260111_article/original/raw_html.html
# Task agent: Extract to fetched_content.md

Twitter/X の投稿：

mkdir -p output/tasks/20260111_twitter/original
node .claude/skills/web-content-fetcher/scripts/fetch_js_content.js \
  "https://x.com/user/status/123" \
  --output output/tasks/20260111_twitter/original/fetched_content.md

Threads の投稿：

mkdir -p output/tasks/20260111_threads/original
node .claude/skills/web-content-fetcher/scripts/fetch_js_content.js \
  "https://www.threads.com/@user/post/ABC123" \
  --output output/tasks/20260111_threads/original/fetched_content.md

画像付きの出力形式（すべてのサイトで使用できます）：

# Title

Main content text here...

### Media

1. Image description or alt text
   - URL: https://example.com/image1.jpg
2. Another image
   - URL: https://example.com/image2.jpg

注意：

• 画像はメインコンテンツ領域から自動的に抽出されます
• アイコンやロゴなどの小さな画像（< 100x100px）は除外されます
• 画像形式：.jpg、.png、.webp、.gif、.svg。すべて URL 内で保持されます
• ダウンロード時は、元のファイル拡張子を維持してください

日本語サイト（エンコーディングの問題が発生する可能性があります）：

mkdir -p output/tasks/20260111_japanese/original
curl -s "https://4gamer.net/..." > output/tasks/20260111_japanese/original/raw_html.html
# Task agent with encoding detection, or use extract_eucjp.js if needed