はじめに
ブログを書くのに一番めんどくさいのって、書くことじゃなくて投稿する作業だと思いませんか。
Markdownで記事を書いて、WordPressの管理画面を開いて、コピペして、カテゴリー選んで、タグ入れて……。
毎回同じ手順を繰り返すのが嫌になって、「だったら作ってしまおう」と思い立ちました。
Claudeと一緒に、ゼロから投稿ツールを作った記録です。
まず作ったもの：wp_post.py
最初はシンプルに「Markdownファイルを渡したらWordPressに投稿してくれるPythonスクリプト」を作りました。
python wp_post.py 記事.md # 即公開
python wp_post.py 記事.md --draft # 下書き保存
Markdownファイルの先頭にこういうフロントマターを書いておくと：
---
title: 記事タイトル
category: ai-bot
tags: Python, Bot, 自動化
slug: my-post-slug
---
本文...
タイトル・カテゴリー・タグを自動で読み取って、WordPress REST APIで投稿してくれます。タグは存在しなければ自動作成。画像もWordPressのメディアライブラリにアップロードしてURLを置換してくれます。
自分で一行もコードを書いていません。 「こういうものを作って」とClaudeに伝えただけです。
Pythonの知識はほぼゼロでしたが、それでも動くものができました。
次に作ったもの：ブラウザで動くエディタ
CLIツールはできたけど、Markdownを書くのもそれなりに手間です。
「せっかくならブラウザで全部完結させたい」と思って、次はWebアプリを作ることにしました。
エディタ版1：Markdown分割エディタ
最初に作ったのは、左にMarkdownを書いて右にプレビューが出るタイプです。
- リアルタイムプレビュー
- 画像をドラッグ＆ドロップで挿入
.mdファイルをドロップして読み込み- WordPressへワンクリック投稿（公開・下書き選択可）
- ブラウザに自動バックアップ
画像はdata:image/...のbase64がそのままMarkdownに入って大変なことになるバグがあって、プレースホルダー方式に直しました。このあたりのデバッグもClaudeとやり取りしながら解決しています。
エディタ版2：WYSIWYGエディタ
「Markdownじゃなくて、見たまま編集したい」という欲が出てきて、Word風のリッチテキストエディタも作りました。
白い用紙エリアに直接テキストを入力して、ツールバーで太字・見出し・リストなどを操作できます。
特にこだわったのが画像まわりの操作性です：
- 画像をクリックで選択（青枠が付く）
Deleteキーで削除Ctrl+Xで切り取り→Ctrl+Vで別の場所に貼り付け.mdファイルをドロップしてフロントマターごと読み込み
投稿時は画像を自動でWordPressのメディアライブラリにアップロードしてURLに置換してくれます。
作る中で詰まったこと
画像クリックで「download.png」が保存される問題
contenteditableな要素の中にある画像をクリックすると、ブラウザが「画像をドラッグして保存」しようとする動作が走ってしまいます。
-webkit-user-drag: noneとdragstartイベントのキャンセルで対処しました。
コピペした画像が「画像」という名前になる問題
切り取り→貼り付けをすると、画像の管理情報（ファイル名・MIMEタイプなど）が失われます。
貼り付け後にDOM内の未登録imgを検出して、MIMEタイプから拡張子を判定してpasted_img_xxx.pngという名前で再登録する処理を追加しました。
白いエリアがスクロールすると切れる問題
flexコンテナの中でalign-items: centerにしていたせいで、コンテナの高さ以上に伸びなかったのが原因でした。
flexレイアウトをやめて、editor-wrapを普通のスクロールエリアにしたら解決しました。
最終的にできたもの
wp_post.py
- Markdownファイルをコマンド一発でWPに投稿
wp_editor.html
- Markdown分割エディタ（左：編集、右：プレビュー）
.mdファイルドロップ読み込み- 画像ドロップ挿入
- WP投稿（公開・下書き）
wp_editor2.html
- WYSIWYGリッチエディタ（白い用紙スタイル）
- 画像クリック選択・切り取り・貼り付け
- フロントマター（タイトル・カテゴリー・タグ・スラッグ）自動読み込み
- WP接続情報の自動保存
- 白紙に戻すボタン
全部ブラウザで完結するHTMLファイルなので、ダウンロードして開くだけで使えます。
感想
Pythonほぼゼロでも、こういうものが作れるんだなというのが正直な感想です。
もちろん自分一人では無理で、Claudeが全部コードを書いてくれています。でも「何を作りたいか」「どう動いてほしいか」を言語化する力は自分のものです。
バグが出たらスクリーンショットを貼って「こうなってます」と伝えるだけで直してくれます。詰まったら「なぜこうなるの？」と聞けば説明してくれます。
この記事自体も、今作ったエディタで書いて投稿しています。
おまけ：スラッグについて
WordPressのURLは日本語タイトルをそのまま使うとエンコードされて長くなります（%E3%83%95%E3%83%A9...みたいな）。
SEO的にもシェアのしやすさ的にも英語スラッグがベターなので、フロントマターにslug:を書いておけば自動で反映されるようにしました。
空欄のままWordPressに投稿すると日本語エンコードURLになりますが、実害はないのでお好みで。