---
name: Web Preview
slug: web-preview
category: Automation
description: Web Preview builds the Flutter web app, starts a local server, and checks it with Playwright before sharing the URL. Use it when you need a quick preview link and basic runtime verification.
github: "https://github.com/K9i-0/ccpocket/tree/main/.claude/skills/web-preview"
language: Dart
stars: 1039
forks: 97
install: "npx degit https://github.com/K9i-0/ccpocket/tree/main/.claude/skills/web-preview ~/.claude/skills/web-preview"
installs_to: ~/.claude/skills/web-preview
source_path: .claude/skills/web-preview/SKILL.md
collection_size: 18
category_size: 1523
collection_url: "https://dirskills.com/collections/K9i-0/ccpocket"
added: 2026-08-21T05:14:08.234Z
last_synced: 2026-08-21T05:14:08.234Z
canonical_url: "https://dirskills.com/skills/web-preview"
---

# Web Preview

Web Preview builds the Flutter web app, starts a local server, and checks it with Playwright before sharing the URL. Use it when you need a quick preview link and basic runtime verification.

**Install:**

```bash
npx degit https://github.com/K9i-0/ccpocket/tree/main/.claude/skills/web-preview ~/.claude/skills/web-preview
```

## README

# 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
```