Update: Ollama比較追加 + 公式SKILLS追加

2026-02-19 13:43:13 +00:00 · 2026-02-19 13:43:13 +00:00 · 565aa70e58
commit 565aa70e58
parent 36deae89bb
2 changed files with 214 additions and 158 deletions
--- 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が動く喜び、ぜひ体験してみてください。

 ## 参考リンク

--- 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 <url>
-
-# ヘッドフルモード（ブラウザ表示）
-playwright-cli open <url> --headed
-
-# テキスト入力
-playwright-cli type "<text>"
-
-# 要素をクリック
-playwright-cli click "<selector or text>"
-
-# スクリーンショット
-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)