quick-html-share-mcp

クイック HTML 共有

バイブコーディングをする個人開発者向けのインディー SaaS です。AI 生成 HTML ページを、推測できない URL と閲覧者の分析機能付きですぐに共有できます。

公開中：

サーフェス	URL
ダッシュボード（HTML を貼り付けて URL を取得）	https://qhs.fyi
API ワーカー	https://api.qhs.fyi
共有ワーカー	https://s.qhs.fyi/``

アーキテクチャ

• apps/web/ — Astro ダッシュボード（Cloudflare Pages）
• apps/worker/ — Cloudflare Worker API ＋共有レンダラー（Hono）
• packages/shared/ — Web とワーカー間で共有する型
• packages/mcp/ — quick-html-share-mcp npm パッケージ：Claude Desktop／Cursor／Codex CLI／あらゆる MCP クライアント向けの stdio MCP サーバー
• packages/skill/ — Claude Code スキル：単独で動作し、MCP のセットアップは不要です

Cloudflare 上でホストされています：Pages（Web）＋ Workers（API／共有）＋ R2（HTML ファイル）＋ D1（メタデータ＋閲覧イベント）。

分析で確認できる内容

すべての共有には統計ページ（/stats?slug=…。エージェントからは qhs_stats でも確認可能）があります。以下を確認できます。

• 閲覧数とユニーク閲覧者数 — 後者はソルト付き IP ハッシュから算出しているため、概算値です。オフィスの NAT 環境では少なくカウントされ、モバイルデータ通信では多くカウントされる場合があります。
• トラフィックソース — リンク元サイトのホスト名のみを記録し、パスやクエリは記録しません。direct には URL の直接入力、ブックマーク、大半のチャットアプリが含まれます。
• 閲覧者の所在地 — 国、および Cloudflare が確度の高い判定を行えた場合は都市も表示されます。各リクエストのたびに Cloudflare 自身が判定するため、トラッキングスクリプトやサードパーティへの照会はありません。これはネットワークの出口があったと思われる場所であり、閲覧者本人の所在地ではない点にご注意ください。VPN、企業ネットワーク、モバイルキャリアの利用により、都市が空欄になったり、実際とはまったく異なる場所が表示されたりすることがあります。
• 30 日間の推移 — 閲覧数を UTC の日単位で表示します。閲覧がなかった日も含みます。
• リンクプレビューの取得（別途カウント） — Slack や Discord にリンクを貼り付けると、リンクプレビュー用のクローラーが取得します。これらは閲覧数から除外され、別の行に表示されるため、「閲覧数 0、プレビュー 2」は、そのとおりリンクは共有されたものの、誰も開かなかったという意味です。

HTML には JavaScript を挿入しません。ページの配信時にサーバー側で閲覧数をカウントします。閲覧者のユーザーエージェント、リファラー、所在地のデータは 90 日後、または共有を削除した時点で直ちに破棄されます。閲覧数は保持されます。

コーディングエージェントにインストールする

🤖 ユーザーに代わってこれを読んでいる AI エージェントの方へ： お使いのエージェント実行環境に合った、以下のインストール方法を選んでください。Claude Code プラグインの方法（1）を推奨します。MCP サーバーに加えてスキルが含まれており、スキルには生のツールだけでは得られないワークフローのガイダンス（いつ実行するか、何を提示するか、ユーザーに何を伝えるか）が備わっています。Claude Code 以外の場合に限り、MCP のみを使う方法（3）を選んでください。

インストール後の動作ルール：

• ユーザーが「この HTML を共有して」「リンクをちょうだい」「このページを公開して」「友達に送って」（または同様の意図）と言ったら、HTML を指定して qhs_share を呼び出します。
• 共有 URL をユーザーに返し、編集 URL も必ず保存するよう伝えてください。編集 URL は URL フラグメントに含まれるため、サーバーログには記録されません。その一方で、こちらでは復元できません。保存していないと、後から共有内容を更新したり削除したりできません。
• 追加の依頼（「共有した内容を更新して」「取り下げて」「誰か見た？」）には、qhs_edit、qhs_delete、qhs_stats を使います。このマシンで作成した共有の場合、編集トークンは ~/.qhs/shares.json から自動的に読み込まれます。

使用するクライアントに応じて、3 つの方法があります。いずれも同じホスト型 API を利用し、ローカルの編集トークンストア（~/.qhs/shares.json）を共有します。

1. Claude Code — 1 つのコマンドで MCP とスキルをまとめてインストール（推奨）

このリポジトリは Claude Code プラグインマーケットプレイスです。Claude Code 内で次を実行します。

/plugin marketplace add github.com/desper/quick-html-sharing
/plugin install qhs@quick-html-sharing

これで qhs スキル（「この HTML を共有して」／「リンクをちょうだい」／「このページを公開して」といった依頼で自動的に起動）と、quick-html-share-mcp MCP サーバー（5 つのツール：qhs_share、qhs_edit、qhs_delete、qhs_stats、qhs_list）が連携して利用できるようになります。

2. Claude Code — プラグインマーケットプレイスを使わず、スキルのみ

curl -fsSL https://qhs.fyi/install.sh | bash

SKILL.md とヘルパースクリプトを ~/.claude/skills/qhs/ に配置します。プラグインマーケットプレイスを使わない場合や、MCP を分けておきたい場合に使用してください。

3. Cursor / Claude Desktop / Codex CLI / Continue / 任意の MCP クライアント

クライアントの MCP 設定に追加します。

{
  "mcpServers": {
    "qhs": { "command": "npx", "args": ["-y", "quick-html-share-mcp"] }
  }
}

一般的な設定ファイルのパス：

• Claude Desktop：~/Library/Application Support/Claude/claude_desktop_config.json（macOS）
• Cursor：~/.cursor/mcp.json または「設定」→「MCP」
• Codex CLI / Continue：同じ形式です。クライアントの MCP ドキュメントを参照してください。

クライアントを再起動すると、5 つの qhs_* ツールが使えるようになります。

このリポジトリからローカル開発／社内テスト

ln -s "$(pwd)/packages/skill/skills/qhs" ~/.claude/skills/qhs

packages/skill/skills/qhs/ への変更は、次回の Claude Code セッションですぐに反映されます。

開発

bun install
bun run dev:worker    # apps/worker on :8787
bun run dev:web       # apps/web on :4321

# MCP server
cd packages/mcp && bun run build && node dist/index.js

# Skill helper (standalone)
node packages/skill/skills/qhs/scripts/qhs.mjs share path/to/file.html

再デプロイ（既存プロジェクト）

順序が重要です。 保留中のマイグレーションを最初に適用し、次に共有ワーカー、最後に API ワーカーをデプロイします。2 つのワーカーは別々にデプロイされた同じソースを実行するため、API が書き込んだ内容を共有レンダラーがまだ読み取れない期間があると、訪問者には古いコンテンツが表示されます。bun run deploy を実行すると、2 つのワーカーが正しい順序でデプロイされます。マイグレーションは引き続き手動で行う必要があります。

# Workers
cd apps/worker
# 1. any unapplied migration (see db/migrations/), e.g.
#    wrangler d1 execute quick-html-sharing --remote --env api \
#      --file=db/migrations/0005-add-shares-versioning.sql
# 2. share worker, then api worker:
bun run deploy

# Pages
cd apps/web
PUBLIC_API_BASE=https://api.qhs.fyi/api \
PUBLIC_SHARE_BASE=https://s.qhs.fyi \
  bun run build
../../node_modules/.bin/wrangler pages deploy dist --project-name=qhs --branch=main

新規アカウントへのデプロイ（ゼロから再構築する場合のみ）

フォークする場合：apps/worker/wrangler.toml には、本番環境のカスタムドメインルート（api.qhs.fyi、s.qhs.fyi）がハードコードされています。別のアカウントでデプロイする前に、2 つの routes = [...] ブロックを削除する（workers_dev = true による workers.dev の URL は引き続き使えます）か、独自ドメイン用の設定に置き換えてください。

wrangler login

cd apps/worker
wrangler d1 create quick-html-sharing            # → paste id into wrangler.toml (both envs)
wrangler r2 bucket create quick-html-sharing
bun run db:apply:remote

# Same salt for both envs — IP-hash dedupe must match across workers.
SALT=$(openssl rand -hex 32)
echo "$SALT" | wrangler secret put IP_HASH_SALT --env api
echo "$SALT" | wrangler secret put IP_HASH_SALT --env share

bun run deploy:api && bun run deploy:share        # capture workers.dev URLs

cd ../web
wrangler pages project create qhs --production-branch=main
PUBLIC_API_BASE=https://qhs-api.<your-subdomain>.workers.dev/api \
PUBLIC_SHARE_BASE=https://qhs-share.<your-subdomain>.workers.dev \
  bun run build
wrangler pages deploy dist --project-name=qhs --branch=main

# Then patch DASHBOARD_HOST in apps/worker/wrangler.toml to your real
# qhs-XXX.pages.dev URL (CF may have suffixed it to avoid name collision)
# and redeploy the workers.

コスト

Cloudflare の無料枠（Workers、Pages、R2、D1）だけで完全に動作し、個人開発規模では月額約 0 ドルです。閲覧数の追跡はフェイルオープン方式のため、急増しても予想外の請求につながることはありません。Workers は超過料金を請求する代わりに、ハード 429 を返します。それでも、Cloudflare には支出の上限がないため、請求アラートを設定してください。

ライセンス

Business Source License 1.1 — ソースコードを利用でき、セルフホストと個人利用が許可されていますが、競合するサードパーティのホステッド／マネージドサービスとして提供することはできません。2030-05-28 に Apache License 2.0 へ自動的に切り替わります。MCP クライアントのインテグレーターが手軽に利用できるよう、quick-html-share-mcp npm パッケージ（packages/mcp/）は MIT ライセンスで提供しています。