webflow-mcp:compress-cms-image

Webflow CMS 画像圧縮

Webflow CMS アイテムの画像フィールドを圧縮し、.webp または .avif に変換します。

現時点では、リッチテキストフィールド内に埋め込まれた画像には対応していません。作業を開始する前に、この制限をユーザーに伝え、スキーマ型が Image または MultiImage の CMS フィールドのみを処理してください。

重要な注意事項

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

• 必要に応じて、Webflow MCP の data_sites_tool をアクション list_sites とともに使用して、サイト ID を特定します
• Webflow MCP の data_cms_tool をアクション get_collection_details とともに使用して、コレクションのスキーマを取得します
• Webflow MCP の data_cms_tool をアクション list_collection_items とともに使用して、対象の CMS アイテムを取得します
• Webflow MCP の data_assets_tool をアクション create_asset とともに使用して、署名付きアセットアップロードを作成します
• Webflow MCP の data_cms_tool をアクション update_collection_items とともに使用して、CMS の画像フィールドを更新します
• Webflow MCP の data_cms_tool をアクション publish_collection_items とともに使用して、更新したアイテムを公開します
• Webflow MCP の呼び出しにはすべて、必須の context パラメーターを含めてください（第三者の視点で15～25語）
• 変更を伴う操作には、ユーザーの明示的な確認が必要です。アセットのアップロード、CMS フィールドの更新、または公開の前に、ユーザーに confirm と入力するよう求めてください。
• リッチテキスト内に埋め込まれた画像はサポートされていません。画像圧縮のためにリッチテキストの HTML を解析または書き換えないでください。

手順

フェーズ 1：パラメーターの収集

可能な場合は、必要な入力をまとめて一度に収集します：

1. コレクション ID：「コレクション ID は何ですか？」と尋ねます
2. アイテム ID：「アイテム ID は何ですか？」と尋ねます
3. 画像フィールド：「どの画像フィールドを圧縮しますか？」と尋ねます
   • 「すべての画像フィールド」— アイテムにある Image または MultiImage フィールドをすべて圧縮します
   • 「フィールド名を指定」— ユーザーが特定のフィールドスラッグを指定します
4. 変換先の形式：「変換先の形式は何ですか？」と尋ねます
   • 「webp（推奨）」— ブラウザーのサポートが良好で、圧縮率も優れています
   • 「avif」— 圧縮率はさらに優れていますが、サポートはやや限定的です
5. 品質（1～100）：「品質（1～100）はいくつですか？」と尋ねます
   • 「85 - 推奨（webp）」— ほとんどの写真で見た目上、劣化がありません
   • 「75 - 推奨（avif）」— avif は低い品質設定でも効率的です
   • 「カスタム」— ユーザーが独自の値を入力します

ユーザーが「フィールド名を指定」を選んだ場合は、カンマ区切りのフィールドスラッグを追加で尋ねます。ユーザーが品質に「カスタム」を選んだ場合は、数値を追加で尋ねます。カスタム品質が1～100の整数であることを検証してください。

フェーズ 2：画像フィールドの特定

1. data_cms_tool をアクション get_collection_details とコレクション ID とともに呼び出します。
2. type === "Image" または type === "MultiImage" のフィールドに絞り込みます。
3. 対象フィールドを選択します：
   • ユーザーが「すべての画像フィールド」を選んだ場合、見つかったすべての Image と MultiImage フィールドを使用します。
   • ユーザーが特定のフィールドを指定した場合、各スラッグが存在し、Image または MultiImage フィールドであることを検証します。
   • 存在しないフィールド、または画像フィールドではないフィールドをユーザーが指定した場合は、警告してスキップします。
4. 有効な画像フィールドが残らなければ、停止してその旨を報告します。

フェーズ 3：CMS アイテムの取得

data_cms_tool をアクション list_collection_items とともに呼び出して、対象のアイテムを取得します。ツールが対応している場合はアイテム ID を使用してアイテムを直接特定します。対応していない場合は、返されたアイテムを絞り込むか検索します。

各対象フィールドの現在の fieldData を抽出します：

• Image フィールドでは、url と fileId を取得します。
• MultiImage フィールドでは、配列内の各要素の url と fileId を取得します。
• null、空、または不正な形式の画像値はスキップします。
• ユーザーが明示的に再圧縮を求めた場合を除き、すでに変換先の形式になっている画像はスキップします。

フェーズ 4：プレビューと確認

ダウンロードまたはアップロードを行う前に、プレビューを表示します：

Compression Preview

Collection: [collection ID]
Item: [item ID]
Target format: webp
Quality: 85

Fields to process:
- main-image: hero.jpg -> hero.webp
- gallery: 3 images -> webp

Skipped:
- thumbnail: already webp

Type `confirm` to download, convert, upload, update the CMS item, and publish.

ユーザーが confirm と入力した後にのみ続行します。

フェーズ 5：各画像を変換する

各画像について：

1. /tmp/ にダウンロードします：

curl -sL "{url}" -o "/tmp/cms_img_{fieldSlug}_{index}.orig"

2. Pillow が利用可能であることを確認します：

python3 -c "from PIL import Image" 2>/dev/null || pip3 install Pillow -q

avif の場合は、こちらも試してください：

pip3 install pillow-avif-plugin -q

3. ユーザーが指定した品質設定で変換します：

python3 - <<'EOF'
from PIL import Image
import os

try:
    import pillow_avif
except ImportError:
    pass

source = "/tmp/cms_img_{fieldSlug}_{index}.orig"
target = "/tmp/cms_img_{fieldSlug}_{index}.{ext}"
img = Image.open(source)
img.save(target, "{FORMAT}", quality={quality})
orig = os.path.getsize(source)
new = os.path.getsize(target)
print(f"Original: {orig:,} bytes -> {FORMAT}: {new:,} bytes ({(1 - new / orig) * 100:.1f}% smaller)")
EOF

avif の変換に失敗した場合は、エラーを報告し、webp に切り替えるか中止するかをユーザーに確認します。

4. 変換後のファイルの MD5 ハッシュを計算します：

md5 -q "/tmp/cms_img_{fieldSlug}_{index}.{ext}"

Linux の場合：

md5sum "/tmp/cms_img_{fieldSlug}_{index}.{ext}" | cut -d' ' -f1

フェーズ 6：Webflow アセットにアップロードする

変換した各ファイルについて：

1. site_id を特定します。コレクションまたはそれまでのやり取りから判明していない場合は、アクション list_sites を指定して data_sites_tool を呼び出します。利用可能なサイトが複数ある場合は、どのサイトにコレクションが属するかユーザーに確認します。
2. アクション create_asset を指定して data_assets_tool を呼び出します：
   • site_id：対象サイトの ID
   • file_name：元のベース名に新しい拡張子を付けたもの。例：hero.webp
   • file_hash：MD5 の 16 進文字列
3. レスポンスから次の値を取得します：
   • uploadUrl：S3 エンドポイント
   • uploadDetails：フォームフィールド
   • id：新しいアセット ID
   • hostedUrl：CMS のソース参照に使用する CDN URL
4. multipart/form-data として S3 に POST します。uploadDetails のキーを curl のフィールドに次のように対応付けます：
   • xAmzAlgorithm -> X-Amz-Algorithm
   • xAmzCredential -> X-Amz-Credential
   • xAmzDate -> X-Amz-Date
   • xAmzSignature -> X-Amz-Signature
   • successActionStatus -> success_action_status
   • contentType -> Content-Type
   • cacheControl -> Cache-Control
   • acl、bucket、key、policy はそのまま渡します
   • ファイルは最後に追加します：-F "file=@/tmp/cms_img_{fieldSlug}_{index}.{ext};type=image/{ext}"
5. HTTP 201 を想定します。レスポンスが 201 でない場合は、レスポンス本文を記録し、アップロードエラーを報告します。署名付き URL の有効期限は 1 時間です。URL の期限が切れた場合は、アセットの作成からやり直します。

フェーズ 7：更新して公開する

正常に変換およびアップロードされたフィールドのみを使用し、アクション update_collection_items を指定して data_cms_tool を呼び出します。

Image フィールドには、次の値を設定します：

{
  "fieldSlug": {
    "fileId": "{newAssetId}",
    "url": "{hostedUrl}"
  }
}

MultiImage フィールドでは、画像配列全体を再構築し、正常に処理された項目のみを新しい { "fileId", "url" } の値に置き換えます。スキップした項目は変更せず、そのまま保持します。

更新が成功したら、対象アイテムの ID を指定し、アクション publish_collection_items で data_cms_tool を呼び出します。CMS が画像を再処理して独自の CDN URL を生成する場合があります。アセットのアップロードで取得した hostedUrl はソース参照です。

フェーズ 8：結果を報告する

簡潔な概要表を出力します：

フィールド	元のサイズ	変換後	削減率
main-image	118,044 B (JPEG)	113,260 B (webp)	4.1%

次の内容も報告します：

• null、空、形式不正、すでに対象形式、または画像フィールドではないためスキップしたフィールド
• 変換の失敗と、ユーザーがフォールバックまたは中止のどちらを選択したか
• アップロードの失敗。レスポンス本文が取得できる場合はそれも含めます
• 後続の CMS 更新または公開に失敗した場合に備え、アップロードに成功した新しいアセット ID

例

ユーザープロンプト：

Compress the main image on this CMS item to webp.

応答フロー：

I need the collection ID, item ID, image fields, target format, and quality before compressing the CMS image.

Compression Preview

Collection: 65f...
Item: 66a...
Target format: webp
Quality: 85

Fields to process:
- main-image: blog-hero.jpg -> blog-hero.webp

Type `confirm` to download, convert, upload, update the CMS item, and publish.

最終レポート：

CMS Image Compression Complete

| Field | Original | Converted | Savings |
|-------|----------|-----------|---------|
| main-image | 842,911 B (JPEG) | 214,330 B (webp) | 74.6% |

Updated and published item 66a...

ガイドライン

• CMS アイテムは一度に 1 つずつ処理します。複数のアイテムを一括処理する場合は、アイテムごとにスキルを再実行するか、明示的なループを含むようワークフローを拡張します。
• Webflow のアセットストアにある元の JPEG または PNG は削除せず、CMS フィールドの参照のみを更新します。
• 元の拡張子を取り除いて対象の拡張子を追加し、ファイル名を保持します。hero.jpg.webp のような二重拡張子は避けます。
• 画像の変換またはアップロードに失敗した場合でも、失敗したフィールドが唯一の対象でない限り、選択した他のフィールドの処理を続けます。
• 画像の変換とアップロードに成功したものがない場合は、CMS アイテムを更新または公開しないでください。
• 元の画像フィールドの値をローカルメモリ上のロールバック用メモとして保持し、更新が成功した場合は最終レポートに含めます。