コラム

WordPressのリアルタイムプレビュー対応エディタをClaudeCodeで自作して快適に

2026年4月18日

WordPressのエディタ、リアルタイムプレビューくらいつけてくれ
なければ自作すればいいじゃない

リアルタイムプレビューがほしかった。プラグインであるにはあるらしいけどなんか導入がダルそうだったので...
更にエディタも自分好みにしたかったし、クラシックエディタ使いたいし、そもそもタグで書くのがダルい。あとはタブとか、ダークテーマとか、AI機能も。
これらを全て包括的に解決する方法は今のところ無いらしい。
ということでエディタを自作した。


作ったもの:WordPressリアルタイムプレビューエディタ

お名前はWP Express Editor(ダサいかも)
まあそれはいいんです

主な機能

step
1
リアルタイムプレビュー

左ペインで文章を書くと、右ペインに即座にプレビューが反映。保存もプレビュー画面への移動も不要。書きながらデザインの仕上がりが確認可能。

step
2
Markdown記法対応

## で見出し、テキスト で太字、- リスト など、Markdown記法でそのまま書ける。 タグがダルい問題はMDで書いて最終的にWordPress記法へ変換することで解決。
(ショートコードがダルい問題は未解決ですが.......)

step
3
AFFINGERショートコード対応

[test][/test] などのAFFINGERショートコードもClaudeに解析されることでプレビュー画面で正しくレンダリング。 ショートコードも見た目を確認可能。

ここではAFFINGERを使っているため、AFFINGERのショートコードがレンダリングされ表示されることを求めていた

step
4
Claude AI連携

AnthropicのClaude APIと連携しており、エディタ上から直接AIに記事の下書き生成・リライト・要約などを依頼可能。とりあえずsonnetに対応している。

step
5
Electronデスクトップアプリ

デスクトップの作業環境をフルに活用。exe化してるのでどこでも使えます。


画面イメージ


Claude AI機能でできること

ずばりAIの機能とは?
APIキーを入力すると、あとはボタン押すだけでわーってやってくれる

Claude APIキー(Anthropicのサイトで取得)を設定すると、以下のことがエディタ上でできるようになります。

この記事の原案も実はClaudeに生成されている。だいぶ内容は変えてるけどね。

Claude APIは従量課金制です。使いすぎに注意。


Cocoon対応版を無料配布します

AFFINGERは有料テーマ、なのでそれを利用したソフトウェアをそのまま配布するのは法的にまずい。でも記事化するにあたってexe配布したいしなぁ…

ってことで配布しても問題なさそうな無料テーマ「Cocoon」に対応したバージョンを作って配布します

https://wp-cocoon.com/

Claudeに聞いたところ日本では比較的メジャーな無料テーマらしい。なのでとりあえずで対応。
やれることは上で書いたことと同じ、ショートコードとレンダリング結果がCocoon仕様になっているだけ、のはず。私はCocoonユーザーではないので使ってないしろくにデバッグしてませんが,,,

CocoonのテーマをダウンロードしてClaudeが解析して開発したのでライセンス的にはGPLになるはず。多分大丈夫なはずだけど、やばかったら謝罪します。先制謝罪。

無料

Cocoon対応版を無料ダウンロード

クリックしてダウンロード


インストール・使い方

step
1
ダウンロード

上のボタンから .exe ファイルをダウンロードします。

step
2
起動

ダウンロードした .exe をダブルクリックするだけ。インストール不要です。

Windowsの「SmartScreen」警告が出る場合は「詳細情報」→「実行」で起動できます。

step
3
(任意)Claude APIキーを設定

設定画面からAnthropicのAPIキーを入力するとAI機能が使えるようになります。

step
4
記事を書く

左ペインにMarkdownやショートコードを書けば、右ペインに即座にプレビューが表示されます!


まとめ

リアルタイムプレビューとかあるらしいけど、導入ダルそうだしそもそもMDで書きたいのでエディタを自作。
そのうちショートコードもMDっぽい自作記法にしたらいいかもね
たしかにー

無料

Cocoon対応版を無料ダウンロード

クリックしてダウンロード

Apple 2026 MacBook Neo A18 Proチップ搭載13インチノートブック

Apple 2026 MacBook Neo A18 Proチップ搭載13インチノートブック

Amazonで購入

-コラム
-, ,