easy-notion-blog 正式バージョン1.0リリースのお知らせ

easy-notion-blog の開発を始めてから約1年、昨年末に正式バージョンとなるバージョン1.0をリリースしました。

そのことをブログで書こうと思っているうちに、気づいたらバージョン1.1もリリースしていたので、この記事では開発開始からの1年を振り返りながらバージョン1.0と1.1で追加された新機能を紹介します。

Notion座談会のお知らせ

最初にお知らせですが、毎週金曜夜に開催されているNotion座談会の1月20日回に参加させていただけることになりました。

座談会では easy-notion-blog の開発の経緯や魅力をお伝えできればと思いますので、お時間合う方はぜひリアルタイムでご視聴ください。

Notion座談会ポータルサイト

Notion座談会の更新情報

https://notionzadankai.studio.site

Next.js バージョン13へのアップデート

新機能というわけではないですが、easy-notion-blog はバージョン1.0で Next.js バージョン13にアップデートしました。

Next.js 13へのアップデート方法の詳細は以前書いた記事がありますので、気になる方はご覧ください。

Next.js バージョン13へのアップデート方法と解説 - アルパカログ

Next.js 13への移行に必要は変更内容はこれまでのバージョンに比べて多く複雑になっています。この記事ではバージョン13へのアップデート方法を新機能の簡単な解説を交えながら説明します。

https://alpacat.com

easy-notion-blog を最初にリリースしたとき Next.js のバージョンは11だったので、メジャーバージョンが2つも上がっていることになります。

特にバージョン13ではコンポーネントの概念そのものがドラスティックに変わったので、手動でアップデートされた方は苦労されたと思います。

子ブロックの再帰的取得

Notion は全ての要素がブロックで表現され、ブロックは他のブロックを子に持つことができます。

Notion API を使ったことのある方はご存知だと思いますが、Notion API で親ブロックを取得しても子ブロックは付いてきません。

子ブロックを取得するには、親ブロックから与えられた子ブロックIDをもとに、再度ブロック取得APIをリクエストしてあげる必要があります。

そして、取得した子ブロックもまた子ブロックを持つ可能性があるので、子ブロックを持たなくなるまで子ブロックを取得し続ける、つまり再帰的にブロックを取得する必要があります。

以前開催したライブコーディングでも触れましたが、コードは常に読みやすく保たなければなりません。

難解なコードなんて誰も、作者でさえもメンテナンスしたいと思わないからです。

コードを読みづらくさせる要因の1つに再帰があります。再帰はコードを一瞬で難解なコードに変えてしまいます。

使わないで済むのであれば再帰は使うべきではありません。これは古事記にも書いてあることです。皆さんも覚えておいてください。

プリミティブなデータを扱う際の注意点とステートメント「CODE COMPLETE」まとめ - アルパカログ

前回のエントリでは、防御的プログラミング、変数、例外などをまとめた。このエントリでは、「CODE COMPLETE」から数値、浮動小数点数、文字列などプリミティブなデータを扱う際の注意点とステートメントについてまとめる。

https://alpacat.com

~~実装がめんどくさかったので~~そういうわけで、子ブロックの再帰的取得は実装が今になってしまいました。

子ブロックを無限に探索できるようになりましたが、子ブロックを1つ取得するためにAPIを1回リクエストする点にはご注意ください。

すなわち、ブロックをたくさん入れ子にしているとAPIのリクエスト制限に達してしまう可能性があるということです。

タイトルを使ったOGイメージ生成

easy-notion-blog ではホスト先に Vercel を推奨していることから、最近 Next.js でサポートされた vercel/og を使ったタイトルによるOGイメージ生成に対応しました。

vercel/og は Edge Runtime と呼ばれる通常のアプリケーションサーバーとは異なる環境で稼働し、いくつかの制限と引き換えに速度が速いという特徴があります。

easy-notion-blog では記事の slug をOGイメージ生成のAPIエンドポイントにリクエストして、エンドポイントでは slug をもとに Notion API をリクエストしてタイトルを得るというスキームにしています。

vercel/og の使用例では受け取ったタイトルをそのまま使っていますが、そうすると誰でも使えるフリーのOGイメージ生成エンドポイントになってしまうからです。

しかし、検証をしているうちになぜか Notion API だけが Edge Runtime からのリクエストに400を返すことがわかりました。

Notion API 側の問題の可能性が高いと思ったので Notion のサポートと現在やりとり中ですが、まだ原因はわかっていません。

私からのお年玉ということで正月の間にリリースしたかったのですが、間に合わなかったのはこれが理由です。

同時に StackOverflow にも質問を投げていたところ、Edge Runtime から直接 Notion API をリクエストするのではなく、Notion API を代理でリクエストする Edge Runtime でない通常の API エンドポイントを作成しリレーすれば良いというアイデアをもらったので、その後無事に実装することができました。

神っているんですね。StackOverflow に投稿したのは人生でこれが初です。

Notion API from Vercel Edge Runtime responds 400

From API routes of Next.js on Vercel Edge Runtime, Notion API, eg: Retrieve a database or Query a database, responds 400 invalid_request_url as follows: {"object":"error","…