ポートフォリオサイトのロゴ
Icon for ブログ記事のアーキテクチャをMDXからMarkdownへ変更しました

ブログ記事のアーキテクチャをMDXからMarkdownへ変更しました

NotionとLINEメッセージングAPIを使った外出先からのブログ更新システムから、ObsidianとMarkdownベースのシンプルな管理方式へ移行した経緯を紹介します。

以前の構成と比較して

以前は外出先からでも気軽に記事を更新できるように設計していました。本ブログでも紹介しましたが、このタイミングで実装しています。

suntory-n-water.com

Notionの画像(S3)をCloudflare R2に格納する

Notionで作成されたマークダウンコンテンツには、Amazon S3に保存された画像へのリンクが含まれています。ブログ記事として公開する際に、これらの画像をCloudflare R2ストレージなどの外部ストレージに移行することで非公開ページの画像も表示することができます。この記事ではNotionのページに添付されている画像をCloudflare R2に格納する処理について解説します。

具体的には、Notion でブログ記事の情報をデータベースとして管理し、LINE Messaging API に Notion のリンクを送信すると、サーバー側で MDX ファイルを自動生成してプルリクエストを作成する仕組みです。
これにより、スマホからでもブログ記事を投稿できる環境を実現していましたが、活用するにつれて課題が見えてきます。

そもそもスマホからブログ記事を更新することがあまりない

本末転倒という言葉がありますが、そもそも高い頻度で記事を更新できていない状況で、スマホから記事を書いたり文章を構成したりすることは難しい問題でした。
これは鶏が先か卵が先かのような状況です。
この実装を開始してから 1 週間後くらいには「あれ、頻度少ないし、パソコンからやるときに LINE からじゃないとプルリクエストを発行しづらいし」で、結局あまり記事は書けませんでした。

実装当初は電車内で思いついたことをメモできたりして結構良かったのです。
しかし、自力でブログのレイアウト(リンクカードなど)を考えるときに無駄な実装をすることもあったため、ここはあまり意味がないのかなと思いました。
今後の拡張性も自分で色々と作る必要があるので、マークダウンで既存のシステムに乗っかった方が多分保守的に楽だなと。

Notionと生成AIの親和性が良くなく、文章構成などで別のエディタを使うことが多い

これは随所で指摘されていますが、Notion には Notion AI という独自の AI はあるものの、なんとなく使いごこちが悪いです。
おまけに API のエンドポイントで返ってくる URL やプロパティなどの値が結構扱いづらく、感情的な違和感があったのも理由の 1 つです。
あとはシンプルに Claude Code の恩恵を得られないのが 1 番きつい。約半年弱、毎日 Claude Code と遊んでいる身からするとこれを得られないのが一番苦しい。

文章構成でも、textlint などを Notion の画面から実行することはおそらくできません。
そのため、毎回 Notion の内容を他のマークダウンファイルにコピペするのも手間だったので、やめる決断をしました。

結局、VSCodeやClaude Codeのようなエディタの補助を得られる環境で執筆することが多かった

なんだかんだで元のマークダウンファイルっていうのは、やっぱり偉大だなと思います。
ただのテキストファイルですからいろいろなことが簡単にできたりするんですよね。例えば置換や検索が容易です。
Notion に対して厳しい意見になりますが、検索機能が微妙なのもあるし、何か追加するときにもいちいちプロパティを設定するのが手間だなといったところです。

学習スタイルの変化とObsidian

最近の私の学習形態や情報の集め方として、Obsidian を使ってマークダウンファイルベースで管理するスタイルに変化していきました。
Obsidian は、ローカルのマークダウンファイルをベースに、双方向リンクやグラフビューなど強力な知識管理機能を提供してくれます。

note.com

単なるメモから知的資産へ:Obsidian in Cursorで構築する知的生産システム|松濤Vimmer

はじめに こんにちは松濤Vimmerです。以前書いた「メモ管理はObsidian in Cursor が最強」を多くの方に読んでいただき沢山の感想をいただきました! 前回の記事からおよそ3ヶ月が経過し自分のObsidian事情もアップデートされたので今回はアップデート版を書かせていただきました。前回よりもボリュームが多くなっています!! Obsidian in Cursorとは 最近、ObsidianやCursorを使ったメモ管理への関心が高まっています。Obsidian in Cursorとは、Markdownベースのナレッジ管理ツール「Obsidian」とAI搭載コードエ

正直なところを言うとまだちゃんと活用できている気がしません。
しかし知識の保管庫という観点では、テキストファイルでいろいろな情報を簡単に紐付けられる体験は結構好きなので今後も使っていきたいと思います。
少し内容とは脱線しますが、マークダウンファイルということで GitHub で他の情報を管理しています。
GitHub Actions などのいろいろなツールとも連携がしやすいので、そこも今後は開拓していきたいなというところです。

あとは、個人だからどうにかなっているけれども、Notion には API キーの管理やセキュリティ面での懸念があるのであまり使いたくはなかったというのもあります。

生成 AI を使ったブログの作成については賛否があると思いますが、私は記事の内容本文を全部書かせるということ以外については概ね賛成です。
やはり人間が文章の体裁を整えることや全体を見て構成を指摘するといったことは、機械的にやらせた方が記事の品質が高まります。
今回のマークダウン移行に際しては、とある人のブログ構成を大いに参考にさせていただいております。

まとめ

今回の移行は、「スマホから更新できる」という当初の目的から、「生成 AI に執筆を補助してもらえる」ようにするための技術変更でした。
実際の運用を通じて、自分の執筆スタイルや学習方法を見つめ直す良い機会になりました。

スマホからやるよりも、結局パソコンからやったほうがいいってことになった時点で、最初から設計や概念的な部分をちゃんと実装できていなかったことは反省です。

あとはシンプルに、個人のブログで SEO を実際に学んでみて検索に引っかかるようにする方が、個人の学習としては質が良いと思い、この方式を採用しています。
まずはちょっとでも困った内容を、少しずつこのシステムを使って更新できたらいいかなといったところです!

今回は以上になります。

参考資料

github.com

GitHub - azukiazusa1/sapper-blog-app

Contribute to azukiazusa1/sapper-blog-app development by creating an account on GitHub.

azukiazusa.dev

azukiazusaのテックブログ2

azukiazusaのテックブログ2です。週に1回 Web 開発に関する記事をお届けします。フロントエンドに関する分野の記事が中心です。