はてなブログを日常的に利用していると、記事の執筆体験や、管理方法が課題になってきます。 例えば、はてなブログの標準エディタでは次のような煩雑さが伴います。
- 記事の差分確認ができない。
- 過去の記事をまとめて編集・管理する際に一覧性が低く、手間がかかる。
- vscodeやcursorなどのテキストエディタの補助機能が使えない
- 数式が書きにくい。
また、他プラットホームへの移行や、生成AIとの結合など、発展的なユースケースもみすえると、 ドキュメントすべてをgithub + markdownで管理しておくことのメリットは、大きいです。
今回はmarkdownで、はてなブログを作成、更新するツール「question-markdown」をClineで作りましたので、紹介します。
TL;DR
- はてなブログの記事をmarkdownで管理するツール「question-markdown」をClineで作成
- はてなブログAPIを使用して、markdownファイルの投稿・編集が可能
- 画像の自動アップロード、過去記事のインポートなど、執筆をスムーズにする機能を実装
ツールの作成
まずは、Clineに作りたいものを教えます。モデルは、「claude sonnet 3.7」を使用しています。
はてなAPIをつかって、markdownで記事を管理するツールを作成したい。
.clinerulesの設定で、事前に定義書を作成するようにしていますので、まずは定義書が作成されます。
clineの設定については、以下の記事を参考にさせていただきました。
AIコーディング時代の開発環境構築：VS Code × Cline（Roo Code）で爆速開発！
仕様書は、何度かフィードバックを行い、修正したものですが、 初稿の段階で、ほとんどニーズを満たすものができていました。
あとは、Clineの実装をながめているだけで、ほとんどの実装が終わります。 実際に使ってみながら、微修正を加え、実装を仕上げます。
ツールの概要
さて、こうして完成したツール、通称「question-markdown」ですが、 環境は、Pythonのみで動作するため、Python環境さえあれば動作します。
はてなブログAPI、はてなフォトライフAPIを使用しており、 以下のようなことができます。
- markdownファイルを直接投稿・編集
- markdownで挿入した画像をはてなフォトライフへ自動アップロード＆画像リンク置換
- 過去記事のmarkdownインポート
- 記事のタグ付けや下書き・公開
特に、個人的にストレスだったはてなフォトライフとブログ記事の連携がスムーズになったことは、 かなり嬉しいです。
実際の使用例・使い方
実際にどのように使用できるか見ていきましょう。
記事の作成
記事内には、以下のようなヘッダーを記述します。
--- - title: 記事タイトル - draft: True/False （下書きかどうか） - id: 記事ID （記事のcreate時に自動で設定される） categories:（オプション） - カテゴリ1 - カテゴリ2 ---
あとは、通常通りに記事をかいていくだけです。
記事はどのような階層で作成してもよいのですが、 後述の既存記事のインポートの形式とあわせるため、以下の形式で作成することをおすすめします。
- yyyymmdd # 記事作成日時 - title.md # 記事タイトル.md - img # 記事内に挿入する画像 - 画像1.png
記事の下書きと公開
以下のコマンドで、記事がはてなブログに作成されます。
./question-md create path/to/markdown.md
独自のURLなどや、アイキャッチなどはAPIで設定できないため、こればっかりは、はてなブログのエディタ上で設定します。
最後に修正がOKであれば、draft: Falseに変更し、updateすることで公開ができます。
./question-md update path/to/markdown.md # markdownファイルから記事IDを自動取得
また、コマンドで公開することもできます。
./question-md drafts list # 下書き一覧 ./question-md drafts publish <entry_id> # 下書きを公開
既存記事の取得
過去記事の一覧を取得、またmarkdownファイルとしてimportすることができます。 既存記事の管理をmarkdownに変更するときに便利です。
# 記事一覧の取得 ./question-md list # 記事のダウンロード ./question-md get <entry_id> # 記事のダウンロード（複数） ./question-md getall ./question-md getall --limit 10 # 最新10件の記事を取得
記事は指定したディレクトリに以下の形式で保存されます。
- yyyymmdd # 記事作成日時 - title.md # 記事タイトル.md
画像の処理
画像の差し込みですが、はてなブログで画像を挿入するには、はてなフォトライフにアップロードしてリンクを取得する必須があります。
通常markdownでは、画像を挿入するとき、ローカルのパスで画像を指定します。これを、記事の作成や更新をする際に、自動ではてなフォトライフにアップロード、リンクの取得、画像パスの置換を自動で行うようにしています。
画像のアップロード条件は、以下の通りです。
- markdown内で
形式で参照されている画像が対象です - 相対パスで指定された画像のみが自動アップロードされます（
http://やhttps://で始まるURLは変換されません） - 画像ファイルはmarkdownファイルと同じディレクトリの
imgフォルダ内に配置する必要があります
例えば、このブログ記事の上部の画像は、このようになっていますが、
これが、はてなブログに作成されるタイミングで、はてなブログ上では、以下のようになります。
アップロードされた画像のパスは、jsonファイルに保存されるため、何度もアップロードされることもありません。
数式について
markdownでは、数式を$$$$で囲むことで、数式を表示できます。
が、はてなブログでは[tex: ]で囲む必要があります。
数式も画像と同様に、記事の作成、更新時に自動で$$$$を[tex: ]に置換します。
ローカルmarkdownでの表示
はてなブログ上での表示
数式の記述もストレスポイントだったので、かなり楽になりました。
今後とまとめ
今回は、はてなブログの記事をmarkdownで管理するツール「question-markdown」をClineで作成しました。
プラットフォームにこだわらなければ、ローカルテキストエディタから記事投稿するサービスもありますが、はてなブログでも似たような執筆体験ができるようになったのは嬉しいです。
今後は、githubActionなどを使用して、記事の自動更新なども実装していきたいと思っています。
オープンソースで公開していますので、ぜひご利用ください。
