Zenn
🎉

ChatGPTの下僕になった話 ～VSCodeでHTML編集 → WordPressに自動反映 → ブラウザ即更新する仕組みを作った～

に公開
Node.js
WordPress
REST API
Browsersync
ChatGPT
tech

背景：作業量に対して明らかに足りない納期

  • 対応：リニューアルページ 4ページ
  • 期間：8日
  • 既存パーツの流用率：2割

初日で「これ間に合わなくね？」と悟る。

手作業の流れ（当初）

  1. WordPressの管理画面を開いて、固定ページを編集
  2. ソースを読む（色も整形もないので激見づらい）
  3. 編集画面上でHTMLを直接編集する
  4. 意図しないタグが増える or 消える
  5. めんどくさくなって VSCode に貼って編集する
  6. 編集結果を再度WPにコピペ → 更新 → プレビュー確認
  7. 修正したらまたコピペして更新…
  8. 以下ループ

ChatGPTに相談：「こういうツールないの？」

  • 無いって言われた
  • まぁ、そりゃそうだよなと思った
  • 「じゃあ作ればよくね？」
  • 要件をまとめて再度ChatGPTに相談 → 「作れます」即答
  • 2秒でやる気スイッチオン
  • 半日で最初の試作品が完成（荒削り）

思わぬ感動：VSCode保存でWP編集画面に即反映された

  • 最初は「保存 → API反映」だけの構成
  • でも実際には WPの固定ページ編集画面のHTMLソースまでリアルタイムで書き変わる
  • おぉ…これはアツい。

なぜNode.jsを選んだのか

  • 最初はPythonを提案された → 無理（読めん）
  • 代替案を求めた → Node.jsを提示された
  • JavaScriptなら分かる → Node.js一択に
  • 構成もChatGPTに丸投げで構築開始

連携地獄：REST APIが見つからない問題

  • Node.js周りは一通り揃えた
  • 「REST APIで連携しよう」と言われる
  • でも該当の「API登録画面」が見つからない
  • http:// じゃないとダメとか言われて詰んだ気がする
  • ローカルDocker環境だったため「これは無理では…？」となる
  • でも、ChatGPTに聞いたら「できます」
  • 手順どおりに対応 → 無事、API登録画面が表示される

認証情報セット → POST_IDの意味も理解できた

  • APIキーをJSに直接書く
  • 最初は全然うまくいかない
  • POST_ID の意味も場所もわからなかった
  • ようやく理解：「固定ページの編集URLのpost=◯◯の数字がPOST_ID」
  • 連携成功 → 保存で反映されるように

そして再び布団の中で気づく：「プレビューの自動更新も欲しくね？」

  • WP編集画面に反映されるだけで満足していたが、
  • 「手動保存してF5押すのダルくね？」と寝る直前に気づく
  • ベッドの中でChatGPTに再度質問：「自動でブラウザ更新できる？」
  • 「できます」と返ってくる
  • 翌朝、言われた通りにやってみる
  • 何度か失敗するが、ついに構成が完成

一発起動したくなる → .bat ファイルにして爆速へ

  • あとはコマンド2つ打つのが面倒になる
  • ChatGPTに聞く：「一発起動できる？」
  • 「.bat にまとめればOKです」
  • 言われるがままに .bat を書く
  • ダブルクリックで実行した瞬間、俺の夢見た世界が広がる

けど、ウィンドウが複数開いて鬱陶しい

  • watcher.js 用と browser-sync 用でCMDが2枚開く
  • 「まとめて1枚にしたい」→ 今後は全統合JSにする予定
  • 余力があればGUI化までやるつもり（たぶん）

さらに、保存時には現在のHTML内容をMySQLに保存するようにしており、
履歴としてDBに蓄積される仕組みにしている。
（将来的には履歴からの復元や差分比較もできるようにする予定）

GitHub リポジトリ

📂 ソースコード・ツール一式はこちらで公開しています：
🔗 https://github.com/msfactory1103/wp-history-logger

最後に

まだまだ荒削りではありますが、自分が求めていた環境は確実に形になりました。
今は個人開発用途にとどまっていますが、似た課題を感じている人の参考になれば嬉しいです。

今後の展開に…

Don't miss it.

Discussion