Notion API × Astroで簡単にブログサイトを開設する

カテゴリー

公開日 2023/11/14 最終更新日 2024/2/28

Notion APIとは

Notion APIとは一言で表すと「Notion内に保管されているデータベースやページのデータを取得することができるAPI」です。

Notion とは

Notionは、メモやタスク管理、Wikiやデータベースなど多岐に渡る使い方のできるドキュメント管理ツールです。Notionは業務上で利用するアプリケーションを1つに集約することのできる「オールインワンワークスペース」です。

Notionについての詳細な説明は、公式HPを確認してください。

今回は、このNotionをCMSとして利用してAstro経由でブログを作成する方法を紹介します。

Notion APIを使用して取得可能な項目

Notion APIを使用して取得可能な項目としては

ページ
データベース
ユーザー
ページとインラインコメント
ワークスペースのコンテンツのクエリ
統合の認証
展開されたリンクのカスタマイズ

が挙げられます。詳しくは過去に書いた以下の記事を参照してください。

NotionをCMSとして利用するメリット

NotionをCMSとして利用するメリットとしては以下のようなものが挙げられます。

直感的な操作が可能で、エンジニアでなくても扱いやすい

会社でブログを運営する際など、エンジニアでない人が記事を作成する場合、WordPressなどのCMSを使うことが多いと思います。しかし、WordPressなどは動作が重かったり、セキュリティの観点からの不安が拭えない一面があります。一方で、Notionは直感的な操作が可能で、エンジニアでなくても扱いやすいです。また、Notionはブログだけでなく、タスク管理やドキュメント管理など様々な用途で利用することができ、すでに業務で利用している場合にはそのままブログとしても利用することができます。

Notionのコンテンツは柔軟なカスタマイズが可能

ブロックベースの編集システムを採用しているため、テキスト、画像、埋め込みコンテンツなど、さまざまな要素を自由に組み合わせることができます。これにより、独自のレイアウトや構造を持ったページを手軽に作成できます。

Notion上だけで情報の管理が完結する

先にも述べたように、Notionはプロジェクト管理ツールとしての側面も併せ持っています。したがって、いつまでに誰が記事を作成するのかなどもNotionだけで完結しますし、記事の作成状況もNotion上で確認することができます。また、記事の作成状況を確認するだけでなく、記事の作成に関する議論やどんな記事を作成していくかの案出しもNotionの上で完結させられます。

以上の理由から、特に非エンジニアが関わることがあり、すでにNotionをご利用の場合には、NotionをCMSとして利用することは非常に有効な選択肢となります。

Webフレームワーク「Astro」とは？

Astroは、Webフレームワークの一つであり、静的サイトジェネレータの1つです。JavaScriptをビルド時に排除することで高速なWebサイトを作成できます。

実際に、Astroの公式ドキュメントにも以下のような記載があります。

Astroは、Webサイトを構築するために必要なものがすべて揃ったオールインワンのWebフレームワークです。コンポーネント構文、ファイルベースのルーティング、アセットハンドリング、ビルドプロセス、バンドル、最適化、データフェッチなど、Astroにはさまざまな機能が搭載されています。

Astroは、ReactやVueなどの複数のフレームワークを利用することができ、自分にあった使用方法を採用できます。また、Next.jsやGatsby.jsなどの静的サイトジェネレータと比較しても高速なビルドが可能です。

AstroでNotion APIから記事を取得して表示するまでの流れの紹介

このセクションでは実際にNotionから記事データを取得してAstroを使って表示するまでの手順を紹介していきます。具体的には、astro-notion-blogを使用していきます。astro-notion-blogの詳細は以下のリンクを参照してみてください。

このリポジトリにあるファイルを利用します。流れとしては、GitリポジトリをFork, Clone→Notion APIの設定→Notion APIを使って記事のデータを取得する→Astroで記事を表示するという流れになります。

実際にNotionの記事をAstroで取得する

それでは、実際にNotion APIを利用して記事を取得してみましょう。

GitのリポジトリをローカルにCloneする

こちらのリポジトリをForkしてローカルへCloneします。

Forkのためには以下の画像のように、右上のForkボタンを押してください。

つぎに、ローカル環境へCloneをします。Cloneするためには以下のようなコマンドをターミナル等で実行します。

git clone https://github.com/{USERNAME}/astro-notion-blog.git

以下のようにCloneが完了すれば開発環境の準備は完了です。

git clone https://github.com/{USERNAME}/astro-notion-blog.git
 
Cloning into 'astro-notion-blog'...
remote: Enumerating objects: 2236, done.
remote: Counting objects: 100% (155/155), done.
remote: Compressing objects: 100% (65/65), done.
remote: Total 2236 (delta 88), reused 122 (delta 84), pack-reused 2081
Receiving objects: 100% (2236/2236), 1.08 MiB | 11.27 MiB/s, done.
Resolving deltas: 100% (1351/1351), done.

Notion APIの環境変数などを取得する

つぎに環境変数を取得していきます。

内部インテグレーションシークレットを取得する

NotionのMy Integrationsから「新しいインテグレーションを作成する」をクリックします。
つぎに、好きな名前をつけて［送信→］をクリックしますシークレットタブから内部インテグレーションシークレットをコピーしておきます。

これで内部インテグレーションシークレットを取得することができました。次に、データベースIDを取得していきます。

データベースIDを取得する

データベースIDを取得していきます。データベースはastro-notion-blog公式から提供されている規定のデータベースを複製して使います。このデータベースを使用しないと、子ページのタグの齟齬などによりエラーが発生してしまうので最初は規定のものを使用するようにしてください。

規定のデータベースは以下から確認できます。

画面右上に表示される「複製」をクリックして複製します。

複製が完了したらデータベースIDを取得していきます。データベースIDはURLの以下の部分に含まれています。

https://www.notion.so/{データベースID}?v={ビューID}

こちらのデータベースIDも控えておきます。これで環境変数の準備は完了です。

環境変数を設定し、Astroで実際に記事を表示してみる

先程Cloneしてできたフォルダにターミナルで移動します。そこで依存関係にあるパッケージ等をインストールするために、以下のコマンドを実行します。

npm install

インストールが完了したら、つぎに、環境変数を設定していきます。環境変数は.env.localファイルに記載します。.env.localファイルは以下のように記載します。

DATABASE_ID="データベースID"
NOTION_API_SECRET="APIシークレット"

これで環境変数の設定は完了です。以下のコマンドを実行してローカル環境を立ち上げます。

npm run dev

立ち上がった開発環境へアクセスしてみると以下のようなページが表示されるかと思います。

以上でastro-notion-blogを利用して記事を表示することができました。このデータベースをもとにして記事を追加したり、デザインを変更したりすることで、自分だけのブログサイトを作成することができます。

まとめ

いかがでしたでしょうか。今回は話題のドキュメント管理ツールのNotionとWebフレームワークのAstroを連携してブログを立ち上げる方法を紹介しました。正直なところ、個人レベルでのブログの運用であればAstroだけで記事はmdで書くほうが楽かもしれませんね。社内ナレッジの共有の場としてNotionが使われていればこの構成も候補に入ってくると思います。