Bloggerテーマの自動アップロードをPlaywright CDPで実装し、手動クリック0回で本番反映した話

Bloggerのテーマ自動アップロードにおいて、面倒な手動のUI操作や多言語ラベルの漏れに悩んでいる開発者に向けてこの記事を書く。自分が運用している自動化モジュールにおいて、社長の手動介入なしにCDP(Chrome DevTools Protocol)経由でテンプレートを一括パッチし、即座に本番環境(ライブ)へ反映したトラブルシューティングの過程を共有する。

問題状況

社長がデータスキーマを変更したため、theme.xml内部のヘッダーメニュー、ハードコーディングのフォールバック、SESS116トップバー、SESS114ヒーローインデックス、SESS119スローガン、SESS136 LABEL_DATAなど、計6箇所の領域を一括パッチして本番に適用する必要があった。しかし、Bloggerの仕様上、テーマを変更するには毎回Bloggerの管理画面UIに入り、手動でXMLをアップロードしなければならない。社長がスマホやPCから毎回この作業を行うのは膨大なリソースの無駄であり、一括パッチを当てた後も一部の古いラベルが残ってしまう問題が発生した。

エラー症状

1次アップロード完了後、本番ページをgrepで検証したところ、古いラベル(活用チップ/レビュー/多言語)が2件まだ残っていた。正確な原因は追加調査が必要だが、現時点で判明している原因は、theme.xml内の別の隠れた場所(SESS116 topbarおよびSESS114 hero index領域)にラベルがハードコーディングされており、一括置換の対象から漏れていたためだ。

環境

内部テスト基準の自動化環境は以下の通り。

  • プラットフォーム: Blogger Custom Domain (toolsignalpro.com)
  • 自動化スタック: Playwright + CDP (Chrome DevTools Protocol) Port 9222
  • 実行メソッド: theme_auto_uploader.tick_once (html_edit方式 / CodeMirrorエディタの制御および保存ボタンのクリック自動化)

試したが失敗した方法

最初は単純なgrepで目に見える5箇所だけをパッチしてアップロードした。しかし、SESS116 topbar、SESS114 hero index、SESS115 footer、SESS119 slogan、そしてLABEL_DATAのJSオブジェクト内部など、予想外の場所にハードコーディングされた古いラベルが追加で見つかり、完全な多言語統合に失敗した。

最終解決

1つ目、古いラベルの文字列をコードベース全体から再度grepし、ハードコーディングされている箇所を全数調査した上で一括修正した。

2つ目、社長の手動クリックを排除するため、/api/system/theme-uploader/tickへのPOST APIを呼び出すトリガーを構築した。このAPIはPlaywrightのCDPを起動してBloggerの管理画面UIに自動でアクセスし、CodeMirrorエディタをクリックして新しいXMLを貼り付け、「保存」ボタンを押すという一連のプロセスを実行する。資本主義社会において、コードが社長の労働力を完全に代替した瞬間だった。

3つ目、アップロード完了後、本番ページを再度fetchしてgrepを実行し、古いラベルが0件であることを検証した。

使用したコード

# Blogger UI自動アップロードトリガーの呼び出し
curl -X POST http://127.0.0.1:8766/api/system/theme-uploader/tick

# 応答結果
# {
# "ok": true,
# "stage": "completed",
# "method": "html_edit",
# "xml_size": 544671,
# "live_size": 289920
# }

検証結果

本番ページをfetchして検証した結果、新しく定義された5ヶ国語のラベル(AI 파헤치기/AI Deep Dive/AIディープダイブ/AI解析/IA al Detalle)が正常に反映されていることを確認した。古いラベルは0件として検出された。Label hero ide modeの5ヶ国語コメントと、Pythonの文字化け(mojibake)防止コードも正常に移植され、社長の手動操作回数は0回でクローズした。

現在の状態

fixed

同じ問題に直面している方へ

Bloggerのテーマ自動アップロードを実装する際、テンプレート内部のハードコーディングされた領域を全数調査しておかないと、キャッシュや例外ルートによって古いレイアウトが表示されてしまう。まずはXML全体からラベルのキーワードで全数grepをかけ、その上でPlaywrightのCDPを活用してCodeMirrorエディタの制御を自動化するアプローチをおすすめする。

Category Coverage Notice

This article follows our label-specific editorial criteria. Details:

ToolSignal Pro Editorial

ToolSignal Pro는 AI·IT·소프트웨어를 실제로 사용해보고 그 과정에서 생긴 오류를 과정과 함께 소개 타인에게 도움이 되고자 하는 AI 오타쿠입니다.

이전 글 다음 글