リンク構造を3Dグラフ化

起点URLから再帰的にリンクを辿り、サイト全体の構造をThree.jsでインタラクティブに可視化します。

準備中...

深度

起点 (0)

深さ 1

深さ 2

深さ 3+

起点

深さ1

深さ2

深さ3+

Node

起点からの経路

仕組み：3ステップでサイト構造を可視化

URLを入力してクロール

Cloudflare Workerが起点URLからBFSでリンクを全て探査します。

graph.json を生成

クロール結果がnodes（ページ）とlinks（リンク関係）としてJSON出力されます。

3Dグラフで可視化

Three.jsでインタラクティブな3Dグラフを描画。力指向と階層ツリーを切替可能。

API — Worker エンドポイント

// POST /api/crawl
const response = await fetch('/api/crawl', {
  method: 'POST',
  headers: { 'Content-Type': 'application/json' },
  body: JSON.stringify({
    url: 'https://example.com',
    depth: 2,
    sameOriginOnly: true
  })
});

// ストリーミングレスポンス
const reader = response.body.getReader();
while (true) {
  const { done, value } = await reader.read();
  if (done) break;
  const lines = new TextDecoder().decode(value).split('\n');
  for (const line of lines) {
    const event = JSON.parse(line);
    if (event.type === 'progress') updateProgress(event.progress);
    if (event.type === 'complete') renderGraph(event.data);
  }
}