webflow-automation

Rube MCP を使った Webflow の自動化

Composio の Webflow ツールキットを通じて、CMS コレクションの管理、サイトの公開、ページの確認、アセットのアップロード、E コマース注文の取得など、Webflow の操作を自動化できます。

ツールキットのドキュメント：composio.dev/toolkits/webflow

前提条件

• Rube MCP が接続されていること（RUBE_SEARCH_TOOLS を利用可能であること）
• webflow ツールキットを使用した、RUBE_MANAGE_CONNECTIONS 経由の有効な Webflow 接続
• 最新のツールスキーマを取得するため、必ず最初に RUBE_SEARCH_TOOLS を呼び出してください

セットアップ

Rube MCP を入手する：クライアントの設定で https://rube.app/mcp を MCP サーバーとして追加します。API キーは不要です。エンドポイントを追加するだけで動作します。

1. RUBE_SEARCH_TOOLS が応答することを確認し、Rube MCP が利用可能であることを確かめます
2. webflow ツールキットを指定して RUBE_MANAGE_CONNECTIONS を呼び出します
3. 接続が ACTIVE でない場合は、返された認証リンクに従って Webflow OAuth を完了します
4. ワークフローを実行する前に、接続ステータスが ACTIVE であることを確認します

主なワークフロー

1. CMS コレクション項目の管理

使用する場面：ユーザーが Webflow CMS コレクション（ブログ投稿、商品、チームメンバーなど）の項目を作成、更新、一覧表示、または削除したい場合

ツールの順序：

1. WEBFLOW_LIST_WEBFLOW_SITES - 対象の site_id を見つけるためにサイトを一覧表示します［前提条件］
2. WEBFLOW_LIST_COLLECTIONS - サイトのすべてのコレクションを一覧表示します［前提条件］
3. WEBFLOW_GET_COLLECTION - 有効なフィールドスラッグを確認するために、コレクションスキーマを取得します［作成／更新の前提条件］
4. WEBFLOW_LIST_COLLECTION_ITEMS - フィルタリングとページネーションを使って既存の項目を一覧表示します［任意］
5. WEBFLOW_GET_COLLECTION_ITEM - 特定の項目の詳細情報を取得します［任意］
6. WEBFLOW_CREATE_COLLECTION_ITEM - フィールドデータを指定して新しい項目を作成します［作成時に必須］
7. WEBFLOW_UPDATE_COLLECTION_ITEM - 既存の項目のフィールドを更新します［更新時に必須］
8. WEBFLOW_DELETE_COLLECTION_ITEM - 項目を完全に削除します［任意］
9. WEBFLOW_PUBLISH_SITE - 変更を公開してライブに反映します［任意］

CREATE_COLLECTION_ITEM の主なパラメーター：

• collection_id：LIST_COLLECTIONS から取得する 24 文字の 16 進文字列
• field_data：フィールドスラッグをキーとするオブジェクト（表示名ではありません）。name と slug を含める必要があります
• field_data.name：項目の表示名
• field_data.slug：URL に適した識別子（小文字、ハイフン使用、スペースなし）
• is_draft：下書きとして作成するかどうかを指定するブール値（デフォルトは false）

UPDATE_COLLECTION_ITEM の主なパラメーター：

• collection_id：コレクション識別子
• item_id：既存の項目の 24 文字の 16 進数 MongoDB ObjectId
• fields：フィールドスラッグをキーとし、新しい値を指定するオブジェクト
• live：変更をすぐに公開するかどうかを指定するブール値（デフォルトは false）

フィールド値の型：

• テキスト／メール／リンク／日付：文字列
• 数値：整数または浮動小数点数
• ブール値：true／false
• 画像：{"url": "...", "alt": "...", "fileId": "..."}
• 複数参照：参照 ID 文字列の配列
• 複数画像：画像オブジェクトの配列
• オプション：オプション ID 文字列

注意点：

• フィールドキーには表示名ではなく、コレクションスキーマに記載された正確なフィールド slug を使用する必要があります
• 正しいフィールドスラッグを特定するため、必ず最初に GET_COLLECTION を呼び出してスキーマを取得してください
• CREATE_COLLECTION_ITEM の field_data には name と slug が必要です
• UPDATE_COLLECTION_ITEM で新しい項目を作成することはできません。有効な既存の item_id が必要です
• item_id は 24 文字の 16 進数 MongoDB ObjectId である必要があります
• スラッグは、小文字の英数字とハイフンで構成する必要があります：^[a-z0-9]+(?:-[a-z0-9]+)*$
• CMS 項目はステージングされます。本番環境に反映するには PUBLISH_SITE を使用するか、live: true に設定してください

2. サイトと公開の管理

使用するタイミング：ユーザーがサイト一覧の取得、サイト設定の確認、またはステージング済みの変更の公開を希望する場合

ツールの順序：

1. WEBFLOW_LIST_WEBFLOW_SITES - アクセス可能なすべてのサイトを一覧表示します［必須］
2. WEBFLOW_GET_SITE_INFO - ドメインや設定など、サイトの詳細なメタデータを取得します［任意］
3. WEBFLOW_PUBLISH_SITE - ステージング済みのすべての変更をライブサイトにデプロイします［公開する場合は必須］

PUBLISH_SITE の主なパラメーター：

• site_id：LIST_WEBFLOW_SITES から取得したサイト識別子
• custom_domains：カスタムドメイン ID の文字列の配列（GET_SITE_INFO から取得）
• publish_to_webflow_subdomain：{shortName}.webflow.io に公開するかどうかを指定するブール値
• custom_domains または publish_to_webflow_subdomain の少なくとも一方を指定する必要があります

注意点：

• PUBLISH_SITE は、選択したドメインに対するステージング済みの変更をすべて再公開します。意図しない下書きが保留中でないことを確認してください
• レート制限：成功する公開は 1 分あたり 1 回です
• カスタムドメインがないサイトでは、publish_to_webflow_subdomain: true を設定する必要があります
• custom_domains にはドメイン名ではなく、ドメイン ID（16 進数の文字列）を指定します
• 公開は本番環境への操作です。必ず事前にユーザーに確認してください

3. ページの管理

使用するタイミング：ユーザーがページ一覧の取得、ページのメタデータの確認、またはページの DOM 構造の調査を希望する場合

ツールの順序：

1. WEBFLOW_LIST_WEBFLOW_SITES - 対象の site_id を特定します［前提条件］
2. WEBFLOW_LIST_PAGES - ページネーションを使用して、サイト内のすべてのページを一覧表示します［必須］
3. WEBFLOW_GET_PAGE - 特定のページの詳細なメタデータを取得します［任意］
4. WEBFLOW_GET_PAGE_DOM - 静的ページの DOM／コンテンツノード構造を取得します［任意］

主なパラメーター：

• site_id：サイト識別子（ページ一覧の取得に必須）
• page_id：24 文字の 16 進数のページ識別子
• locale_id：多言語サイト向けの任意のロケールフィルター
• limit：1 ページあたりの最大結果数（最大 100）
• offset：ページネーションのオフセット

注意点：

• LIST_PAGES は offset／limit を使ってページネーションを行います。ページ数の多いサイトでは、繰り返し取得してください
• ページ ID は ^[0-9a-fA-F]{24}$ のパターンに一致する 24 文字の 16 進数の文字列です
• GET_PAGE_DOM が返すのはノード構造であり、レンダリング済みの HTML ではありません
• ページには静的ページと CMS 駆動のページの両方が含まれます

4. アセットのアップロード

使用するタイミング：ユーザーが Webflow サイトに画像、ファイル、その他のアセットをアップロードしたい場合

ツールの順序：

1. WEBFLOW_LIST_WEBFLOW_SITES - 対象の site_id を特定します［前提条件］
2. WEBFLOW_UPLOAD_ASSET - Base64 エンコードされたコンテンツを使ってファイルをアップロードします［必須］

主なパラメーター：

• site_id：サイト識別子
• file_name：ファイル名（例："logo.png"）
• file_content：ファイルの Base64 エンコードされたバイナリーコンテンツ（プレースホルダーや URL は指定できません）
• content_type：MIME タイプ（例："image/png"、"image/jpeg"、"application/pdf"）
• md5：ファイルの生バイト列の MD5 ハッシュ（32 文字の 16 進数の文字列）
• asset_folder_id：任意の格納先フォルダー

注意点：

• file_content には実際の Base64 エンコード済みデータが必要です。変数参照やプレースホルダーは指定できません
• md5 は Base64 文字列ではなく、生バイト列から計算する必要があります
• 内部では 2 段階の処理が行われます。まず S3 の事前署名付き URL を生成し、その後アップロードします
• 大きなファイルはタイムアウトする可能性があるため、アップロードするファイルのサイズは適切な範囲に抑えてください

5. E コマース注文の管理

使用するタイミング：ユーザーが Webflow サイトの E コマース注文の表示を希望する場合

ツールの順序：

1. WEBFLOW_LIST_WEBFLOW_SITES - E コマースが有効なサイトを特定します［前提条件］
2. WEBFLOW_LIST_ORDERS - 任意のステータスフィルターを指定して、すべての注文を一覧表示します［必須］
3. WEBFLOW_GET_ORDER - 特定の注文の詳細情報を取得します［任意］

主なパラメーター：

• site_id：サイト識別子（E コマースが有効である必要があります）
• order_id：詳細取得の対象となる特定の注文識別子
• status：ステータスで注文を絞り込みます

注意点：

• 注文関連のエンドポイントを利用するには、Webflow サイトで E コマースが有効になっている必要があります
• 注文関連のエンドポイントは読み取り専用です。これらのツールを使って注文を作成、更新、削除することはできません

共通パターン

ID の解決

Webflow では、全体を通じて 24 文字の 16 進数 ID を使用します。

• サイト ID：WEBFLOW_LIST_WEBFLOW_SITES — 名前で検索し、id を取得します
• コレクション ID：WEBFLOW_LIST_COLLECTIONS に site_id を指定します
• アイテム ID：WEBFLOW_LIST_COLLECTION_ITEMS に collection_id を指定します
• ページ ID：WEBFLOW_LIST_PAGES に site_id を指定します
• ドメイン ID：WEBFLOW_GET_SITE_INFO — customDomains 配列内で確認できます
• フィールドスラッグ：WEBFLOW_GET_COLLECTION — コレクションの fields 配列内で確認できます

ページネーション

Webflow では、オフセットベースのページネーションを使用します。

• offset：開始インデックス（0 ベース）
• limit：1 ページあたりのアイテム数（最大 100）
• 返される結果が limit より少なくなるまで、offset を limit ずつ増やします
• 利用可能なツール：LIST_COLLECTION_ITEMS、LIST_PAGES

CMS ワークフロー

CMS コンテンツを作成する一般的な流れ：

1. LIST_WEBFLOW_SITES から site_id を取得します
2. LIST_COLLECTIONS から collection_id を取得します
3. GET_COLLECTION からフィールドスキーマを取得します（フィールドスラッグを確認するため）
4. 正しいフィールドスラッグを使用してアイテムを作成／更新します
5. サイトを公開して変更を反映します

既知の注意点

ID の形式

• Webflow の ID はすべて 24 文字の 16 進数文字列です（MongoDB ObjectId）
• 例：580e63fc8c9a982ac9b8b745
• パターン：^[0-9a-fA-F]{24}$
• 無効な ID を指定すると 404 エラーが返されます

フィールドスラッグと表示名

• CMS 操作では、表示名ではなくフィールドの slug 値が必要です
• 表示名が「Author Name」のフィールドのスラッグは、author-name の場合があります
• 正しいフィールドスラッグを確認するには、必ず GET_COLLECTION を呼び出します
• 間違ったフィールド名を使用すると、データが無視されるか、検証エラーが発生します

公開

• PUBLISH_SITE は特定のアイテムだけでなく、ステージングされた変更をすべてデプロイします
• 公開は 1 分あたり 1 回に制限されています
• 少なくとも 1 つのドメインの対象（カスタムドメインまたは Webflow サブドメイン）を指定する必要があります
• これは本番環境に影響する操作です。必ず実行の意図を確認してください

認証スコープ

• 操作によって必要な OAuth スコープは異なります：sites:read、cms:read、cms:write、pages:read
• 403 エラーは通常、OAuth スコープが不足していることを示します
• 操作が認可エラーで失敗した場合は、接続の権限を確認してください

破壊的な操作

• DELETE_COLLECTION_ITEM は CMS アイテムを完全に削除します
• PUBLISH_SITE はステージングされた変更をすべて直ちに公開します
• これらの操作を実行する前に、必ずユーザーに確認してください

クイックリファレンス

タスク	ツールスラッグ	主なパラメーター
サイトの一覧表示	WEBFLOW_LIST_WEBFLOW_SITES	（なし）
サイト情報の取得	WEBFLOW_GET_SITE_INFO	site_id
サイトの公開	WEBFLOW_PUBLISH_SITE	site_id、custom_domains または publish_to_webflow_subdomain
コレクションの一覧表示	WEBFLOW_LIST_COLLECTIONS	site_id
コレクションスキーマの取得	WEBFLOW_GET_COLLECTION	collection_id
コレクションアイテムの一覧表示	WEBFLOW_LIST_COLLECTION_ITEMS	collection_id、limit、offset
コレクションアイテムの取得	WEBFLOW_GET_COLLECTION_ITEM	collection_id、item_id
コレクションアイテムの作成	WEBFLOW_CREATE_COLLECTION_ITEM	collection_id、field_data
コレクションアイテムの更新	WEBFLOW_UPDATE_COLLECTION_ITEM	collection_id、item_id、fields
コレクションアイテムの削除	WEBFLOW_DELETE_COLLECTION_ITEM	collection_id、item_id
ページの一覧表示	WEBFLOW_LIST_PAGES	site_id、limit、offset
ページの取得	WEBFLOW_GET_PAGE	page_id
ページ DOM の取得	WEBFLOW_GET_PAGE_DOM	page_id
アセットのアップロード	WEBFLOW_UPLOAD_ASSET	site_id、file_name、file_content、content_type、md5
注文の一覧表示	WEBFLOW_LIST_ORDERS	site_id、status
注文の取得	WEBFLOW_GET_ORDER	site_id、order_id

---

Composio 提供