webflow-mcp:custom-code-management

カスタムコード管理

Webflow サイトにインラインのカスタムスクリプトを追加、確認、管理します。アナリティクス、トラッキングピクセル、チャットウィジェット、その他のカスタム JavaScript が対象です。

重要な注意事項

すべての操作には必ず Webflow MCP ツールを使用してください：

• 他のツールを呼び出す前に、Webflow MCP の webflow_guide_tool を使用してベストプラクティスを確認してください
• Webflow MCP の data_sites_tool でアクション list_sites を指定し、利用可能なサイトを特定してください
• Webflow MCP の data_scripts_tool でアクション list_registered_scripts を指定し、登録済みスクリプトをすべて一覧表示してください
• Webflow MCP の data_scripts_tool でアクション list_applied_scripts を指定し、ページに適用されているスクリプトを一覧表示してください
• Webflow MCP の data_scripts_tool でアクション add_inline_site_script を指定し、新しいインラインスクリプトを登録してください
• Webflow MCP の data_scripts_tool でアクション delete_all_site_scripts を指定し、サイトのスクリプトをすべて削除してください（個別削除はできません）
• Webflow MCP の data_scripts_tool でアクション get_page_script を指定し、特定のページのカスタムコードを取得してください
• Webflow MCP の data_scripts_tool でアクション upsert_page_script を指定し、ページレベルのカスタムコードを追加または更新してください
• Webflow MCP の data_scripts_tool でアクション delete_all_page_scripts を指定し、ページのカスタムコードをすべて削除してください
• すべてのツール呼び出しに、必須の context パラメーター（第三者視点で15〜25語）を含めてください

手順

フェーズ 1：情報収集

1. 最初に webflow_guide_tool を呼び出します — MCP ツールの呼び出しは必ずこれから始めてください
2. サイトを取得します：data_sites_tool でアクション list_sites を指定します。サイトが1つだけの場合は、自動的にそれを使用してください。

フェーズ 2：分析

3. スクリプトを一覧表示します：list_registered_scripts と list_applied_scripts を並行して呼び出します
4. ページレベルのスクリプトを確認します（該当する場合）：特定のページに対して get_page_script を使用します
5. 確認結果を提示します：名前、バージョン、場所（ヘッダー／フッター）、登録状況と適用状況

フェーズ 3：計画と確認

変更を加える前に、計画を提示し、明示的な確認を求めてください：

• スクリプトの追加：ユーザーは "add" と入力する必要があります
• サイトのスクリプトをすべて削除：ユーザーは "delete all" と入力する必要があります（個別削除できないことを警告してください）
• ページレベルの変更：ユーザーは "update" と入力する必要があります

フェーズ 4：実行

6. サイトスクリプトを追加します：add_inline_site_script に displayName、sourceCode、version、location、canCopy を指定します
7. サイトのスクリプトをすべて削除します：delete_all_site_scripts
8. ページスクリプトを追加／更新します：upsert_page_script
9. ページのスクリプトを削除します：delete_all_page_scripts

フェーズ 5：検証

10. スクリプトを再度一覧表示し、成功を確認します
11. 変更内容（名前、場所、バージョン、文字数）を報告します
12. ユーザーに公開を促します — safe-publish スキルの使用を提案してください

例

例 1：スクリプトを表示する

ユーザー：「サイトにはどんなスクリプトがありますか？」

1. webflow_guide_tool → data_sites_tool → list_registered_scripts と list_applied_scripts を並行して呼び出す
2. すべてのスクリプトの概要を提示する

例 2：Google Tag Manager を追加する

ユーザー：「サイトに GTM を追加して」

1. webflow_guide_tool → data_sites_tool → GTM コンテナ ID を尋ねる
2. スクリプトをプレビューし、「add」と入力するよう求める → add_inline_site_script（ヘッダー、バージョン "1.0.0"）
3. 検証し、公開を促す

例 3：すべてのスクリプトを削除する

ユーザー：「すべてのスクリプトを削除して」

1. webflow_guide_tool → data_sites_tool → 現在のスクリプトを一覧表示する
2. スクリプトがすべて削除されることを警告する。「delete all」と入力するよう求める → delete_all_site_scripts
3. 検証し、公開を促す

例 4：ページ固有のトラッキング

ユーザー：「サンクスページにコンバージョントラッキングを追加して」

1. webflow_guide_tool → data_sites_tool → get_page_script で既存のコードを確認する
2. プレビューし、「update」と入力するよう求める → upsert_page_script
3. 検証し、公開を促す

ガイドライン

• webflow_guide_tool を常に最初に使う — ほかの MCP ツールを使う前に実行します
• <script> タグは使用しない — Webflow が自動的に追加します
• スクリプトは最大 10,000 文字です。displayName + version は一意である必要があります
• サイトレベルのスクリプト（add_inline_site_script）はすべてのページに適用されます。ページレベルのスクリプト（upsert_page_script）は 1 ページに適用されます
• 選択的な削除はできません — delete_all_site_scripts はすべてを削除します。失われるものをユーザーが把握できるよう、必ず最初にスクリプトを一覧表示してください
• ホスト型／外部スクリプトは MCP 経由では利用できません — インラインのみです
• アナリティクス（GA、GTM）にはヘッダーを、チャットウィジェットや重要度の低いスクリプトにはフッターを推奨します
• displayName + version が存在する場合は、バージョンの引き上げを提案してください
• 変更後は必ず公開するよう、ユーザーに伝えてください