考察とは名ばかりで感想?

最近は主にプログラミング(AIコーディング)と資産運用(FXで食ってくぞ!)

AIにはてなブログを書かせるためのガイド――手作業のためにObsidianをエディタにする

ブログ執筆にAIが役立つけれど、編集画面とAIツールの間で何度もコピー&ペーストするのは面倒… そこでブログ記事をパソコン上のファイルとして直接編集すれば、AIとの連携はもっとスムーズになります

この記事では、はてなブログの記事をローカルで管理できるツール『blogsync』と、高機能エディタ(!?)『Obsidian』を組み合わせ、AIによるブログ執筆を効率化するための具体的な手順を解説します。AIに書かせてもむしろ細々した手作業が必要という、矛盾した環境からはおさらばしちゃいましょう!

ローカルで書けばAIなどのツールが使い放題!

簡単に言っちゃえばこういう話なんですね。AI以外にも、テキストエディタに好きなのを使えるし、gitでバージョン管理できるし、バックアップにも色んな方法が使える

それはそれとして、今時の売りはやっぱりAIとの親和性ですよ! ローカルファイルならAIに読み込ませるのもAIに書き込ませるのも、今じゃ何かしらのソフトで簡単にできますからね。CursorみたいなAI連携エディタでも、Claude Codeみたいなターミナルコードアシスタント*1でも良い。これがブラウザ上だと、

  1. 下書きのメモをコピー
  2. 対話型AIのサイトに貼り付け
  3. 考えさせた構成をまたコピー
  4. 下書きに貼り付け

とか、

  1. プレビューを表示
  2. ブラウザ拡張でマークダウンとして保存
  3. 対話型AIのサイトに添付
  4. ブログタイトルとかリード文とか考えさせたのをコピペ

とかで、いちいち手間!

一方ローカルファイルなら、

  1. 原稿見て最後のまとめ書いといて~

でそのままAIが本文を見てそのまま直接末尾に記入できる。何なら、ローカルファイルのメモやら図表やらから情報を集めさせて、記事の下書きを作らせるとかもできる!

blogsyncではてなブログを管理する

下手なサイト*2だと、ローカルで書き上げた記事を最後の最後だけ手動でコピペして投稿する必要があります*3が、はてなブログには良い感じのツールがあるんですよ。その名もblogsync

github.com

コマンドラインで使用するはてなブログ用クライアントで、ブログの記事をローカルにダウンロードして編集したり、そうやって記事を更新したのをブログに反映したりするソフトです

blogsyncの導入

概ね インストール→PATHの設定→設定ファイルの作成→ブログをローカルに同期 の流れで準備完了。詳しいことはblogsyncのReadMeや↓のサイトが参考になります

blog.tricrow.com

最後のローカルに記事をダウンロードするコマンドは次の通り

blogsync pull <blogID>

blogIDはブラウザのドメイン名です。このブログなら”kurutto115.hatenablog.com”。ちなみに設定ファイルに書くものなので省略できるようになっています(いちいち書くと手間なので助かる)。Markdownモード以外の記事もダウンロードされますが、中身はHTML編集のものになります。しっかし全記事をチェックするので動作が重いですね…

最も基本的な使い方

blogsync push <path/to/file>でローカルファイルの内容にブログを同期し、blogsync fetch <path/to/file>でブログの内容にローカルファイルを同期します*4

ファイルパスはあくまでローカルのものなのがポイント。記事のURLを書いても動きません。それとpushfetch等は個々の記事が対象。年とか月のフォルダ単位で更新できると便利ですが、そういう機能は無いので自分でスクリプト書くとかする必要があります

これで公開済み記事も、下書きをローカルに書いておいて書き終わったら更新すれば良いので便利ですね♪(画像は上手いことやらないと文章を更新してから貼っ付けることになりますが…)

新規記事の投稿

ローカルのファイルを元に新規記事を投稿する方法、ReadMeにも書いてありますが、あれはUNIX系の書き方なのでWindowsだとこう

cat <path/to/file> | blogsync post <blogID>

要はblog postコマンドはターミナル上で手書きの入力(標準入力)を受け取る仕様になっており、それと標準入力へファイルの内容を流し込むコマンドを組み合わせれば良いのです*5。ちなみにこの仕様上、新しいファイルができても元のファイルは残ります

ここで事前にはてなブログのデフォルトをMarkdownモードに設定しておきましょう。そうでないと見たままモードに改行を削除したマークダウンのテキストが突っ込まれるみたいな悲劇が起こります

記事のメタデータ

blogsyncで使われるローカルファイルには、本文の前に次のようなメタデータがあり、pullした記事と同様にpostした新規記事にも自動で追加されます*6

---
Title: Obsidian用Terminalプラグインでテーマをカスタマイズするガイド
Category:
- テック
Date: 2025-08-20T19:05:38+09:00
URL: https://kurutto115.hatenablog.com/entry/2025/08/20/190538
EditURL: https://blog.hatena.ne.jp/kurutto115/kurutto115.hatenablog.com/atom/entry/6802418398553693086
---

ここのDateプロパティを編集してpushすれば、ちゃんとブログに表示される投稿日も書き換わっちゃいます。一方URLは書き換えても変わらない仕様なので、後述するカスタムパスを使って再投稿しましょう

記事が下書き状態の場合は次のようになり、公開済みの記事とは項目が多少異なります*7

---
Title: AIにはてなブログを書かせるためのガイド――手作業のためにObsidianをエディタにする
Category:
  - テック
EditURL: https://blog.hatena.ne.jp/kurutto115/kurutto115.hatenablog.com/atom/entry/6802888565229134818
PreviewURL: https://kurutto115.hatenablog.com/draft/entry/kKVMLnhE9cS15k1L16YwpL-cacQ
Draft: true
---

このメタデータは他でも使われるYAMLフロントマターという形式ですが、元のファイルにYAMLフロントマターがあってもpostする際に新しいYAMLフロントマターが追加されて2重になってしまいます。つまり元のYAMLフロントマターは無視されるので、先回りしてタイトルやカテゴリを書いておいても反映されません。タイトルは次のように投稿時に--title引数を使って指定できるのでそうしましょう

cat <path/to/file> | blogsync post --title=<TITLE> <blogID>

下書きの挙動

新規記事をpostする際に--draft引数を指定することで、下書き状態で投稿することができます

cat <path/to/file> | blogsync post --draft <blogID>

blogsyncについて書かれたサイトを見ると、かつては下書きを更新するたびにファイル名が変わって大変だったようですが、現在は固定されているので安心です。メタデータのdraftプロパティをfalseに書き換えてからpushすると記事を公開できます。その際自動でファイルが下書き用の_draftフォルダから通常のフォルダに移動し*8、メタデータに公開日などが追加されます

カスタムパス

はてなブログのデフォルトだと、フォルダは年・月・日に分かれててやたら多いし、ファイル名は6桁の公開済み記事はまだ良いけど下書きは17桁もあるのでいちいち入力してられねぇ!!

そんなお悩みにお答えするのがこちらの--custom-pathオプション。新規記事をpostする際に次のようにすると

cat draft.md | blogsync post --custom-path=new/test kurutto115.hatenablog.com

通常は.\entry\2025\08\20\190538.mdみたいになるところが.\entry\new\test.mdになります。記事のURLもhttps://kurutto115.hatenablog.com/entry/2025/08/20/190538の代わりにhttps://kurutto115.hatenablog.com/entry/new/testになります*9

ちなみにカスタムパス機能を使うと下書きで投稿しても_draftフォルダを使用せず、公開前後でファイルの移動は生じません

フォルダを整理する力業

上述の通りカスタムパスを使わないと、はてなブログのフォルダ構成は煩雑です。はてなダイアリーから移行した記事は単純なフォルダ構成*10ですが、その分大量のフォルダが1ヶ所に並んでいてこれはこれで煩雑!

この問題を解消するため色々と手を打ちました。まず、マークダウンで書いてない過去の記事はローカルで編集しないのでローカルから削除*11。これから書く記事はカスタムパスで年ごとのフォルダ直下に配置。更に過去の記事のうちマークダウンで書いたものも年フォルダ直下に移動しました。何とローカルの保存場所が変わってもブログにpushfetchなどするのに支障無いのです

それとデフォルトの設定ではプロジェクトルートフォルダとentryフォルダの間にブログドメイン名のフォルダがあるのですが、複数のブログを扱わない限り不要であり、省略する設定にできます

Obsidianをマークダウンエディタにする

こうしてローカルでブログを書く環境を導入できたので、AIも使い放題だぜ!とプログラミングのようにCursor*12で書いてみるとすぐに気付く。ローカルでブログを書くにはマークダウンが大前提だけど、マークダウンを書くにはそれ用の環境が欲しい。Ctrl+Bで太字になってほしいし、箇条書きで改行したら新しい行も箇条書きになってほしいよな?

というわけでご登場いただくのが、多機能メモ帳ソフトのObsidianなのです。元々メモをマークダウンで書くソフトなので、マークダウンを編集する機能が豊富も豊富。しかもAIと連携するのだってお手の物!

(このブログにもそういうジャンルの話を書きました)

kurutto115.hatenablog.com

ここからはブログを書くのに便利な、Obsidianの機能を紹介していこうと思います

ターミナル連携

プラグインを使ってObsidianでコマンドラインターミナルを開いちゃいましょう

github.com

これでClaude CodeとかGemini CLIとかを使えるので、ブログをAIに書かせるのも手書きするのと合わせて全部Obsidianでやれます! 勿論上で紹介したblogsyncも、gitでバージョン管理するのも、コマンドラインでやれるからには丸ごとObsidianにお任せです

関連記事:Obsidianのターミナルのテーマを編集した話)

kurutto115.hatenablog.com

各種操作によるマークダウン編集

元々マークダウンを使っているObsidianには、マークダウンを編集するための機能が豊富にあり、右クリックメニューからホットキー、コマンドパレットに至るまで多彩な方法で編集機能を使えます

個人的にお勧めなのがツールバーを表示するプラグインですね。かなりカスタマイズできるので使い勝手が良い

github.com

それとライブプレビュー状態でマークダウンが書けるのも便利ですね。書いてる画面で太字とか見出しとかになってくれるし、編集してる箇所以外はマークダウンの記号類が隠れるのでゴチャゴチャしない

テンプレート機能

Obsidianにはテンプレートを挿入する機能があります*13。これを使えば「続きを読む」とか「目次」とかも、ブラウザからやるように簡単に挿入できるわけです。それと日付の自動入力ができるので、日記系記事の見出しを入力するのにも便利ですね

記事一覧生成

Obsidianに最近登場したBasesという機能で、ブログ記事の一覧を作成しました

これはObsidianのファイルを表やタイル形式で一覧表示する機能なんですが、表示対象をブログ記事のフォルダに設定*14して、一緒に記事タイトルやURL、カテゴリなんかを表示するようにしてあります。これでこの表からローカルのファイルもオンラインの記事もワンクリックで開けるし、カテゴリや下書きプロパティを編集できるのですこぶる便利!

というか記事上部のプロパティが表示される部分でもそういうことできて便利なんですよね。ここで地味に滅茶苦茶便利なのが下書きのプレビュー画面のリンクもあること

Obsidianとblogsyncの両方が記事のメタデータにYAMLフロントマターを使ってるので、こういう便利なことになります

その他

他にもブログを書くのに便利な機能は色々あって、箇条書きをドラッグ&ドロップしたりできるアウトライナープラグイン、URLを貼り付けると自動でリンク先タイトルでの表示にしてくれるプラグイン、見出しや脚注の一覧、コードブロックのシンタックスハイライト*15、などなど

はてなブログをマークダウンで書く勘所

果たしてAIでブログを書くために、マークダウンでブログを書くことになりました。マークダウンはAIとの相性も良いので好都合ですね! ここからはマークダウンの用途がブログの場合のポイント――特にはてなブログ特有のものを説明していこうと思います

参考
【Markdown】はてなブログ用Markdownチートシート - BFT名古屋 TECH BLOG
はてなで使えるMarkdown記法 - hero-rinのブログ

改行

段落分ける時に改行が2つ必要というブログあるある〜

普段Obsidian使ってるノリで改行が1回だけだと、ブログでは改行して表示されないから要注意! 特に箇条書きの前に空行が無いと箇条書きとして認識されなくて大変なことに*16

ちなみにはてなブログではマークダウンの強制改行である「半角スペース×2+改行」が使えますが、Obsidianやはてなの編集画面で見えないため非常に使いにくい。必要な時は素直に<br />を使いましょう

箇条書き

AIは時折こういう文章を書きます

1. **サンプル:**
    上に書かれたキーワードを解説する
    こういう風に改行することもある
2. **キーワード:**
    解説文~~~
    ~~

生のマークダウンやObsidianで表示するなら良いですが、ブログに使うと改行もタブによるインデントも省略されて、長ったらしく醜い番号付きの箇条書きとなります。強制改行を使いましょう

箇条書き(特に番号付き)の中に画像を入れるにも強制改行は有用です。箇条書きを途中で中断せずに画像を貼れますからね。然もないと文章と同じ行で画像が表示され、見るも無惨な表示になったりします*17

ちなみにマークダウンの番号付き箇条書き、自動で番号が振られるので全部1.で良いです。逆に手動で番号を弄りたい場合は.の前に\でエスケープできるのでそれっぽくできます

ハイパーリンク

上でサラッと触れましたが、Obsidianにはリンクを良い感じに生成してくれるプラグインがあって滅茶苦茶便利です。URLを貼ると自動でそのページのタイトルを読み取り、[ページタイトル](URL)というマークダウンのリンクに変換してくれます*18

カード形式の埋め込みリンクを使いたい場合は次のような「はてな記法」で書きましょう

[https://example.com/:embed:cite]

僕はブラウザの拡張機能を使って、右クリックメニューから即座にこの形式のリンクを作れるようにしています*19

chromewebstore.google.com

ただしこのリンクはObsidianからだとクリックして開けないのが難点。一旦ブログの記事(もしくはプレビュー)を開いてそこから行きましょう

見出し

全然知らなかったのですが、はてなブログの「見たまま編集」での大見出しって<h3>なんですね*20(マークダウンだと###)。なので「見たまま編集」と同じような感じにするには##をすっ飛ばして###を使う必要があります

はてなブログはマークダウン形式の表にも対応しています。これまで表を入れたい時は画像にするか、それ用のサイトでHTMLを作成してHTML編集モードで貼り付けてたのが大分楽になります!

画像

今のところ画像は従来と同じく、ブラウザの編集画面からはてなフォトファイルにアップロードすると同時に貼り付けています*21。もっと良い感じにやる方法があるみたいなんですがそれについては追々

画像のサイズを指定したい場合は、貼り付けてから「fotolife記法」の画像リンクに:w415のように書き加えます

[f:id:kurutto115:20250806233831p:plain:w415]

詳しくは↓を参照

help.hatenablog.com

コードブロック

はてなブログではコードブロックにシンタックスハイライトが使えますが、対応する言語は↓の通り

help.hatenablog.com

言語名は全部小文字で書かないといけないのが特徴

文字色

MarkdownモードでもHTMLタグを使って文字色を設定できます。Obsidianのツールバープラグインが対応しているので便利

ちなみにブラウザで文字色と太字を同じ範囲で設定すると、文字色を設定するHTMLタグごと***22で囲ってあり、Obsidianで見ると太字設定が破綻してぐちゃぐちゃになります*23。タグの内側を**で囲うと見やすいです

まとめ

この記事では、はてなブログの記事をローカルで編集し、AIとの連携を効率化するための具体的な方法を解説しました

  • blogsyncの利用: はてなブログの記事をローカルファイルとして管理。コマンド一つで記事の同期や投稿ができ、カスタムパスでファイル整理も簡単です
  • Obsidianの活用: 多機能マークダウンエディタObsidianで快適に執筆。ターミナルプラグインを使えば、blogsyncの操作からAIとの対話までObsidian上で完結します
  • マークダウンの勘所: 色々役立つ強制改行の使いどころや、埋め込みリンク・画像の記法なども紹介しました

この環境ならAIに下書きや要約を任せるのもスムーズ。コピー&ペーストの手間から解放され、バージョン管理も容易になり、より快適なブログ執筆が実現します

(追記)

ローカルファイルなのを活かしてgitで記事のバージョン管理する話と、スクリプトを作ってblogsyncとgitを簡単にする話を書きました

kurutto115.hatenablog.com

*1:コマンドラインで動作し、プログラムのコーディングなどに利用される対話型AI

*2:noteとかnoteとかnoteとか

*3:そもそもコピペで済めば良い方で、画像なんかあるとそう簡単にはいかない

*4:ちなみに削除はremove

*5:ちなみにReadMeにあるようにガチでターミナル上で執筆する場合、PowerShellで標準入力から抜けるにはCtrl+Z+Enterを使います(豆知識)。blogsyncについて参考になるブログに書いてあった→blogsync で Windows からも直接新規記事を投稿したい - おんがえしの blog

*6:タイトルとかカテゴリは手動で追加する必要がありますが

*7:ちなみに後述するカスタムパスを使用した場合は、下書き時点でURLプロパティが書かれています

*8:この仕様なのでブラウザで公開操作するとローカルに下書きの記事が残っちゃうから、そっちは手動で削除する必要が生じちゃう

*9:この辺りの話、スラッシュとバックスラッシュを混同しやすいので注意しましょう(2敗)。コマンドでカスタムパスを指定するときはスラッシュです

*10:年・月・日の3層構造のはてなブログに対して、はてなダイアリーは年月日がひとまとめで1層だけ

*11:blogsync pullしなければ何の問題も無い

*12:AIを利用する機能で人気のエディタ

*13:そういやはてなブログにも定型文挿入機能あるな

*14:カテゴリや投稿時期で更に絞り込みしたり並べ替えたりもできます

*15:プログラムなどを色付きで見やすく表示してくれるやつ

*16:逆に(?)後に空行が無いと後ろも箇条書きの一部にされてしまう

*17:箇条書き以外でも、1回改行しただけで画像を挿入して同様の惨事になったりする

*18:更に既に書いてあるURLを右クリックメニューからリンクに変換したり、文字列を選択した状態でURLを貼るとページタイトルの代わりに選択した文字列がリンクテキストになったりします

*19:この拡張機能、それ以外の用途でも色々使えて便利

*20:中見出しはh4、小見出しはh5

*21:ブラウザの編集画面から貼り付けるとキャプションを設定できるのも利点。参考:画像を貼り付ける際に、キャプション(説明文)を付けられるようにしました - はてなブログ開発ブログ

*22:太字に設定するマークダウンのマークアップ

*23:Obsidianでもリーディングビューにすれば問題無く表示される