trip-map-builder について
trip-map-builderは、旅程の計画、調査、地図作成を3段階で行うスキルです。旅行計画向けに、エリア別の日程や飲食店調査をまとめ、現地で変更できる参考として旅程を作成します。
主な機能
- 01計画・調査・作成の3段階で進行
- 02旅行条件に沿って日程を編成
- 03大众点评と小红书で飲食店を調査
- 04場所情報付きの地図ページを作成
- 05長期的な旅行者の好みを記録
活用シーン
- 01日程やフライト条件に沿った旅行計画
- 02口コミと最近の投稿を使った店選び
- 03日ごとの計画を地図ページに整理
インストール
コマンドをコピーしてターミナルで実行します。
npx skills add https:/ / github.com/ hiyeshu/ trip-map-builder --skill trip-map-builderインストール後、Claude Code で/trip-map-builderを入力して読み込まれたか確認します。
同梱ファイル
SKILL.md と一緒にインストールされる参考資料やスクリプト。
CLAUDE.mdREADME.mdassets/template.htmlreferences/dianping-research.mdCLAUDE.mdxhs-research.mdtrip-planning.md詳細
旅行マップビルダー
3段階のパイプラインです:計画 → 調査 → 作成。
出力するのは参考用の旅程であり、旅行者が必ず従うべき台本ではありません。 旅行中は、天候、現在地、疲労、空腹によって当初の計画が変わることがあります。
共有メモリ
計画や作成を始める前に、~/.trip-map-builder/MEMORY.md が
存在する場合は読み込んでください。長期的に役立つ旅行者の情報にのみ使用します:
- ペースの好み
- 食べ物や飲み物の好み
- 予算の習慣
- 支払い方法やナビゲーションの好み
- 以前に生成した旅行の出力
- 繰り返し発生する制約や未解決のフォローアップ
ファイルが存在しない場合は、通常どおり続行してください。メモリの設定を待って処理を止めないでください。
生のスクリーンショット、パスポート情報、予約コード、チャットログ全体、 その他の機密情報やプライベートな情報を保存しないでください。
旅行の計画、調査、またはマップ作成が完了するたびに、長期的に役立つ事実のみを
~/.trip-map-builder/MEMORY.md に更新してください:
# Trip Map Builder Memory
## Traveler Defaults
- Departure city:
- Pace:
- Food preferences:
- Budget habits:
- Payment preference:
- Navigation preference:
- Language preference:
## Past Trips
| Trip | Dates | Destination | Output | Notes |
|------|-------|-------------|--------|-------|
## Reusable Preferences
-
## Open Threads
-
フェーズ 1:旅程を計画する
詳しい方法については、references/trip-planning.md を読んでください。
基本的な手順:
- 必須条件を抽出する — 日程、フライト時刻、ターミナル、ホテルの場所
- ユーザーの希望リストを分類する — 市内で行きやすい場所/予約が必要な場所/郊外の遠い場所/通過地点
- リスクの高い候補から外す — 遠すぎる場所、祝日で混雑する場所、天候に左右される場所。外したものと理由を伝えます。
- エリアごとに組み立てる — 1日につきメインエリアは1つ、初日は軽めに、最終日は空港の近くで過ごします
- 食事を組み込む — まず当日のエリア内の候補を検討し、次に大众点评 + 小红书の情報を参考にし、最後に知名度を考慮します。
- チケットと交通手段を追加する — 重要なもののみ(美術館のチケット、空港送迎など)
- 参考資料を作成する — 結論を最初に示し、続いて日ごとの計画、天候に左右されるスポット、食事エリア、外した候補を記載します
主な原則:
- ユーザーが挙げたものすべてが入るとは限りません。代わりに候補を絞ってください。
- 1日につきエリアは1つ。予約必須のスポットは1日につき最大1か所です。
- 旅程はゆとりのあるものにし、詰め込みすぎないようにします。
- 計画は後で調整するための目安を示すものであり、現実が予定どおり進むと想定するものではありません。
- ユーザー向けの質問はすべて4段階の形式に従います:前提を再確認 → 簡潔にする → 推奨する → 選択肢を提示する。例や避けるべきパターンについては、
references/trip-planning.md§ 用户交互 を参照してください。
フェーズ 2:大众点评 + 小红书で調査する
大众点评 OpenCLI のワークフローについては、references/dianping-research.md を読んでください。
小红书 OpenCLI + CDP のワークフローについては、references/xhs-research.md を読んでください。
レストランについては、味、行列のリスク、コストパフォーマンス、明らかな落とし穴を把握するための主要な中国料理の情報源として大众点评を使用します。雰囲気、最近の体験、写真映え、控えめな注意点を補うために小红书を使用します。すでにルート上にある場合を除き、有名レストランを中心に一日全体を組み立てないでください。
小红书の基本的な手順:
--remote-debugging-port=9223を指定して Chrome を起動する- OpenCLI の
CDPBridge経由で接続する xiaohongshu.com/search_result?keyword=<encoded>に移動する(入力欄への入力をシミュレートしない)POST /api/sns/web/v1/search/notesのレスポンスをインターセプトする- 関連性の高い上位 2~3 件の投稿を選び、詳細ページを開く
- DOM から抽出する:
#detail-title、#detail-desc、.author-container .username - 店舗ごとに、意思決定に役立つ一文にまとめ、ローカルの
.mdに書き戻す
フィルタリングのルール:
- 残すもの:具体的な店名、住所、料理、個人の体験、繰り返し見られるキーワード
- 除外するもの:エリア全体の一般的なまとめ、再投稿、感情だけの投稿、「雰囲気がとてもいい」という記述が 3 件
- 出力:店名 + 代表的なリンク 1 件 + 2~3 文の評価
フェーズ 3:マップページを作成する
assets/template.htmlをindex.htmlにコピーする- フェーズ 1 と 2 の構造化データを使って、
HOTELオブジェクトとDAYS配列を埋める - 各場所に必要な項目:name、lat/lng、type、time、desc。任意項目:budget、detail、pay、xhs、reserve、gmap
- 旅行の概要と支払いに関する注意事項を含めて
overviewContent()を埋める - デザインシステムを適用する — デフォルトのテンプレートは Apple スタイルですが、awesome-design-md の任意のスタイルに切り替えられます
場所のタイプ:food | spot | drink | hotel | transport
支払いチップの値:1 = 支払い可能と確認済み(緑)、0.5 = 可能性あり(オレンジ)、省略 = 表示しない
デザインシステム(任意)
デフォルトのテンプレートでは、Apple のデザインシステム(SF Pro、ライトテーマ、フロストガラス)を使用します。
別のスタイルを使う場合は、awesome-design-md から DESIGN.md を取得します。
# Browse available design systems
# Apple, Vercel, Linear, Stripe, Notion, Airbnb, Nike, Spotify, etc.
curl -O https://raw.githubusercontent.com/VoltAgent/awesome-design-md/main/design-md/<brand>/DESIGN.md
次に、選択した DESIGN.md のトークンに合わせて、template.html の :root CSS 変数(色、フォント、間隔、角丸)を調整します。
デプロイ(任意)
git init && git add . && git commit -m "trip map"
gh repo create REPO --public --source=. --push
# Import from vercel.com/new — auto-deploys on push
依存関係
| ツール | 用途 | インストール |
|---|---|---|
| OpenCLI | 大众点评アダプター + 小红书の調査 | npm install -g @jackwener/opencli |
| Chrome/Chromium | ブラウザー + リモートデバッグ | 既存 |
| Leaflet.js | 地図のレンダリング(CDN から読み込み、インストール不要) | template.html に内蔵 |
| gh CLI | GitHub リポジトリの作成(任意) | brew install gh |
リソース
references/trip-planning.md— 旅程計画の方法、入出力テンプレート、選定原則、よくある落とし穴references/dianping-research.md— 大众点评の OpenCLI 検索/店舗ワークフロー、飲食店選びの判断材料、書き戻し形式references/xhs-research.md— OpenCLI のインストール、Chrome CDP のセットアップ、小红书の検索ワークフロー、API の詳細、絞り込み条件assets/template.html— 単一ファイルの HTML 地図テンプレート(Leaflet + Apple のデザインシステム)- awesome-design-md — 別のスタイルに使える 60 種類以上のブランドデザインシステム(Apple、Vercel、Stripe、Linear など)