はじめに

Onbit サイトの自前 CMS を作りながら、書く側の体験を少しずつ整えています。今回は「AI が下書きを手伝ってくれる機能」と「編集中の内容を勝手に保存してくれる機能」を、同じ日に実装してデプロイした話です。

記事を書くハードルを下げるのと、書きかけが消える事故を防ぐのが目的です。

基礎となる知識

• CMS(コンテンツ管理システム): ブログ記事をブラウザから書いて保存できる管理画面
• AI ドラフト: メモやテーマを渡すと、本文の下書きを生成してくれる機能。今回は Gemini と Anthropic のどちらでも切り替えられる作りにした
• 自動保存: 入力中の内容を、明示的に「保存」を押さなくてもブラウザ側に書き込んでおく仕組み

解説と使い方

CMS の編集画面に、「AI で下書きを作る」ボタンを置きました。タイトルや簡単なメモを入れてボタンを押すと、本文ドラフトが生成されて入力欄に入ります。生成プロバイダは環境変数で切り替えられる作りで、当面は Gemini 2.5 Flash 経由で動かしています。

自動保存は、入力欄に変更があるたびに(800ms の debounce 付きで)localStorage(ブラウザの記憶領域)に書き込みます。新規投稿と編集で別キーを使い、複数記事を同時に編集しても干渉しません。

やってみた結果

• AI ドラフトは「テーマだけ決まっている」状態から本文の輪郭が一気に見えるので、書き始めの心理的なハードルがぐっと下がる
• 自動保存はタブを誤って閉じても次回開いた時に「未保存の編集が残っています。復元しますか?」と聞いてくれるので、安心して書ける
• 両方ともデプロイ済み。あとは Cloudflare Pages の環境変数に AI の API キー(GEMINI_API_KEY / ANTHROPIC_API_KEY)を入れれば本番でも動く

まとめ

CMS は「書く側のストレスを減らす」方向にどんどん寄っていきます。AI ドラフトと自動保存は、書く前と書いている最中それぞれの不安を減らす機能でした。

参考文献

• 関連記事: cms-ai-draft(AI ドラフト機能の詳細)
• 関連記事: cms-autosave(自動保存の実装詳細)