ウェブサイトの誕生

僕が Notion API に期待することのメインは、 の2点です。 前回の記事で、なんとなく API の使いかたの基本はわかりました。 この記事では、一歩進んで、上記したやりたいことの1つである 「CMS バックエンド」 の可能性を探っていきたいと思います。 ちなみに先に言っておきますが、現時点の Notion API で CMS 化にはかなり難があります。 Notion でブログポストのようなページをいくつか作る そのページのリストや内容を API で取得する Next.js を使ってなんだか形にする 事前に Notion 上に、実際のサイト上のページのソースとなるページ構成を作っておきます。 ブログサイト全体を構成するページ (親ページ) を作り、そのページに含まれるデータベースに、子ページとして個別投稿のページを作る構成とします。 もちろん、親ページとなる「ブログサイト用ページ」は、API でアクセスできるように integration にシェアしておく必要があります。 親ページには以下の情報を持つこととします。 個別投稿の子ページには以下の情報を持つこととします。 API を実行して Notion 記事を取得し、そして表示するためのフロントエンドサイトの土台を、Next.js で作ります。 npx create-next-app --example with-typescript korn-blog Notion SDK もインストールしておきます。 これで、サイトのフロントエンドの土台と、SDK の準備ができたので、まずは一旦、単純に SDK からリクエストを送って、親ページのデータを取得してみます (ID はダミーです) 。 こんなデータが取れました。 んん〜？なんか期待とちがくねーかこれは...

みなさんこんにちは。Notion アンバサダーの 円谷 です。 Notion アンバサダーは日本に8名ほどいるのですが、がっつりエンジニアをしてるのはたぶん僕だけ（？）だと思うので、ディープなエンジニアリングの話も沢山していければなと思っている今日このごろです。 1ヶ月ほど前に、 Notion API が画像に対応 し、ページ内の画像の URL を返してくれるようになりました。これにより、Notion API の活用の幅がぐっと広がり、画像付きのブログの CMS（コンテンツマネジメントシステム）としても使えるようになりました（今まではテキスト周りしか対応していなかった） このアップデートされた API を使って、自作ブログを Notion API を使う形に実装し直したので、今日はその解説をがっつりしていきたいと思います。 🌴 エンジニアリングの話は避けられないのでちょこちょこ出てくるのですが、なるべく非エンジニアの方でも分かりやすく書こうと思っているのと、ソースコードは公開してあるので、僕のブログと同じ見た目のもので良ければ、実装なしでもブログとして公開することができるようになるかと思います。（記事の最後に GitHub のリンクを貼っておきます） 実際に作ったブログの紹介、アーキテクチャの説明、ブログを作る上で使用する Notion API エンドポイントの解説、記事取得上限数の実装による回避方法、画像周りの処理方法（expire date の回避方法）、あたりをこの記事では紹介できればなと思います。 見た目はこんな感じです。Notion に書いた内容が、そのままブログとして公開されるような仕組みを実装することができました。記事の部分は全て Notion で管理されています。 トップページ otion に書いた情報（文章・箇条書き・見出し・画像・トグル等）がほぼそのまま描画されるような作りになっています。 記事詳細ページ データの入稿は Notion で行います。データベースにレコードを追加し、本文部分に記事を書くと、ブログページの方にも反映される仕組みになっています。後ほど詳しく解説しますが、記事の本文部分についてはほぼ即時反映されるようにしています。 Notion データベース Notion 記事本文（ここが公開される） 左が Notion で書いたもの、右がブログとして公開されている記事 💁‍♀️ （少しマニアックな）Notion の使い方まとめマガジン というマガジンを連載しています。月額500円でご登録いただくと、本記事の続きと、他の有料記事を全て読むことができます（過去記事は PDF 版を配布しているのでお声がけください。 月に2本以上記事をお読みいただける場合にはマガジン登録をして頂いた方がお得 です。ぜひご検討ください。 🐈🐈🐈