web-search

Web Search スキル

このスキルを使用する場面

次のような場合は、web-search スキルを使用してください。

• 最新情報 - 2025年1月以降のイベント、ニュース、データ
• 最新のドキュメント - 最新のフレームワーク／ライブラリのドキュメント（React 19、Next.js 15 など）
• リアルタイムデータ - 株価、天気、スポーツのスコアなど
• 事実の確認 - プロジェクト、企業、テクノロジーの現在の状況を確認する
• 最近の議論 - コミュニティの意見、GitHub の issue、Stack Overflow の回答
• 製品の比較 - 最新のレビューや比較
• トラブルシューティング - 特定のエラーメッセージや解決策を検索する

使用する場面の例：

• ユーザー：「React 19 の新機能は何ですか？」
• ユーザー：「最新の Next.js App Router ドキュメントを検索してください」
• ユーザー：「Rust async プロジェクトの現在の状況はどうなっていますか？」
• ユーザー：「Vue 3 のパフォーマンスに関する最近の議論を見つけてください」

仕組み

┌──────────┐    Bash    ┌─────────┐    HTTP    ┌──────────────┐    CDP    ┌────────┐
│  Claude  │───────────▶│ CLI.sh  │───────────▶│ Bridge Server│──────────▶│ Chrome │
│          │            │         │            │ (localhost)  │ Playwright│        │
└──────────┘            └─────────┘            └──────────────┘            └────────┘
                                                      │
                                                  ▼
                                             Google/Bing Search
                                                Extract Results

アーキテクチャ：

1. CLI スクリプト - Claude 向けのシンプルな bash インターフェース
2. ブリッジサーバー - Express HTTP API（Electron によって自動起動）
3. Playwright マネージャー - ブラウザー接続とセッション管理
4. 検索エンジン層 - Google を優先し、Bing をフォールバックとして使用
5. Chrome ブラウザー - 表示されるブラウザーウィンドウ（すべての操作が可視）

基本的な使い方

シンプルな検索（推奨）

重要： スキルのスクリプトを見つけるには、必ず $SKILLS_ROOT 環境変数を使用してください。これにより、開発環境と本番環境の両方でスキルが動作します。

bash "$SKILLS_ROOT/web-search/scripts/search.sh" "search query" [max_results]

ASCII 以外のクエリ（中国語／日本語など）では、Windows のシェルのエンコード問題を避けるため、UTF-8 ファイルからの入力を推奨します。

cat > /tmp/web-query.txt <<'TXT'
苹果 Siri AI 2026 发布计划
TXT

bash "$SKILLS_ROOT/web-search/scripts/search.sh" @/tmp/web-query.txt 10

例：

# Search with default 10 results
bash "$SKILLS_ROOT/web-search/scripts/search.sh" "TypeScript 5.0 new features"

# Limit to 5 results
bash "$SKILLS_ROOT/web-search/scripts/search.sh" "React Server Components guide" 5

# Search for recent news
bash "$SKILLS_ROOT/web-search/scripts/search.sh" "AI news January 2026" 10

出力形式：

スクリプトは Markdown 形式の検索結果を返します。

# Search Results: TypeScript 5.0 new features

**Query:** TypeScript 5.0 new features
**Results:** 5
**Time:** 834ms

---

## TypeScript 5.0 Release Notes

**URL:** [https://www.typescriptlang.org/docs/...]

TypeScript 5.0 introduces decorators, const type parameters...

---

## (More results...)

ワークフローの例

# 1. Search for topic
bash "$SKILLS_ROOT/web-search/scripts/search.sh" "Next.js 14 features" 5

# 2. Analyze results and answer user

# 3. Follow-up search if needed
bash "$SKILLS_ROOT/web-search/scripts/search.sh" "Next.js Server Actions tutorial" 3

高度な使い方

サーバー管理

ブリッジサーバーは Electron によって自動管理されます。通常、手動で起動／停止する必要はありません。

ただし、手動で制御する場合は次のとおりです。

# Start server (if not already running)
bash "$SKILLS_ROOT/web-search/scripts/start-server.sh"

# Stop server
bash "$SKILLS_ROOT/web-search/scripts/stop-server.sh"

# Check health (start script will print endpoint status)
bash "$SKILLS_ROOT/web-search/scripts/start-server.sh"

API の直接呼び出し

高度なユースケースでは、HTTP API を直接呼び出すことができます。

# Get or create connection
CONNECTION_ID=$(curl -s -X POST http://127.0.0.1:8923/api/browser/connect \
  -H "Content-Type: application/json" \
  -d '{}' | grep -o '"connectionId":"[^"]*"' | cut -d'"' -f4)

# Perform search
curl -X POST http://127.0.0.1:8923/api/search \
  -H "Content-Type: application/json" \
  -d "{
    \"connectionId\": \"$CONNECTION_ID\",
    \"query\": \"Playwright tutorial\",
    \"maxResults\": 5
  }"

# Navigate to specific URL
curl -X POST http://127.0.0.1:8923/api/page/navigate \
  -H "Content-Type: application/json" \
  -d "{
    \"connectionId\": \"$CONNECTION_ID\",
    \"url\": \"https://example.com\"
  }"

# Take screenshot
curl -X POST http://127.0.0.1:8923/api/page/screenshot \
  -H "Content-Type: application/json" \
  -d "{
    \"connectionId\": \"$CONNECTION_ID\",
    \"format\": \"png\"
  }"

ベストプラクティス

1. 具体的なクエリを使用する

❌ 悪い例：bash scripts/search.sh "react" ✅ 良い例：bash scripts/search.sh "React 19 new features and breaking changes"

2. 適切な件数に結果を制限する

• 簡単な検索：3～5件
• 包括的な調査：10件
• 必要以上にリクエストしないでください（高速化され、ノイズも減ります）

3. まずサーバーの状態を確認する

検索に失敗した場合は、サーバーが実行中かどうかを確認してください。

bash "$SKILLS_ROOT/web-search/scripts/start-server.sh" || echo "Server not running"

4. 接続を再利用する

CLI スクリプトは接続を自動的にキャッシュします。同じセッション内で複数回検索すると、パフォーマンス向上のため、同じブラウザー接続が再利用されます。

5. 出力を整理する

Markdown の出力を解析して、ユーザーに必要な情報を抽出してください。結果をすべてそのまま表示するのではなく、要点をまとめてください。

よく使われるパターン

パターン 1：最新のドキュメント

# User asks about latest framework features
bash SKILLs/web-search/scripts/search.sh "Next.js 15 documentation" 5

# Parse results, find official docs, summarize features

パターン 2：トラブルシューティング

# User reports an error
bash SKILLs/web-search/scripts/search.sh "TypeError: Cannot read property of undefined React" 5

# Find Stack Overflow answers and GitHub issues, provide solution

パターン 3：時事情報

# User asks about recent news
bash SKILLs/web-search/scripts/search.sh "AI developments January 2026" 10

# Summarize key news items from results

パターン 4：比較調査

# User wants to compare technologies
bash SKILLs/web-search/scripts/search.sh "Vue 3 vs React 18 performance 2026" 5

# Synthesize comparison from multiple sources

パターン 5：API／ライブラリの使い方

# User needs specific API documentation
bash SKILLs/web-search/scripts/search.sh "Playwright page.evaluate examples" 5

# Extract code examples and usage patterns

エラー処理

サーバーが実行されていない

エラー： ✗ Bridge Server is not running

解決策：

• サーバーは Electron とともに自動起動するはずです
• 手動での起動が必要な場合：bash SKILLs/web-search/scripts/start-server.sh
• ログを確認する：cat SKILLs/web-search/.server.log

ブラウザーの起動に失敗した

エラー： Failed to launch browser

原因： Chrome がインストールされていないか、見つかりません

解決策：

• macOS： https://www.google.com/chrome/ からインストールします
• Linux：sudo apt install chromium-browser
• Windows： https://www.google.com/chrome/ からインストールします

接続がタイムアウトした

エラー： CDP port not ready または Connection timeout

解決策：

# Stop server
bash SKILLs/web-search/scripts/stop-server.sh

# Clear cache
rm SKILLs/web-search/.connection

# Restart
bash SKILLs/web-search/scripts/start-server.sh

検索結果がない

エラー： Found 0 results

考えられる原因：

• クエリが具体的すぎる、または一般的でない
• Bing のページ構造が変更された（まれ）
• ネットワークの問題

解決策：

• より広いクエリを試してください
• インターネット接続を確認してください
• bing.com でページが手動で読み込めることを確認してください

検索のタイムアウト

エラー： Search failed: timeout

解決方法：

• インターネット接続を確認します
• 最大結果数を減らします
• もう一度試します（一時的なネットワークの問題の可能性があります）

検索結果を理解する

結果の構造

各検索結果には次の内容が含まれます。

## [Title of Result]

**URL:** [https://example.com/page]

[Snippet/description from search results]

フィールド：

• タイトル - ページ／記事のタイトル
• URL - 直接リンク（Bing のトラッキング情報が含まれる場合があります）
• スニペット - ページのプレビュー文

結果の解析

検索結果は Markdown 形式です。次の情報を抽出します。

1. 結果の合計件数
2. 検索にかかった時間
3. 個々の結果のタイトルと URL
4. 文脈を把握するためのスニペット

結果の品質

• 公式ドキュメント - 通常、上位 3 件に表示されます
• Stack Overflow - 技術的な質問で表示されます
• 最近の記事 - Bing は新しいコンテンツを優先します
• 中国語のコンテンツ - Bing は中国で適切に機能し、中国語の情報源も含みます

パフォーマンスに関する考慮事項

一般的な応答時間

• サーバーの起動：約 2 秒（初回のみ、自動起動）
• ブラウザーの起動：約 3 秒（初回のみ、その後の検索でも維持）
• 初回の検索：約 2～3 秒（ブラウザー接続のセットアップを含む）
• 2 回目以降の検索：約 1 秒（ブラウザーと接続を再利用）

最適化のヒント

1. ブラウザーの維持 - デフォルトでは、検索の間もブラウザーは起動したままです。接続とページは自動的に再利用されます。必要に応じて WEB_SEARCH_CLEANUP=1 を設定すると、検索のたびにブラウザーを閉じます。
2. 結果数の制限 - 必要な分だけをリクエストします（通常は 5～10 件で十分です）
3. 検索の連続実行 - 複数の検索が必要な場合は、接続を再利用できるように続けて実行します
4. 具体的なクエリ - クエリが具体的であるほど、検索が速くなり、結果の質も向上します

セキュリティとプライバシー

セキュリティ対策

• ローカルホストのみ - Bridge Server は 127.0.0.1 にバインドされます（外部からのアクセスはありません）
• ネットワークに公開されない - 他のマシンからアクセスできません
• 独立したブラウザー - 専用の Chrome プロファイルを使用するため、ユーザーのメインブラウザーには影響しません
• 操作の可視化 - すべてのブラウザー操作が表示ウィンドウに表示されます（透明性を確保）
• 認証情報なし - このスキルがパスワードや機密データを扱うことはありません

プライバシーに関する考慮事項

• 検索クエリは、利用可能な状況に応じて Google または Bing を経由します
• Google／Bing は検索を追跡する場合があります（各社の標準的なプライバシーポリシーが適用されます）
• このスキルによる検索履歴のローカル保存はありません
• ユーザーはすべてのブラウザー操作をリアルタイムで確認できます

制限事項

現在の制限事項

1. CAPTCHA に未対応 - Google または Bing で CAPTCHA が表示された場合、ユーザーが手動で解決する必要があります
2. エンジンの利用可否はネットワークや地域によって異なる - 自動モードでは Google と Bing を切り替えて使用します
3. 英語／中国語を重視 - 英語と中国語の検索結果向けに最適化されています
4. 基本的な抽出のみ - タイトルとスニペットを抽出します。ページ全体の内容は抽出しません
5. 認証なし - ログインが必要なページは検索できません

適していない用途

• 認証が必要な検索
• フォームへの入力やデータの送信
• CAPTCHA の解決が必要な操作（ユーザーが手動で解決する場合を除く）
• 大量のスクレイピングや自動一括検索
• ペイウォールのあるページへのアクセス

トラブルシューティングガイド

簡易診断

# 1. Check server health
curl http://127.0.0.1:8923/api/health

# 2. Check server logs
cat SKILLs/web-search/.server.log | tail -50

# 3. Test basic search
bash SKILLs/web-search/scripts/search.sh "test" 1

# 4. Check Chrome installation
which google-chrome || which chromium || which chromium-browser

よくある問題

問題	症状	解決方法
サーバーが停止している	Connection refused	サーバーを起動するか、Electron を再起動します
ブラウザーが見つからない	Chrome not found	Chrome／Chromium をインストールします
ポートの競合	Address already in use	ポート 8923 を使用している競合プロセスを停止します
接続情報が古い	Connection not found	.connection キャッシュファイルを削除します
ネットワークの問題	Search timeout	インターネット接続を確認します

すべてをリセットする

ほかの方法で解決しない場合は、完全にリセットします。

cd SKILLs/web-search

# Stop server
bash scripts/stop-server.sh

# Clean cache and state
rm -f .connection .server.pid .server.log

# Rebuild
npm run build

# Restart
bash scripts/start-server.sh

# Test
bash scripts/search.sh "test" 1

Claude 向けの例

例 1：ユーザーが最新のフレームワークについて質問する

ユーザー：「Next.js 15 の新機能は何ですか？」

Claude の対応：

# Search for Next.js 15 features
bash "$SKILLS_ROOT/web-search/scripts/search.sh" "Next.js 15 new features" 5

その後： 検索結果を解析し、Next.js の公式ブログやドキュメントを特定して、主な機能をユーザー向けに要約します。

例 2: トラブルシューティングのエラー

ユーザー: 「TypeScript で 'Cannot find module' エラーが出ます」

Claude のアプローチ:

# Search for the specific error
bash "$SKILLS_ROOT/web-search/scripts/search.sh" "TypeScript Cannot find module error solution" 5

その後: Stack Overflow の結果から解決策を抽出し、段階的な修正方法を提示します。

例 3: 最新の出来事

ユーザー: 「今月の AI 界隈では何がありましたか？」

Claude のアプローチ:

# Search for recent AI news
bash "$SKILLS_ROOT/web-search/scripts/search.sh" "AI news January 2026" 10

その後: 複数のソースからニュースを統合し、主要な出来事の要約を提供します。

例 4: ドキュメントの検索

ユーザー: 「React Server Components の使い方を教えてください」

Claude のアプローチ:

# Search for RSC documentation and tutorials
bash "$SKILLS_ROOT/web-search/scripts/search.sh" "React Server Components guide tutorial" 5

その後: React の公式ドキュメントと優れたチュートリアルを見つけ、例を挙げて説明します。

例 5: 比較調査

ユーザー: 「2026 年には Vite と webpack のどちらを使うべきですか？」

Claude のアプローチ:

# Search for recent comparisons
bash "$SKILLS_ROOT/web-search/scripts/search.sh" "Vite vs webpack 2026 comparison" 5

その後: 複数の観点を分析し、バランスの取れた推奨事項を提供します。

効果的に使うためのヒント

1. クエリを具体的にする - バージョン番号、日付、特定の側面を含めます
2. 結果を注意深く解析する - 単にコピー&ペーストするのではなく、情報を統合します
3. 複数のソースで検証する - 重要な情報はクロスチェックします
4. 出典を明示する - どのソースを使用しているかをユーザーに伝えます
5. 限界を説明する - 検索で良い結果が見つからない場合は、ユーザーに伝えます
6. 追加検索を活用する - 1 回の検索では不十分な場合があるため、必要に応じて複数回行います
7. 結果の日付を確認する - 最新の情報には最近の記事を優先します
8. 公式ソースを探す - 公式ドキュメントや信頼できるソースを優先します

技術的な詳細

使用されている技術

• Playwright Core - ブラウザ自動化フレームワーク
• Chrome DevTools Protocol - 低レベルのブラウザ制御
• Express.js - HTTP API サーバー
• Google + Bing Search - マルチエンジンのフォールバック検索戦略
• Bash Scripts - シンプルな CLI インターフェース

システム要件

• Node.js 18+
• Google Chrome または Chromium がインストールされていること
• 検索のためのインターネット接続
• Bridge Server 用に約 100MB の RAM
• Chrome インスタンス用に約 200MB の RAM

ファイルの場所

• サーバー: SKILLs/web-search/dist/server/index.js
• ログ: SKILLs/web-search/.server.log
• PID: SKILLs/web-search/.server.pid
• 接続キャッシュ: SKILLs/web-search/.connection

追加リソース

• 完全なドキュメント: SKILLs/web-search/README.md
• 使用例: SKILLs/web-search/examples/basic-search.md
• API リファレンス: 完全な API ドキュメントについては README.md を参照してください
• トラブルシューティング: examples/basic-search.md を参照してください

サポート

問題が発生した場合:

1. .server.log でエラーを確認します
2. 基本テストを実行します: node SKILLs/web-search/scripts/test-basic.js
3. Chrome のインストールを確認します
4. インターネット接続を確認します
5. 上記のトラブルシューティングのセクションを確認します

---

覚えておいてください: このスキルは最新情報へのリアルタイムアクセスを提供します。ユーザーがあなたの知識カットオフを超える情報を必要とする場合や、最新データの正確性が重要な場合には、いつでもこれを使用してください。