mcpField
W
web-fetch

web-fetch

github.com/alleneubank生産性50976 回インストール18 週間前に更新
リポジトリ

web-fetch について

web-fetchは、Markdownエンドポイント、サイト別セレクター、Bunスクリプトの順でウェブコンテンツを抽出するスキルです。ページを読みやすいテキストに変換し、既知のサイト向けセレクターパターンも備えています。

主な機能

  1. 01Markdownコンテンツを優先取得
  2. 02CSSセレクターによるHTML抽出
  3. 03Bunフォールバックスクリプトの利用
  4. 04包含・除外セレクターに対応
  5. 05トラブルシューティングの案内

活用シーン

  1. 01ドキュメントサイトの記事本文を抽出
  2. 02ウェブページの特定領域を選択
  3. 03セレクターの結果が不十分な場合に代替解析

インストール

コマンドをコピーしてターミナルで実行します。

$npx skills add https://github.com/alleneubank/claude-code --skill web-fetch

インストール後、Claude Code で/web-fetchを入力して読み込まれたか確認します。

同梱ファイル

SKILL.md と一緒にインストールされる参考資料やスクリプト。

.gitignore
fetch.ts
package.json

詳細

Web コンテンツの取得

次の順序で Web コンテンツを取得します。

  1. Markdown ネイティブのエンドポイント（content-type: text/markdown）を優先します
  2. 既知のサイトにはセレクター方式の HTML 抽出を使用します
  3. セレクターで失敗した場合は、同梱の Bun フォールバック スクリプトを使用します

前提条件

抽出する前に、必要なツールがそろっていることを確認します。

command -v curl >/dev/null || echo "curl is required"
command -v html2markdown >/dev/null || echo "html2markdown is required for HTML extraction"
command -v bun >/dev/null || echo "bun is required for fetch.ts fallback"

同梱スクリプト用の Bun 依存関係をインストールします。

cd ~/.claude/skills/web-fetch && bun install

デフォルトのワークフロー

任意の URL で、次のフローをデフォルトとして使用します。

URL="<url>"
CONTENT_TYPE="$(curl -sIL "$URL" | awk -F': ' 'tolower($1)=="content-type"{print tolower($2)}' | tr -d '\r' | tail -1)"

if echo "$CONTENT_TYPE" | grep -q "markdown"; then
  curl -sL "$URL"
else
  curl -sL "$URL" \
    | html2markdown \
        --include-selector "article,main,[role=main]" \
        --exclude-selector "nav,header,footer,script,style"
fi

既知のサイトのセレクター

サイト対象セレクター除外セレクター
platform.claude.com#content-container-
docs.anthropic.com#content-container-
developer.mozilla.orgarticle-
github.com（ドキュメント）articlenav,.sidebar
一般article,main,[role=main]nav,header,footer,script,style

例：

curl -sL "<url>" \
  | html2markdown \
      --include-selector "#content-container" \
      --exclude-selector "nav,header,footer"

適切なセレクターの見つけ方

サイトがパターン一覧にない場合：

# Check what content containers exist
curl -s "<url>" | grep -o '<article[^>]*>\|<main[^>]*>\|id="[^"]*content[^"]*"' | head -10

# Test a selector
curl -sL "<url>" | html2markdown --include-selector "<selector>" | head -30

# Check line count
curl -sL "<url>" | html2markdown --include-selector "<selector>" | wc -l

汎用フォールバック スクリプト

セレクターで適切な出力が得られない場合は、同梱のパーサーを実行します。

bun ~/.claude/skills/web-fetch/fetch.ts "<url>"

すでにスキルのディレクトリにいる場合：

bun fetch.ts "<url>"

オプションのリファレンス

--include-selector "CSS"  # Keep only matching elements
--exclude-selector "CSS"  # Remove matching elements
--domain "https://..."    # Convert relative links to absolute

トラブルシューティング

セレクターで出力が空になる：ページが Markdown ネイティブである可能性があります。まずヘッダーを確認してください。

curl -sIL "<url>" | grep -i '^content-type:'

誤ったコンテンツが選択される：サイトに複数の記事またはメインの領域がある可能性があります。

curl -s "<url>" | grep -o '<article[^>]*>'

html2markdown が見つからない：インストールしてから、セレクター方式の抽出を再試行してください。

bun またはスクリプトの依存関係が見つからない：cd ~/.claude/skills/web-fetch && bun install を実行してください。

コードブロックが見つからない：サイトが標準以外のコード書式を使用しているか確認してください。

クライアント側でレンダリングされるコンテンツ：HTML に「Loading...」というプレースホルダーしかない場合、コンテンツは JS でレンダリングされています。curl でも Bun スクリプトでも抽出できないため、ブラウザベースのツールを使用してください。

コメント

Markdown 対応