diff --git a/docs-tech/dgx-spark-claude-code-local/index.md b/docs-tech/dgx-spark-claude-code-local/index.md index 75fd7b8..66adcc1 100644 --- a/docs-tech/dgx-spark-claude-code-local/index.md +++ b/docs-tech/dgx-spark-claude-code-local/index.md @@ -22,6 +22,25 @@ Anthropic公式のターミナルベースAIコーディングアシスタント そこで今回は、**Claude Codeを完全ローカルで動かす**方法を紹介します。 +## Ollama Launchとの比較 + +Claude Codeをローカルで動かす方法は他にもあります。代表的なのが**Ollama Launch**。 + +| 項目 | この記事の方法 | Ollama Launch | +|------|---------------|---------------| +| **セットアップ** | 複雑（vLLM + プロキシ） | **簡単** | +| **推論速度** | **速い（20-30 tok/s）** | 遅め | +| **対応モデル** | FP8量子化モデル | GGUF量子化モデル | +| **コンテキスト長** | **200K対応** | モデル依存 | +| **必要スペック** | 高（DGX Spark等） | 低〜中 | + +:::tip どちらを選ぶ？ +- **手軽に試したい** → Ollama Launch +- **本格的に使いたい・速度重視** → この記事の方法 +::: + +この記事の方法は**セットアップが複雑**ですが、vLLMの最適化により**推論速度が速く**、**200Kトークン**の大規模コンテキストにも対応しています。 + ## 何ができるようになるの？ - ✅ **プライバシー保護** - コードがクラウドに送られない @@ -52,7 +71,7 @@ NVIDIAの「デスクトップAIワークステーション」です。 ## 構成図 -``` +\`\`\` ┌─────────────────────────────────────────────────────┐ │ あなたのPC / DGX Spark │ │ │ @@ -78,7 +97,7 @@ NVIDIAの「デスクトップAIワークステーション」です。 │ │ └──────────────┘ │ │ │ └──────────────────┘ │ └─────────────────────────────────────────────────────┘ -``` +\`\`\` ### なぜプロキシが必要？ @@ -104,9 +123,9 @@ FP8量子化版を使うことで、メモリ使用量は約45GB。DGX Sparkの1 ## ワンライナーで全自動セットアップ -```bash +\`\`\`bash curl -sL https://docs.techswan.online/scripts/dgx-spark-claude-code.sh | bash -``` +\`\`\` これだけ！約10分待つと環境が整います。 @@ -118,40 +137,40 @@ curl -sL https://docs.techswan.online/scripts/dgx-spark-claude-code.sh | bash ### Step 1: vLLMでモデルを起動 -```bash title="vLLM起動コマンド" -docker run -d --name qwen3-coder-next-fp8 \ - --gpus all \ - -p 8000:8000 \ - -v ~/.cache/huggingface:/root/.cache/huggingface \ - --ipc=host \ - nvcr.io/nvidia/vllm:25.11-py3 \ - vllm serve Qwen/Qwen3-Coder-Next-FP8 \ - --served-model-name qwen3-coder-next \ - --max-model-len 200000 \ - --max-num-seqs 8 \ - --gpu-memory-utilization 0.85 \ - --enable-auto-tool-choice \ - --tool-call-parser qwen3_xml \ +\`\`\`bash title="vLLM起動コマンド" +docker run -d --name qwen3-coder-next-fp8 \\ + --gpus all \\ + -p 8000:8000 \\ + -v ~/.cache/huggingface:/root/.cache/huggingface \\ + --ipc=host \\ + nvcr.io/nvidia/vllm:25.11-py3 \\ + vllm serve Qwen/Qwen3-Coder-Next-FP8 \\ + --served-model-name qwen3-coder-next \\ + --max-model-len 200000 \\ + --max-num-seqs 8 \\ + --gpu-memory-utilization 0.85 \\ + --enable-auto-tool-choice \\ + --tool-call-parser qwen3_xml \\ --trust-remote-code -``` +\`\`\` #### 重要なポイント | オプション | 値 | 説明 | |-----------|-----|------| -| `--max-model-len` | 200000 | 200Kトークンまで対応 | -| `--max-num-seqs` | 8 | 同時リクエスト数（メモリ節約） | -| `--tool-call-parser` | **qwen3_xml** | ⚠️ これ超重要！ | +| \`--max-model-len\` | 200000 | 200Kトークンまで対応 | +| \`--max-num-seqs\` | 8 | 同時リクエスト数（メモリ節約） | +| \`--tool-call-parser\` | **qwen3_xml** | ⚠️ これ超重要！ | :::danger tool-call-parserに注意 -`--tool-call-parser` を間違えると、Claude Codeのファイル操作やコマンド実行が動きません。**必ず `qwen3_xml`** を指定してください。 +\`--tool-call-parser\` を間違えると、Claude Codeのファイル操作やコマンド実行が動きません。**必ず \`qwen3_xml\`** を指定してください。 ::: 初回起動は約10分かかります（45GBのモデルをダウンロード＆ロード）。 ### Step 2: claude-code-proxyを起動 -```bash +\`\`\`bash # クローン git clone https://github.com/fuergaosi233/claude-code-proxy.git cd claude-code-proxy @@ -172,27 +191,27 @@ EOF # 起動 python start_proxy.py -``` +\`\`\` ### Step 3: Claude Codeを起動 -```bash -ANTHROPIC_BASE_URL=http://localhost:8082 \ -ANTHROPIC_API_KEY=dummy \ +\`\`\`bash +ANTHROPIC_BASE_URL=http://localhost:8082 \\ +ANTHROPIC_API_KEY=dummy \\ claude -``` +\`\`\` :::warning ANTHROPIC_AUTH_TOKEN -`ANTHROPIC_AUTH_TOKEN` は設定しないでください。両方設定するとエラーになります。 +\`ANTHROPIC_AUTH_TOKEN\` は設定しないでください。両方設定するとエラーになります。 ::: ### 便利なエイリアス設定 -```bash title="~/.bashrc に追加" +\`\`\`bash title="~/.bashrc に追加" alias claude-local='ANTHROPIC_BASE_URL=http://localhost:8082 ANTHROPIC_API_KEY=dummy claude' -``` +\`\`\` -これで `claude-local` と打つだけでOK！ +これで \`claude-local\` と打つだけでOK！ ## パフォーマンス @@ -211,25 +230,25 @@ Anthropic APIに比べると生成速度は遅めですが、ローカルで完 最初、ファイル操作しようとすると固まりました。 -**原因**: `--tool-call-parser hermes` を使っていた +**原因**: \`--tool-call-parser hermes\` を使っていた -**解決**: `--tool-call-parser qwen3_xml` に変更 +**解決**: \`--tool-call-parser qwen3_xml\` に変更 Qwen3系モデルは独自のTool Callingフォーマットを使うので、専用のパーサーが必要です。 ### 2. Auth conflictエラー -``` +\`\`\` Auth conflict: Both a token (ANTHROPIC_AUTH_TOKEN) and an API key (ANTHROPIC_API_KEY) are set. -``` +\`\`\` -**解決**: `ANTHROPIC_AUTH_TOKEN` を設定しない（または `unset ANTHROPIC_AUTH_TOKEN`） +**解決**: \`ANTHROPIC_AUTH_TOKEN\` を設定しない（または \`unset ANTHROPIC_AUTH_TOKEN\`） ### 3. max_tokensエラー 入力が長すぎると、出力用のトークン枠がなくなってエラーに。 -**解決**: vLLMの `--max-model-len` を増やす（今回は200Kに設定） +**解決**: vLLMの \`--max-model-len\` を増やす（今回は200Kに設定） ## まとめ @@ -239,10 +258,10 @@ DGX SparkでClaude Codeをローカル化できました！ 1. **vLLM + Qwen3-Coder-Next-FP8** でモデルを動かす 2. **claude-code-proxy** でAPI形式を変換 -3. `--tool-call-parser qwen3_xml` を忘れずに！ -4. `ANTHROPIC_AUTH_TOKEN` は設定しない +3. \`--tool-call-parser qwen3_xml\` を忘れずに！ +4. \`ANTHROPIC_AUTH_TOKEN\` は設定しない -完全ローカルでClaude Codeが動く喜び、ぜひ体験してみてください。 +セットアップは複雑ですが、一度動けば**速くて安定**。完全ローカルでClaude Codeが動く喜び、ぜひ体験してみてください。 ## 参考リンク diff --git a/docs-tech/dgx-spark-claude-code-playwright/index.md b/docs-tech/dgx-spark-claude-code-playwright/index.md index ef5527a..02cedd5 100644 --- a/docs-tech/dgx-spark-claude-code-playwright/index.md +++ b/docs-tech/dgx-spark-claude-code-playwright/index.md @@ -47,197 +47,234 @@ displayed_sidebar: null ### Step 1: Playwright CLIをインストール -```bash +\`\`\`bash npm install -g @playwright/cli@latest -``` +\`\`\` 確認： -```bash +\`\`\`bash playwright-cli --help -``` +\`\`\` ### Step 2: SKILLSをインストール -```bash +\`\`\`bash playwright-cli install --skills -``` +\`\`\` これでClaude Codeが自動的にPlaywright CLIのスキルを認識します。 ### Step 3: 動作確認 -```bash +\`\`\`bash claude-local # ローカルモデルで起動 -``` +\`\`\` Claude Codeで： -``` +\`\`\` > playwright-cli --help を確認して、https://example.com のスクリーンショットを撮って -``` +\`\`\` -## 基本コマンド +## 公式SKILLSリファレンス -### ブラウザ操作 +Playwright CLIには公式のSKILLSファイルがあります。以下は主要なコマンド： -```bash -# ページを開く -playwright-cli open https://example.com - -# ヘッドフル（ブラウザ表示）で開く -playwright-cli open https://example.com --headed +### Quick Start +\`\`\`bash +# ブラウザを開く +playwright-cli open +# URLに移動 +playwright-cli goto https://playwright.dev +# スナップショットの要素ref（e15等）を使ってクリック +playwright-cli click e15 # テキスト入力 -playwright-cli type "検索キーワード" - -# クリック -playwright-cli click "ボタンのテキスト" - +playwright-cli type "page.click" # Enterキー playwright-cli press Enter - -# チェックボックス -playwright-cli check "同意する" - # スクリーンショット playwright-cli screenshot -``` +# ブラウザを閉じる +playwright-cli close +\`\`\` -### セッション管理 +### Core Commands -Playwright CLIは**セッション**でブラウザの状態を管理します。 +\`\`\`bash +playwright-cli open https://example.com # ページを開く +playwright-cli goto https://example.com # URLに移動 +playwright-cli type "検索キーワード" # テキスト入力 +playwright-cli click e3 # 要素をクリック（refで指定） +playwright-cli fill e5 "user@example.com" # 入力欄に値を設定 +playwright-cli select e9 "option-value" # セレクトボックス選択 +playwright-cli check e12 # チェックボックスON +playwright-cli uncheck e12 # チェックボックスOFF +playwright-cli upload ./document.pdf # ファイルアップロード +playwright-cli snapshot # ページ構造を取得 +playwright-cli screenshot # スクリーンショット +\`\`\` -```bash +### Navigation + +\`\`\`bash +playwright-cli go-back # 戻る +playwright-cli go-forward # 進む +playwright-cli reload # リロード +\`\`\` + +### Keyboard + +\`\`\`bash +playwright-cli press Enter +playwright-cli press ArrowDown +playwright-cli keydown Shift +playwright-cli keyup Shift +\`\`\` + +### Tabs + +\`\`\`bash +playwright-cli tab-list # タブ一覧 +playwright-cli tab-new # 新しいタブ +playwright-cli tab-new https://example.com # URLを指定して新しいタブ +playwright-cli tab-select 0 # タブを選択 +playwright-cli tab-close # タブを閉じる +\`\`\` + +### Storage（Cookie/LocalStorage） + +\`\`\`bash +# 状態の保存・読み込み +playwright-cli state-save auth.json +playwright-cli state-load auth.json + +# Cookie操作 +playwright-cli cookie-list +playwright-cli cookie-get session_id +playwright-cli cookie-set session_id abc123 +playwright-cli cookie-clear + +# LocalStorage操作 +playwright-cli localstorage-list +playwright-cli localstorage-get theme +playwright-cli localstorage-set theme dark +\`\`\` + +### Sessions + +\`\`\`bash # セッション一覧 playwright-cli list - # 特定のセッションで操作 playwright-cli -s=myproject open https://example.com - -# セッションを永続化（Cookie保存） -playwright-cli open https://example.com --persistent - +# 永続セッション（Cookie保存） +playwright-cli open --persistent # 全セッション終了 playwright-cli close-all -``` - -#### プロジェクトごとにセッション分離 - -```bash -# 環境変数でセッション指定 -PLAYWRIGHT_CLI_SESSION=my-app claude-local -``` - -### モニタリング - -```bash -playwright-cli show -``` - -ダッシュボードで全セッションをリアルタイム確認。 - -## SKILLSファイルの作成 - -プロジェクト専用のスキルを定義すると、Claude Codeがより賢く動きます。 - -```markdown title="SKILLS.md" -# Browser Automation Skills - -## Playwright CLI - -このプロジェクトではPlaywright CLIを使ってブラウザ操作を行います。 - -### 基本操作 - -\`\`\`bash -# ページを開く -playwright-cli open - -# ヘッドフルモード（ブラウザ表示） -playwright-cli open --headed - -# テキスト入力 -playwright-cli type "" - -# 要素をクリック -playwright-cli click "" - -# スクリーンショット -playwright-cli screenshot - -# ページのスナップショット（構造取得） -playwright-cli snapshot +# 強制終了 +playwright-cli kill-all \`\`\` -### セッション管理 +### DevTools \`\`\`bash -# セッション一覧 -playwright-cli list - -# 全セッション終了 -playwright-cli close-all +playwright-cli console # コンソールログ +playwright-cli network # ネットワークリクエスト +playwright-cli tracing-start # トレース開始 +playwright-cli tracing-stop # トレース終了 +playwright-cli video-start # 動画記録開始 +playwright-cli video-stop video.webm # 動画記録終了 \`\`\` -``` + +## Snapshots + +各コマンド実行後、Playwright CLIはページの**スナップショット**を返します： + +\`\`\` +> playwright-cli goto https://example.com +### Page +- Page URL: https://example.com/ +- Page Title: Example Domain +### Snapshot +[Snapshot](.playwright-cli/page-2026-02-19T13-30-00.yml) +\`\`\` + +スナップショットには要素の**ref（e1, e2, e15など）** が含まれており、これを使ってクリックや入力を行います。 ## 実践例 -### 例1: Webサイトのスクレイピング +### 例1: フォーム入力 -``` -> https://news.ycombinator.com のトップ10記事のタイトルとURLを取得して -``` +\`\`\`bash +playwright-cli open https://example.com/form +playwright-cli snapshot -### 例2: フォーム入力の自動化 +playwright-cli fill e1 "user@example.com" +playwright-cli fill e2 "password123" +playwright-cli click e3 +playwright-cli snapshot +playwright-cli close +\`\`\` -``` -> お問い合わせフォームに以下の内容を入力して送信して -> 名前: テスト太郎 -> メール: test@example.com -``` +### 例2: 複数タブ操作 -### 例3: 認証が必要なサイト +\`\`\`bash +playwright-cli open https://example.com +playwright-cli tab-new https://example.com/other +playwright-cli tab-list +playwright-cli tab-select 0 +playwright-cli snapshot +playwright-cli close +\`\`\` -```bash -# 永続セッションで開く -playwright-cli open https://private-site.com --headed --persistent -``` +### 例3: 認証状態の保存 -手動でログイン後、Claude Codeに続きを任せる。 +\`\`\`bash +# ログイン後に状態を保存 +playwright-cli state-save auth.json + +# 次回は状態を読み込んでスキップ +playwright-cli open --persistent +playwright-cli state-load auth.json +\`\`\` ## トラブルシューティング ### ブラウザが起動しない -```bash +\`\`\`bash npx playwright install chromium -``` +\`\`\` ### セッションが残っている -```bash +\`\`\`bash playwright-cli kill-all -``` +\`\`\` ### 要素が見つからない -```bash +\`\`\`bash playwright-cli snapshot -``` +\`\`\` + +スナップショットで要素のrefを確認。 ## まとめ **ポイント**： 1. **CLI方式を使う** - MCPより安定している -2. **SKILLSファイルを作る** - プロジェクト専用のスキルを定義 -3. **セッションを活用** - ログイン状態を保持 -4. **--headed で確認** - 困ったらブラウザを表示 +2. **公式SKILLSを使う** - \`playwright-cli install --skills\` +3. **snapshotでref確認** - 要素はe1, e2などのrefで指定 +4. **セッションを活用** - ログイン状態を保持 ## 参考リンク - [Playwright CLI（Microsoft）](https://github.com/microsoft/playwright-cli) +- [公式SKILLS](https://raw.githubusercontent.com/microsoft/playwright-cli/main/skills/playwright-cli/SKILL.md) - [Playwright公式](https://playwright.dev/) - [前回の記事: Claude Codeローカル化](/tech/dgx-spark-claude-code-local)