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

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起動コマンド"
+\`\`\`bash title="vLLM起動コマンド"
-docker run -d --name qwen3-coder-next-fp8 \
+docker run -d --name qwen3-coder-next-fp8 \\
-  --gpus all \
+  --gpus all \\
-  -p 8000:8000 \
+  -p 8000:8000 \\
-  -v ~/.cache/huggingface:/root/.cache/huggingface \
+  -v ~/.cache/huggingface:/root/.cache/huggingface \\
-  --ipc=host \
+  --ipc=host \\
-  nvcr.io/nvidia/vllm:25.11-py3 \
+  nvcr.io/nvidia/vllm:25.11-py3 \\
-  vllm serve Qwen/Qwen3-Coder-Next-FP8 \
+  vllm serve Qwen/Qwen3-Coder-Next-FP8 \\
-  --served-model-name qwen3-coder-next \
+  --served-model-name qwen3-coder-next \\
-  --max-model-len 200000 \
+  --max-model-len 200000 \\
-  --max-num-seqs 8 \
+  --max-num-seqs 8 \\
-  --gpu-memory-utilization 0.85 \
+  --gpu-memory-utilization 0.85 \\
-  --enable-auto-tool-choice \
+  --enable-auto-tool-choice \\
-  --tool-call-parser qwen3_xml \
+  --tool-call-parser qwen3_xml \\
   --trust-remote-code
-```
+\`\`\`
 
 #### 重要なポイント
 
 | オプション | 値 | 説明 |
 |-----------|-----|------|
-| `--max-model-len` | 200000 | 200Kトークンまで対応 |
+| \`--max-model-len\` | 200000 | 200Kトークンまで対応 |
-| `--max-num-seqs` | 8 | 同時リクエスト数（メモリ節約） |
+| \`--max-num-seqs\` | 8 | 同時リクエスト数（メモリ節約） |
-| `--tool-call-parser` | **qwen3_xml** | ⚠️ これ超重要！ |
+| \`--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
+\`\`\`bash
-ANTHROPIC_BASE_URL=http://localhost:8082 \
+ANTHROPIC_BASE_URL=http://localhost:8082 \\
-ANTHROPIC_API_KEY=dummy \
+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` を忘れずに！
+3. \`--tool-call-parser qwen3_xml\` を忘れずに！
-4. `ANTHROPIC_AUTH_TOKEN` は設定しない
+4. \`ANTHROPIC_AUTH_TOKEN\` は設定しない
 
-完全ローカルでClaude Codeが動く喜び、ぜひ体験してみてください。
+セットアップは複雑ですが、一度動けば**速くて安定**。完全ローカルでClaude Codeが動く喜び、ぜひ体験してみてください。
 
 ## 参考リンク
 

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
+### Quick Start
-# ページを開く
-playwright-cli open https://example.com
-
-# ヘッドフル（ブラウザ表示）で開く
-playwright-cli open https://example.com --headed
 
+\`\`\`bash
+# ブラウザを開く
+playwright-cli open
+# URLに移動
+playwright-cli goto https://playwright.dev
+# スナップショットの要素ref（e15等）を使ってクリック
+playwright-cli click e15
 # テキスト入力
-playwright-cli type "検索キーワード"
+playwright-cli type "page.click"
-
-# クリック
-playwright-cli 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保存）
-# セッションを永続化（Cookie保存）
+playwright-cli open --persistent
-playwright-cli open https://example.com --persistent
-
 # 全セッション終了
 playwright-cli close-all
-```
+# 強制終了
-
+playwright-cli kill-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
 \`\`\`
 
-### セッション管理
+### DevTools
 
 \`\`\`bash
-# セッション一覧
+playwright-cli console       # コンソールログ
-playwright-cli list
+playwright-cli network       # ネットワークリクエスト
-
+playwright-cli tracing-start # トレース開始
-# 全セッション終了
+playwright-cli tracing-stop  # トレース終了
-playwright-cli close-all
+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: フォーム入力
 
-```
+\`\`\`bash
-> https://news.ycombinator.com のトップ10記事のタイトルとURLを取得して
+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
+\`\`\`
 
-```
+### 例2: 複数タブ操作
-> お問い合わせフォームに以下の内容を入力して送信して
-> 名前: テスト太郎
-> メール: test@example.com
-```
 
-### 例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
+### 例3: 認証状態の保存
-# 永続セッションで開く
-playwright-cli open https://private-site.com --headed --persistent
-```
 
-手動でログイン後、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ファイルを作る** - プロジェクト専用のスキルを定義
+2. **公式SKILLSを使う** - \`playwright-cli install --skills\`
-3. **セッションを活用** - ログイン状態を保持
+3. **snapshotでref確認** - 要素はe1, e2などのrefで指定
-4. **--headed で確認** - 困ったらブラウザを表示
+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)