AI自作の図解画像をWordPressへ自動挿入する仕組み

ブログ記事に図解を足したいと思いつつ、画像を作ってアップして貼るという一連の手作業が面倒で、ずっと後回しにしていました。

記事を書かせているAIに、図解まで作らせて、そのままWordPressへ挿入させられないでしょうか。

結論から言うと、AIが書いたSVGをブラウザのcanvasでPNG化するという経路で、生成から挿入までの自動化が実現できました。

前提として、運営中のWordPressはWAFがブラウザ以外の通信を弾く構成のため、投稿まわりの自動化はすべて対象サイトを開いたブラウザの同一オリジンfetchで行っています。

今回はその延長線上に、図解画像の生成・アップロード・本文挿入を追加した記録です。

1 前提（最小限）
2 ブラウザのcanvasを画像変換器にする
- 2.1 なぜSVGか
- 2.2 PNG化の実装
3 データを外へ運ばない設計
4 公開物に入れる前の二重ゲート
5 最後に

前提（最小限）

まず、環境の説明を少しだけしておきます。

このブログはレンタルサーバ上のWordPressで、WAFがブラウザ以外からのアクセスを弾く構成です。

そのため日頃から、下書き投稿や本文更新はREST APIを同一オリジンのfetchで叩く形に統一してきました。

一方で気になっていたのが、本文中に画像が1枚も無い記事の多さ。

構成やフローの説明は、文章だけではどうしても伝わりにくいものです。

そこで、記事の図解づくりから挿入までをAIに任せる仕組みを作ることにしました。

ブラウザのcanvasを画像変換器にする

AIが自作したSVGをブラウザのcanvasでPNG化し、REST APIでアップロードして記事へ挿入するパイプラインと二重検品ゲートの図解

仕組みの中核は、SVGからcanvas経由でPNGへという変換経路です。

なぜSVGか

AIの出力は、突き詰めればテキストしかありません。

しかし、SVGはXMLで書けるベクター画像なので、テキストを書ける道具なら図が描けることになります。

図形の座標や配色をコードとして扱えるため、サイトのアクセント色で統一するといった調整もテキスト編集だけで済むのが利点です。

もう一つ決めたのが、図中の数値や用語は記事本文にある事実だけを使うという捏造防止のルール。

図は本文より目を引くぶん、事実に無い情報が混ざったときのダメージも大きくなります。

PNG化の実装

SVGからPNGへの変換は、ブラウザの中だけで完結できるのがポイントです。

流れとしては、SVG文字列をBlobにしてblob URLを作り、Imageに読み込ませてcanvasへ描画し、toBlobでPNGを取り出します。

中核部を抜き出すと、以下のようなイメージです。

const img = new Image();
img.src = URL.createObjectURL(new Blob([svg], {type: 'image/svg+xml;charset=utf-8'}));
await new Promise(ok => img.onload = ok);
const cv = document.createElement('canvas');
cv.width = 1920; cv.height = 1080;
const cx = cv.getContext('2d');
cx.fillStyle = '#fff'; cx.fillRect(0, 0, 1920, 1080);
cx.drawImage(img, 0, 0, 1920, 1080);
const blob = await new Promise(ok => cv.toBlob(ok, 'image/png'));
await fetch(`${location.origin}/wp-json/wp/v2/media`, { method: 'POST', credentials: 'include',
  headers: {'X-WP-Nonce': nonce, 'Content-Disposition': 'attachment; filename="fig1.png"'},
  body: blob });
// 省略: alt_text の設定と本文への挿入

注意点は、外部参照やforeignObjectを含むSVGがcanvasを汚染してしまうこと。

汚染されたcanvasはtoBlobを拒否するため、図形とテキストだけの自己完結したSVGにしておく必要があります。

もう一つ、SVGのfont-familyが実行環境のフォントで解決される点も見落としがちです。

実際、検証用のサンドボックスと実機のChromeでは描画フォントが異なり字面が変わったため、見た目の確認は本番と同じ環境側で行うようにしました。