リアルタイムプレビューがほしかった。プラグインであるにはあるらしいけどなんか導入がダルそうだったので...
更にエディタも自分好みにしたかったし、クラシックエディタ使いたいし、そもそもタグで書くのがダルい。あとはタブとか、ダークテーマとか、AI機能も。
これらを全て包括的に解決する方法は今のところ無いらしい。
ということでエディタを自作した。
作ったもの:WordPressリアルタイムプレビューエディタ
お名前はWP Express Editor(ダサいかも)
まあそれはいいんです
主な機能
step
1リアルタイムプレビュー
左ペインで文章を書くと、右ペインに即座にプレビューが反映。保存もプレビュー画面への移動も不要。書きながらデザインの仕上がりが確認可能。
step
2Markdown記法対応
## で見出し、テキスト で太字、- リスト など、Markdown記法でそのまま書ける。 タグがダルい問題はMDで書いて最終的にWordPress記法へ変換することで解決。
(ショートコードがダルい問題は未解決ですが.......)
step
3AFFINGERショートコード対応
[test][/test] などのAFFINGERショートコードもClaudeに解析されることでプレビュー画面で正しくレンダリング。 ショートコードも見た目を確認可能。
step
4Claude AI連携
AnthropicのClaude APIと連携しており、エディタ上から直接AIに記事の下書き生成・リライト・要約などを依頼可能。とりあえずsonnetに対応している。
step
5Electronデスクトップアプリ
デスクトップの作業環境をフルに活用。exe化してるのでどこでも使えます。
画面イメージ
Claude AI機能でできること
Claude APIキー(Anthropicのサイトで取得)を設定すると、以下のことがエディタ上でできるようになります。
Claude APIは従量課金制です。使いすぎに注意。
Cocoon対応版を無料配布します
AFFINGERは有料テーマ、なのでそれを利用したソフトウェアをそのまま配布するのは法的にまずい。でも記事化するにあたってexe配布したいしなぁ…
ってことで配布しても問題なさそうな無料テーマ「Cocoon」に対応したバージョンを作って配布します
Claudeに聞いたところ日本では比較的メジャーな無料テーマらしい。なのでとりあえずで対応。
やれることは上で書いたことと同じ、ショートコードとレンダリング結果がCocoon仕様になっているだけ、のはず。私はCocoonユーザーではないので使ってないしろくにデバッグしてませんが,,,
インストール・使い方
step
1ダウンロード
上のボタンから .exe ファイルをダウンロードします。
step
2起動
ダウンロードした .exe をダブルクリックするだけ。インストール不要です。
Windowsの「SmartScreen」警告が出る場合は「詳細情報」→「実行」で起動できます。
step
3(任意)Claude APIキーを設定
設定画面からAnthropicのAPIキーを入力するとAI機能が使えるようになります。
step
4記事を書く
左ペインにMarkdownやショートコードを書けば、右ペインに即座にプレビューが表示されます!
まとめ