Notion APIを利用したブログのテンプレートを作りました!

Notion API を利用したブログの困難な点

Notion APIでブログを作成する場合、Notion公式でOSSとして公開されているnotion-sdk-jsを利用して、実装を進めることになります。

ここで問題になるのが、APIにより取得されたNotionの個々のブロックのHTMLへの変換をいかに行うかというところです。

Notionでは実にさまざまなブロックがあり、これを利用することで効率的にノートをまとめたり、画像を貼り付けたり、URLをブックマークとして表示したり、シンタックスハイライトが適用されたコードブロックにサンプルコードを貼り付けたりと、Notionのブロックを知れば知るほどNotionでメモやノートを書くのは楽しくなってきます。

例えば以下の画像は、NotionでWeb bookmarkブロックを利用した例です。

これをnotion-sdk-jsで取得すると以下のようなJSONが返ってきます。

{
    "object": "block",
    "id": "99999999-9999-9999-9999-999999999999",
    "parent": {
        "type": "page_id",
        "page_id": "99999999-9999-9999-9999-999999999999"
    },
    "created_time": "2023-12-04T13:52:00.000Z",
    "last_edited_time": "2023-12-04T13:52:00.000Z",
    "created_by": {
        "object": "user",
        "id": "99999999-9999-9999-9999-999999999999"
    },
    "last_edited_by": {
        "object": "user",
        "id": "99999999-9999-9999-9999-999999999999"
    },
    "has_children": false,
    "archived": false,
    "type": "bookmark",
    "bookmark": {
        "caption": [],
        "url": "https://github.com/KOHSUK/n2zm-blog-nextjs"
    }
}

APIで帰ってくるNotionの全てのブロックはこのようなJSONなので、当然これを自身のブログで綺麗に表示しようと思えば、全てをうまくパースして表示する処理を実装しなければならないわけです。

正直言ってやってられません！

zenn-markdown-htmlの利用

そこで、このテンプレートでは zenn-markdown-html を利用しています。

こちらは、Zennのエディターに利用されているライブラリで、Zenn特有の記法を含んだMarkdownをHTMLに変換することができます。

これに加えてスタイルとして zenn-content-css を使うことで、Zennの様なリッチな記事の表示を簡単に行うことができます。

つまり、NotionのページからZennの記法に対応したMarkdownを出力できれば良いというわけです。

notion-to-zenn-md を作りました！

NotionからMarkdownを生成するOSSとしてはnotion-to-mdがあります。

このライブラリで多くのNotionブロックはいい感じに出力できますが、当然Zenn独自の記法には対応していません。

そこで notion-to-md を拡張してZennの記法に対応したマークダウンを出力できる notion-to-zenn-md を作成しました。

まだ、鋭意更新中で対応しきれていないブロックもありますが、Notionで記事を作成するモチベーションが上がるくらいの変換には対応しています。こちらのドキュメントにNotionのブロックと変換後のマークダウンの対応を記載しています。

利用方法

リポジトリはこちらに公開しています。

また、こちらにブログのLive Demoを公開しています。

設定方法や機能の一覧はこちらで公開しています。

＜準備中＞