---
id: K9i-0/ccpocket/web-preview
version: "8bf75b6c"
license: MIT
install: manual
updated: 2026-07-27
---

# web-preview — web-preview automates Flutter web builds, spins up a local server, and validates the deployment with Playwright before delivering shareable preview URLs to your team. It handles port management, generates screenshots for verification, and supports both local and network-accessible URLs.

Publisher: K9i-0 · Stars: 998 · Updated: 2026-07-27

Install (manual): `git clone https://github.com/K9i-0/ccpocket`

## SKILL.md

# Web Preview

Flutter Web版をビルド → サーバー起動 → Playwright でアクセス確認 → URLをユーザーに案内する。

## 手順

### 1. ビルド & サーバー起動（スクリプト）

```bash
bash .claude/skills/web-preview/scripts/web-preview.sh .
```

スクリプトが以下を一括で行う:
- `flutter build web --release`
- ポート8888の既存プロセスを停止（PIDファイル優先）
- `nohup python3 -m http.server` で安定してバックグラウンド起動
- `curl` で起動完了を待機・検証
- `LOCAL_URL`（`127.0.0.1`）と共有用 `URL`（Tailscale優先）を出力

出力例:

```text
PID: 12345
LOCAL_URL: http://127.0.0.1:8888
URL: http://<tailscale-ip>:8888
```

### 2. Playwright でアクセス確認

Playwright検証は `LOCAL_URL` を優先して実施する:

```bash
playwright-cli open <LOCAL_URL>
playwright-cli eval "document.title"
playwright-cli screenshot --filename=web-preview.png
playwright-cli close
```

- `document.title` が `ccpocket` であることを確認する
- スクリーンショットを取得してページが正常に表示されることを確認する
- エラーがあればユーザーに報告する

### 3. ユーザーへの案内

以下の情報をユーザーに伝える:

- ローカル確認URL（`LOCAL_URL`）
- 共有用URL（`URL`。通常はTailscale）
- スクリーンショット（確認用）
- ⚠️ ブラウザキャッシュクリア（Cmd+Shift+R）してからリロードすること

## トラブルシュート

- `ERR_CONNECTION_REFUSED` が出る場合:
  - `curl -I <LOCAL_URL>` でサーバー生存確認
  - `lsof -nP -iTCP:8888 -sTCP:LISTEN` で待受確認
  - `/tmp/ccpocket-web-preview-8888.log` を確認
- 一部の実行環境では、コマンド終了時にバックグラウンドプロセスが回収されることがある。
  その場合は別ターミナルで以下を起動してから Playwright を実行する:

```bash
cd apps/mobile/build/web
python3 -m http.server 8888
```


[View on SkillFed](https://skillfed.io/K9i-0/ccpocket/web-preview) · [View on GitHub](https://github.com/K9i-0/ccpocket)