map-route

/map-route

┌──────────────────────┐
│ [▲ 9 min]            │  ETA card counts down, then "Arrived"
│      ┌Iron Yard Gym┐ │  destination card after the pin lands
│  ▒▒   ▒▒   📍  ▒▒    │  white 3D blocks, parks, a river
│  ▒▒ ━━━━━━━┛   ▒▒    │  the route draws itself, the camera rides along
│  ▒▒ ┃  ▒▒      ▒▒    │  and pulls back at the end
└──────────────────────┘

初めて使う場合

このスキルのフォルダーは、Claude Code が読み込む際に表示する「Base directory」です。

SKILL_DIR="<base directory of this skill>"
KIT=$(python3 -c 'import os,sys;print(os.path.realpath(os.path.join(sys.argv[1],"..","..","kit")))' "$SKILL_DIR")
[ -s "$KIT/node_modules/three/build/three.module.js" ] || bash "$KIT/setup.sh"

ffmpeg と Node が必要です。ヘッドレス Chrome の WebGL でレンダリングします。

手順

1. 移動。 ユーザーから目的地の名前、所要時間、距離を聞きます（「自宅からジムまで、2.8 km、9 分」など）。分数か距離のどちらか一方しか伝えられなかった場合は、もう一方を推定し、その旨を伝えます（徒歩は約 1 km あたり 12 分、自転車は約 4 分、市街地での車移動は約 2 分）。
2. 仕様。 <name>.map.json を作成します（下記参照）。
3. ビルド。 python3 "$SKILL_DIR/build.py" <spec.json> を実行します。3D レンダリングには約 1.5 分かかり、そのほとんどは WebGL の処理を待つ HyperFrames に費やされます（sub_timeline_readiness_timeout の警告は正常です）。最初に最終フレームを確認するには --snap 3.8 を追加します。
4. 確認。 シートを確認します。目的地カード全体が画面内にあり、道路ラベルが到着予定時刻カードに重なっていないことを確認します。
5. 受け渡し。 mp4 のパスを渡します。

仕様

{
  "destination": "Iron Yard Gym", "minutes": 9, "distance": 2.8, "unit": "km",
  "places": ["North Quay", "Botanic Gardens", "Market Hall", "Elm Park", "The Canal"],
  "accent": "#2f7cf6", "seed": 7
}

• destination、minutes、distance：必須です。unit："km" または "mi"。
• places：地図上の固定位置に配置する、5 つの小さな灰色のラベルです。順番は、出発地点の近く、左端の公園、経路の中ほどの街区、右端の公園、川です。ユーザーの都市に合った名前を使うか、非表示にする場合は "" を指定します。装飾用であり、実際の地理情報ではありません。
• accent：経路、移動するドット、到着予定時刻アイコンの色（16 進数）。ピンは赤のままです。
• seed：異なる整数を指定すると、建物や公園の配置が変わります。
• hold（任意）：最後に追加する秒数です。out（任意）：出力先のパスです。

経路の変更

経路の形状は固定です。上、右、上、右の順に進み、ピンで終わります。変更するには、"$SKILL_DIR/template.html" を仕様ファイルと同じ場所にコピーし、コピー内の WP を編集します（[x, z] の座標。各コーナーは、4 の倍数に沿って延びる道路上に配置する必要があります。x は -36 から 36、z は -88 から 24 の範囲で、北は z の負方向です）。次に、仕様に "template": "template.html" を追加します。カメラの最終的な引きの目標位置（new THREE.Vector3(3, 0, -27)）とラベルの配置位置（LBL）はデフォルトの経路に合わせて調整されているため、経路と一緒に移動し、--snap で確認してください。

表現のコツ

• 短く、実在しそうな名前にします。目的地カードには約 26 文字まで表示できます。
• 落ち着いた表現にします。経路は 1 つ、ピンは 1 つ。余分な矢印や吹き出しは使いません。