🖊️

CMSの検索置換では難しい変換をDataAPIとClaudeに任せてみる

2025/12/09に公開

CMSに登録されている記事本文のHTMLを一括変換したいということがあり、その時はページ数もそこまでではなかったので手動でぽちぽちAIと会話しながら変換作業をした。
やった手順としては置換して欲しいパターンをあらかじめAIに伝えておく。

VSCode を開いておいて、元のテキスト用のタブと変更後のテキスト用のタブを開いておき、2つを比較した状態のタブの3つのタブを用意しておいた。
そこからCMSの管理画面を開いて本文の内容をコピペしてAIに渡してVSCodeにも貼り付ける。

AIから変換してもらった内容をVSCode にコピペして diff を見ておかしなことやっていないかをざっと確認。

問題なさそうなら元のCMSの編集画面に貼り付けて終了、という感じの流れでやった。
管理画面の検索置換でやれる範囲であれば良いのだけど、「pタグの中身がテキストだけならクラスを追加、imgが入っていたらdivでラップする」みたいな条件分岐が入る変換が今回の対応内容だった。

検索を複数回に分けたり、正規表現でやることもできなくはなさそうだけど、パターンが複雑になってくるとミスも起きやすいし、そもそも書くのが大変（面倒）。
こういうときに「AIにHTMLの構造を理解させて、ルールに沿って変換してもらう」というのが楽そうかも？と思ってAIを使って試してみた。
1日目の加藤さんの記事みたいなMCPの内容になりましたが、この記事は Movable Type Advent Calendar 2025 9日目の記事です。
AI に相談しながら記事の下書き執筆が可能な Movable Type 用の MCP サーバを作ってみた - WWW WATCH

https://hyper-text.org/archives/2025/12/mcp-movabletype-writer/
MT成分は少なめです。。。

 やりたかったこと想定している変換のパターン。

 pタグにテキストのみ → classを追加<p>
    「サービス」タブより「service」をクリック
</p>

↓↓↓

<p class="m-text">
    「サービス」タブより「service」をクリック
</p>

 pタグにimgが入っている → divでラップして div と img にclassを追加<p>
    <img src="/images/sample/photo.png" alt="" width="800" height="600">
</p>

↓↓↓

<div class="m-media m-media--border">
    <img class="m-media__item" src="/images/sample/photo.png" alt="" width="800" height="600">
</div>
img にすでに class がついている場合は、既存のクラスを残しつつ m-media__item を追加する。

 変換不要のパターンすでに m-text や m-media がついている場合は変換しない。
こういうのを正規表現でやろうとすると、
pタグの中身がテキストだけかどうかの判定
imgがあるかどうかの判定
既存のclassがあるかどうかで処理を分岐
変換済みかどうかの判定
みたいなことを全部正規表現で書く必要があってかなり大変そうだし、、そもそもめんどい。

まぁ今ならその正規表現をAIに書いてもらえばいいだろうから大変というのも違うのかもしれないが。。。。

 AIに任せる方法を検討今回は MT の DataAPI を使って記事を取得して、Claude に変換してもらうことにした。どうやるかなぁと考えて2案。

 案1: シンプルにスクリプト + AIDataAPI で記事を取得するスクリプトを書く
取得したHTMLをAI（Claude API や ChatGPT API）に渡して変換
変換結果を DataAPI で更新
記事数が少なければこれで十分そうな気はする。ただ、バックアップの管理とか差分確認とかは自分でやる必要がある。

 案2: MCPサーバーを作る（今回やったこと）MT の DataAPI を操作する MCP サーバーを作って、Claude Desktop から対話的に操作できるようにする。

今回はこれを VSCode で Claude Opus 4.5 と会話しながら作ってもらった。

 作ったものMT Content Refactor MCP という MCP サーバーを作った（作ってもらった）。

 機能接続管理 : MT環境の接続情報を登録・管理
コンテンツ取得 : 記事・ページ・コンテンツデータの取得
バックアップ : 変換前のHTMLをローカルに保存
変換 : AI が変換ルールに沿ってHTMLを変換
差分確認 : 変換後の差分をHTMLで確認
適用 : 変換結果を MT に反映
復元 : 問題があればバックアップから復元

 実装されたツール接続管理

mt_add_connection - 接続追加

mt_list_connections - 接続一覧

mt_use_connection - 接続切り替え

mt_remove_connection - 接続削除

mt_test_connection - 接続テスト
コンテンツ取得

mt_list_sites - サイト一覧

mt_list_entries - 記事一覧

mt_get_entry - 記事詳細

mt_list_pages - ページ一覧

mt_get_page - ページ詳細

mt_list_content_types - コンテンツタイプ一覧

mt_list_content_data - コンテンツデータ一覧

mt_get_content_data - コンテンツデータ詳細
バックアップ・差分

mt_create_backup - バックアップ作成

mt_get_backup_items - バックアップアイテム取得

mt_list_sessions - セッション一覧

mt_load_session - セッション読み込み

mt_delete_session - セッション削除
変換・適用

mt_set_transform - 変換結果設定

mt_set_bulk_transform - 一括変換結果設定

mt_generate_diff_report - 差分レポート生成

mt_apply_changes - 変更適用

mt_restore - 復元

 使い方
 1. 接続を追加MTでDataAPI用のユーザーを作成して、Claude Desktop で以下のように指示する。
MT環境に接続を追加してください。
- 名前: local
- URL: http://localhost/cgi-bin/mt/mt-data-api.cgi
- ユーザー名: admin
- パスワード: xxxxxx
パスワードはWebパスワードを利用する。

 2. バックアップを作成して変換サイトID 1 の記事をバックアップして、以下の変換ルールを適用してください。

変換ルール：
1. pタグにテキストのみ → m-textクラスを追加
2. pタグにimgがある → div.m-media.m-media--border でラップし、imgに m-media__item クラスを追加
3. すでにm-textやm-mediaがある場合は変換不要
Claude がバックアップを取得して、ルールに沿って変換してくれる。

実際のHTMLを書いて渡しても認識してくれる。

 3. 差分を確認差分レポートを生成してください
HTMLの差分レポートが生成される。Before/After が並んで表示されて、変更箇所がハイライトされる。
行全体だと分かりづらいからこの辺は Claude に調整してもらいたいところ。

 4. 適用変更を適用してください
DataAPI 経由で MT に反映される。
問題があれば 復元してください で元に戻せる。

 試してみてMCPサーバーを作ってもらったのは初めてだったのだけど以下がメリットかなー。
毎回URLやパスワードを書かなくていい
ローカルにバックアップが自動保存される
「前回のセッションを読み込んで」ができる
バックアップ → 差分確認 → 適用 の流れを強制できる
問題があればすぐ戻せる
記事数が多い場合や、繰り返し作業する場合は MCP サーバーにしておくと便利っぽい。

 検討・開発フロー今回は VSCode の Copilot Agent で Claude のモデルを利用して対話しながら開発した（してもらった）。

その過程で遭遇した問題とか解決策のメモ。

 設計の検討スクリプトの方がシンプルそうだけど、バックアップ管理や差分確認は自前で実装が必要。

MCP サーバーにすれば Claude Desktop から対話的に操作できて、バックアップ・復元の仕組みも組み込める。日々 Claude にはお世話になっているし・・・
今回は学習目的も兼ねて MCP サーバーを選択した。（が、AIが作ったら学習と言えるのかは・・・・）

 アーキテクチャClaude Desktop
    ↓ MCP Protocol
MCP Server (Node.js/TypeScript)
    ↓ HTTP
MT Data API
    ↓
Movable Type
ローカルにバックアップを保存して、変換 → 差分確認 → 適用する構成。

 遭遇した問題
 Claude が変換スクリプトを作ろうとする
変換ルールを渡したら、Claude がスクリプトを生成し始めた。私の渡したプロンプトが曖昧だったのが原因。
「変換スクリプトは不要です。あなた自身が変換して mt_set_bulk_transform で設定してください」と指示したら想定している動作になった。

 Claude が記事を1つずつ取得する変換を依頼したらバックアップはあるのに mt_get_entry を個別に呼び出していたので止めた。
Claude に調べてもらったら mt_get_backup_items がプレビュー（100文字）しか返していなかったのが原因だった。全文を返すように修正してもらい、1回のAPI呼び出しで全記事のHTMLを取得できるようになった。

 まとめ検索置換では若干面倒な変換を AI に任せるというのはかなり便利だった。CMS内でAI動いてやってくれればいいのになぁと思った。
頻繁に使うものではなさそうだけれど、MCP サーバーにしておくとバックアップや復元の仕組みも含めて管理できそうな印象。
件数が多い時はまた別の問題があるはずなのでそれはそれでまた要検討。

 【告知】2026年2月27日博多で「CMS大集合！」開催2026年2月27日に博多で「CMS大集合！」が開催されます。
CMS大集合！

https://cms.masizime.com/
このイベントでこの記事の内容とかを話せればと思っています。

デモをするとしてもキャプチャにある通りになるかも。
「CMSとAI」だと似た内容多いかもですが、色々なCMSのお話を聞きながら妄想を膨らませたいところです。

やりたかったこと

pタグにテキストのみ → classを追加

pタグにimgが入っている → divでラップして div と img にclassを追加

変換不要のパターン

AIに任せる方法を検討

案1: シンプルにスクリプト + AI

案2: MCPサーバーを作る（今回やったこと）

作ったもの

機能

実装されたツール

使い方

1. 接続を追加

2. バックアップを作成して変換

3. 差分を確認

4. 適用

試してみて

検討・開発フロー

設計の検討

アーキテクチャ

遭遇した問題

Claude が変換スクリプトを作ろうとする

Claude が記事を1つずつ取得する

まとめ

【告知】2026年2月27日博多で「CMS大集合！」開催

Discussion