ブログ記事の一括編集＆分析ができるダッシュボードを作った

どうも職業エンジニアです。折角の休暇なのに、仕事してるのかってくらい毎日パソコン作業しています。夏休みの宿題かな？

さて今回は、タイトル通り「ブログ用のダッシュボードを作ったぜ！」というお話になります。この記事を読んだ方の創作意欲がちょっとでも湧けばいいのかなっていう目的で、どんなものを作ったのかを紹介していこうと思います。

開発経緯

スタートは「メタディスクリプションを過去記事に一切設定していなかった」のに気が付いたことでした。んで、設定したいけど1件ずつちまちまやってくのは流石にハードすぎるので、ツール化しちゃおうと。そこで考えたのが以下のざっくり仕様です。

• メタディスクリプションを一括で設定したい。できれば本文からAIに自動生成させたい。

んで、これを作成している時に

• メタディスクリプション以外のメタデータも編集できるようにしたい
• タグの統合、作成、削除も一括でできるようにしたい

という欲が出てきて、まとめてダッシュボート化しちゃうことにしました。

作成において利用したツールなど

まず、作成に利用したツールやAPIを紹介します。

• Gemini（初期仕様の作成補助、構成イメージの作成）
• Google Antigravity（AIエディタ。役割はClaude CodeやCodexと一緒）
• Gemini API（メタディスクリプションの生成）
• Ghost API（記事取得＆編集）

なお、筆者はGoogle AI Proの課金ユーザーなのでAntigravityとGemini APIを利用しています。これを契約すると1,500円くらい/月のAI用クレジットが付与されるので、Gemini APIを使った遊びがやりやすくなります。もちろんAntigravityもこれによって使いやすくなります。無料枠だと今回みたいなツールは結構しんどいかなあ。

世間的には相対評価低めなGoogleのAI群ですが、筆者がやりたいこと的には充分かなって思います。

技術スタック

次に技術スタックを検討します。なお、今回はローカルホストでしか動かさない想定となります。自分で書つもりないし、公開もしないなら別になんだっていい気はしますが、構成としては以下の感じになります。

Pythonを使ってるのは、もともとPythonのGUIで作成してた別ツールのコードを参考にしてもらう予定だったので、そこの名残ですね。フロントはそこまで大きいもの作る訳でもないので、素のtsでいいかなって感じ。全体的に軽めな構成かなあって印象ですね。

フロントエンド

• HTML5 & CSS3
• TypeScript（Vanilla）

バックエンド

• Python
• Flask

作成した機能について

全体の構成図

まずは全体のイメージをテキストし、どんな機能が欲しいかをまとめました。それを元に全体図の画像を作成して、テキスト＆画像をAIに食わせて全部やってもらうスタイルでいきます。ワイは指示しか出さねえ！ちなみに仕事ではゴリゴリ手書きコーディングしてるので許してクレメンス。指示も出すし手も動かす、社畜の鑑や！

話を戻して、全体図はこんな感じでよいでしょう。
なお、API処理の流れはこんなイメージです。

• 初期表示時にGhost APIを元に記事データを拾ってきて画面表示
• 編集があったらGhost APIで更新
• メタディスクリプションの生成時はGmeini APIでメタ生成→Ghost APIで更新

一般的なWEBサイトと同じような作り、というところですね！

記事編集機能

主に各記事のメタ情報が編集できる機能です。

• 記事スラッグ（URL）変更
• タグ変更
• メタディスクリプション変更（AI生成機能つき）

の機能を有しており、編集した記事情報は一括更新が可能です。

各項目の変更があった場合、それらを記事ごとに一括更新できます。変更がある場合は画面下に変更件数と、更新 or キャンセルボタンが表示されるようになります。また、変更があったレコードは上部のプルダウンからフィルタすることもできます。

以上が記事編集機能の概要です。

タグ管理機能

タグに特化した機能です。

• タグ追加
• タグ削除
• タグ統合

が行えます。左側にあるチェックボックスを複数選択することで、一括削除と統合が可能となっています。なお追加は上部メニューより実施できます。

タグの統合を押すと、こんな感じでタグを統合することができます。ここでタグを統合した場合、各記事のタグも併せて差し替えることができるので、だいぶ手間が減ります。

Ghostはタグがバラバラになりがちなので定期的に手動でタグ統合していたのですが、この機能によりだいぶ楽にタグ統合できるようになりました。作ってよかった。

投稿分析機能

これについてはおまけみたいな機能ですが

• 投稿数推移（年別、月別）
• 当年度の投稿ペース（月別、年予想）
• 当年度のタグ使用状況

が閲覧可能になっています。このブログでは定期的に振り返りを行っているので、その時に利用するデータをここにまとめておこう！みたいな思想で生まれた機能ですね。

投稿数推移はグラフ or 表で表示できるようになっていて、それぞれグラフイメージのコピー、表データのコピーが行えます。

当年度の投稿ペース、当年度のタグ使用状況は以下のようなイメージ。今後拡張するのであれば、選択した年度の比較データを閲覧可能にしたいかなあ。

作って分かったこと

一通り全部紹介し終わったので、ここからは感想のコーナーです。

ツールを作るときはAIで充分

まじでこれです。最近では仕事でもCopilot使えるので、VBAだったりPowerShellだったりは書いてもらうことが多いですね。同じことを何度も繰り返したりする作業は人間がやると効率が悪いしミスるので、ツール化に向いてる領域はAIでツール作ってしまった方が間違いなく良いです。

また、今回みたいに自分しか使わない、コーディング規約で縛らなくてもいい環境であれば、多少複雑なものでもAIで対応できます。ちょいちょいリファクタリングをお願いすることにはなると思いますが、モジュール構成を先にインプットしてあげればそこまでぐちゃぐちゃになることもありません。AIは1年前と比べて進化しすぎですね。人間が追い付けないぜ！

プライベートであっても作業効率は大事

昔野球部だったとき部室の時計を破壊して顧問に謝りに行ったことがありますが、この時顧問は「時間に縛られる人生なんか嫌だから、時計なんてなくていいんだ」とか言って許してくれました。しかし、時間は有限なのである程度効率化するのは重要な事です。1日で出来ることが多い方が、その分睡眠に割いたり、趣味に使ったりする時間も増えます。

1つの作業にかかる時間が短くなるように工夫しろ、そうしたら最終的に時間を気にすることもなくなるぞ。

そういうことだよなセンセイ。

意外と作成に時間はかからない

実は公開前提じゃないWEB機能を作成したのは初めてなんですが、公開不要ってなると細かいUIのズレとか、挙動の違和感とかにそこまで気を配らなくていいので、完成にかかる時間が短く済みます。多少変でもクセを理解すれば使えたりもしますしね。

今回作ったツールは動作確認込みでトータル2時間ほどで完成しました。このくらいであれば平日の夜にちょっと思い立ったら作成、みたいなこともできますよね。

やりたい事をメモしておくだけでも後でサクッとできるので、メモを取る習慣を付けようと思いました。

最後に

夏休みの大部分がブログ運用の効率化に使われている気がする。。