やまけんの出張食い倒れ日記

食い倒れ日記専用のブログエディタを、AIの力を借りて作ってみたら、あっさりできてしまった!


 ようやくブログを書くことを再開できつつあるが、理由は年度末で授業がないことが一つ。そしてもう一つは、、、ブログエディタ問題が解決できそうなこと。

 ながらくこのブログはLiveWriterというブログエディタで書いてきた。このエディタは15年以上前にマイクロソフトがフリーソフトとして作ったものだがその後、公式サポート打ち切りとなり、オープンソース化されてOpenLiveWriterとして現在も公開されている。ただ、いろいろと問題があって、、、このエディタ問題は深刻だった。



それで先日、会社のGoogle Workspace環境で使っているAIであるGeminiに尋ねてみたのだ。

「ブログエディタを作れる?画像が30枚くらいWIZIWIGで投稿できるやつ」

と、たいして期待もせずに。

そしたら「作れますよ!」と事もなげに返ってきて、その夜の一時間半くらいでブログエディタのデスクトップアプリができてしまった!

いやマジでびっくり。



僕は、大学時代にSFCでC言語プログラミングは学んだけど、まあそっち方面の才能が無く、ほぼできない(笑)。ただし職場でシステムの要件定義とかはやらなければならなかったので、概念はなんとなくわかる。なので「これこれこういうインプットをこう処理して、こんな形式で出力して欲しい」というのをAIに説明していく。そしたら、できてしまった。



MovableTypeのこのバージョンで、APIはこれこれこうで、画像はアップロード時にこの規則でリネームして投稿して、右隅にコピーライトの透かしも入れて、等々の要望を「できますよ!」とGeminiがコードを書きだしてくれる。なお、実行環境はElectronである。もちろん僕はその存在すら知らないので、Geminiが提案してくれたのに従ったまでである。システムはおおむね下記のように動く。



  1. エディタ入力: Quill.jsなどのエディタにテキストを入力し、画像をドラッグ&ドロップします(画像は一時的にBase64という文字列データとしてエディタ内に保持されます)。
  2. 下書き保存: エディタ内のデータとHTMLを、PCのローカルフォルダにファイルとして保存します。
  3. 投稿時の自動処理:
  • 「投稿ボタン」を押した際、プログラムがエディタ内の画像(Base64データ)を抽出します。
  • 現在の「タイムスタンプ+連番(例: 1710545583000_01.jpg)」のファイル名を生成します。
  • MovableTypeのData API経由で画像をアップロードし、サーバー上のURLを取得します。アップロード時に画像にコピーライトの透かしを入れます。
  • エディタ内の画像データを、取得したURLに書き換えます。
  • 完成したHTMLを、記事としてMovableType APIに送信します。
  • その後、記事URLをInstagram、X、Facebookに投稿するためのテキストを生成します。



できあがった実行ファイルは350MB程度の大物になったが、最後の行にあるように投稿完了時にSNSへのリンク投稿をサポートしてくれる機能もあって、至極便利である。

もちろん、一発でできるわけではなく、最初のうちはテスト投稿すらできなかった。ただしエラー画面を説明しスクショをアップロードしていくうちに「原因がわかりました!」「このような仕組みになっているのですね、よくわかりました!」となって、改訂版を出してくるうちに、成功するようになった。

すげえ時代になったなあ、こうして欲しいという明確な目標があれば、AIがプログラムまで組んでくれる時代になってしまった。ただし、会社で契約しているGoogle Workspaceでのトークン上限に達してしまったようで、何度かデバッグしていると「今日はもうここまでです。」といわれてしまった。後はこんな環境をローカルLLMで動かせるようになったら最高ですな。

この自分専用ブログエディタで、可能な限り書いていこうと思います。