開発・研究メモ
記事制作を効率良くするローカルツール Article Writerを開発しました
Article Writer は、私が個人利用するために作ったローカル記事制作ツールです。 多人数で使うCMSではなく、自分の記事作成、確認、修正依頼、素材整理を速くするための作業台として作っています。
最初から大きな設計があったというより、記事を書いている途中で面倒に感じた作業を少しずつ画面に寄せていったものです。 本文のプレビュー、指摘事項のメモ、画像生成依頼、ローカルコンソール、AIコーディング支援との対話を、できるだけ同じ画面の中で扱えるようにしました。
作りたかったもの
記事を書く時は、本文だけを書いて終わりではありません。 文章をプレビューで確認し、気になる箇所をメモし、修正依頼を作り、画像の依頼文をまとめ、必要に応じてローカルでコマンドも実行します。
これらを別々のエディタ、ブラウザ、ターミナル、メモファイルで行き来していると、作業の切り替えが多くなります。 Article Writerでは、その散らばりやすい作業を一つのローカルWeb画面に集めることを目指しました。
使っているOSSやツール
土台はかなり素朴です。 PythonのローカルHTTPサーバーで画面とAPIを動かし、ブラウザ側のJavaScriptで記事本文をブロックとして扱います。 外側はWebアプリですが、目的はあくまで手元のファイルを扱いやすくすることです。
- Python標準ライブラリでローカルサーバーを動かす。
- ブラウザのJavaScriptで本文、プレビュー、メモ、画像依頼を扱う。
- ttyd を使って、Web画面の中にローカルコンソールを表示する。
- CodexなどのAIコーディング支援ツールと、コンソール上で対話する。
ttydでコンソールが画面に入った
大きかったのは、ttydを使ってWeb画面にコンソールを表示できる ようになったことです。 これによって、記事のプレビューを見ながら、同じ画面の中でCodexと対話し、修正方針や作業依頼をすぐに渡せるようになりました。
私の使い方では、コンソールは公開用の機能ではありません。 ローカルホスト、または閉じたLAN内で、自分だけが使う前提の補助画面です。 実際のシェルを扱うので、Article Writer全体も公開サーバーに置くようなものではなく、個人の手元で動かすツールとして考えました。
AIに渡すための導線を作る
AIに作業を頼む時に地味に面倒なのは、依頼に必要な材料をまとめることです。 どの記事を直すのか、どこが気になるのか、どんな画像が必要なのか、どの文脈を見てほしいのかを、その都度手作業で集めると時間がかかります。
Article Writerでは、プレビューを見ながら指摘事項を書き出したり、画像生成向けの依頼文を作ったり、記事本文の一部をもとにAIへ渡すためのメモを作れるようにしています。 こうしておくと、Codexとの会話に入るまでの準備が短くなります。
記事作成が速くなったところ
便利になったのは、記事本文そのものの入力速度というより、確認と修正の往復です。 プレビューを見て、気になった点を残し、AIに渡す依頼を作り、コンソールから対話して、また記事に戻る流れが短くなりました。
- 記事の表示確認と修正メモを同じ画面で扱える。
- 画像生成や修正依頼の文章を、記事の文脈から作りやすい。
- Codexとの対話を、記事プレビューの近くで進められる。
- 細かい確認作業をファイルとして残しやすい。
個人用だから作れる形
Article Writerは、誰でも使える汎用ツールを目指しているわけではありません。 私のサイト制作、私の記事の書き方、私がAIに作業を渡す流れに合わせて作っています。 だからこそ、一般的なCMSなら入れにくい細かな導線も、必要になった順に足していけます。
きれいな完成品というより、記事を書くための道具箱に近いものです。 使いながら面倒な部分を見つけ、そこだけを少しずつWeb画面に移していく。 その積み重ねで、記事作成の速度が上がってきたと感じています。