Zenn
👑

microCMSを使ってnotionの全記事をブログ化してみた

2024/12/23に公開
Go
Next.js
microCMS
Notion
tech

突然ですが、ヘッドレスCMSという言葉をご存じですか？

ヘッドレスCMSとは、従来のCMSとは異なり、コンテンツの管理機能（バックエンド）とコンテンツの表示機能（フロントエンド）が完全に分離されたCMSです。

microCMSは国内で提供されているヘッドレスCMSで、コンテンツの管理機能と閲覧や投稿に必要なRESTful APIを提供しています。

つまり、microCMSを使えばバックエンドの一切を面倒みることなく、フロントだけを自前で実装すればWebコンテンツをつくれるということです！

今回は、notionのページをすべてmicroCMSにアップロードし、microCMSが用意してくれているNext.jsのテンプレートを使ってブログを作成してみたいと思います。

notionにはページ公開機能もありますが、テーマやSEO、カスタムコンテンツの埋め込みなど様々な面でフロントを自分で用意するメリットがあります。また、部分的に導入することも可能なので、特に自社ページの運用を行うケースなどではメリットを享受することが出来るでしょう。

早速やってみましょう！

microCMSのテンプレートを手元で試してみる

microCMSに登録して、テンプレートを選びます。
今回選んだテンプレはこちら。なにもいじらなくてもカッコいい！！

その後、GitHubアカウントの連携を求められたので、連携すると service_id , api key が表示されるのでメモしておきます。

さらに進んでいくと、レポジトリが作成されるので、そのレポジトリを git clone し、ルート直下に .env を作成。以下のように情報を打ち込みます。

MICROCMS_API_KEY=xxxxxxxxxx
MICROCMS_SERVICE_DOMAIN=xxxxxxxxxx
BASE_URL=xxxxxxxxxx

MICROCMS_API_KEY:
microCMS 管理画面の「サービス設定 > API キー」から確認することができます。

MICROCMS_SERVICE_DOMAIN:
microCMS 管理画面の URL（https://xxxxxxxx.microcms.io）の xxxxxxxx の部分です。

ふむふむ。簡単ですね。

早速 npm run dev で手元でちゃんと動くかチェックしてみましょう。

まだ記事を入稿していないので記事がないと出ていますが、とりあえずつなぎこみまでは成功しているようなのでOKとしましょう。

APIキーの設定

記事を投稿するには、管理画面の左カラムからAPIキーの設定を開き、POSTリクエストを許可する必要があります。忘れているとハマって時間を溶かすので最初に確認しておきましょう！

これでmicroCMS側の設定は完了です。

notionからページ一覧を取得してみる

Databaseに記事をいれておく

記事一覧を直接取得するnotion APIは見つけられなかったため、notion DatabaseにmicroCMSで管理したい記事を入れておくようにしました。

notion Databaseに含まれる各データは、API経由で好きなようにFilterできるため、こちらを利用してmicroCMSに記事を投稿していきます。

そして、APIとDatabaseを紐づけるために、integrationを作成します。

integration

まずは、integrationを作成する必要があります

https://www.notion.so/my-integrations

今回は読み取り権限だけつけて保存しました。

databaseの画面に戻り、画面右上のConnectionsを選択すると、先ほど作成したintegrationが選択できるようになっているのでクリックして接続します。

これでAPI経由で記事を取得する準備は完了です！

query database

https://developers.notion.com/reference/post-database-query

試しにリクエストを投げてみます。公式に従ってPOSTしてみましょう

database_idは上記のスクショでCopy linkしたときに下記のように取得できます。 https://www.notion.so/hoge/{ここ：database_id}

このdatabase_idを使って以下のようにリクエストを組み立てると、記事の一覧が手に入ります。

curl -X POST 'https://api.notion.com/v1/databases/${database_id}/query' \
  -H 'Authorization: Bearer '"$NOTION_API_KEY"'' \
  -H 'Notion-Version: 2022-06-28' \
  -H "Content-Type: application/json"

レスポンスに含まれる next_cursor を リクエストボディに start_cursor として指定するとページネーションもできるので、これを利用すればすべての記事を取得することができそうです。

page/blockを取得する

先ほどのAPIではデータベースに登録されているPageの情報を手に入れることができますが、コンテンツの詳細内容についてはもう一つAPIを叩く必要があります。

ここで、pageを取得したくなりますが、notionの本文データはpageではなく、blockとして保存されているのでblockのAPIを叩く必要があるので注意しましょう。

https://developers.notion.com/reference/get-block-children

curl 'https://api.notion.com/v1/blocks/{page_id}/children?page_size=100' \
  -H 'Authorization: Bearer '"$NOTION_API_KEY"'' \
  -H "Notion-Version: 2022-06-28"

これでデータが取得できました！

プログラミングができる方なら、各言語ごとに有志の方が提供してくれているラッパーライブラリを使えばもう少し簡単に取得することが可能です。ただし、notion APIの仕様変更に対応しきれていない場合も多いので、できるだけ最近更新されているものを選ぶと良いでしょう。

記事をHTMLとしてフォーマットしなおす

記事の入稿時にはHTML形式で入稿すると、記事がマークアップされた状態で表示されちゃうので今回はそこまでやっちゃいます。

Goで書くなら以下のような感じ。

	var content string
	for _, block := range contents.Results {
		blockType := block.GetType()
		if strings.Contains(string(blockType), "heading") {
			content += "<h2>" + block.GetRichTextString() + "</h2>\n"
		} else if strings.Contains(string(blockType), "code") {
			content += "<pre>" + block.GetRichTextString() + "</pre>\n"
		} else if strings.Contains(string(blockType), "list") {
			content += "<li>" + block.GetRichTextString() + "</li>\n"
		} else {
			content += block.GetRichTextString() + "\n"
		}
	}
	return content

自分の好きな言語のラッパーライブラリをみて、BlockのTypeを判定し、それぞれに対応するHTMLタグを挿入すれば上記が実現できます。

このへんはLLMに任せるようにしてもできちゃうので、試してみるのもオススメです。

MicroCMSにAPI経由で記事を投稿してみる

今までの流れをシーケンス図で表すと以下のようになります。

notionからAPI経由で記事詳細を取得した後は、microCMSのPOSTを叩けば入稿は完了です。
記事冒頭に書いたAPIキーの権限設定を忘れずに！エラーが返ってきたらまずはそこを確認しましょう。

microCMSに戻って確認してみると、記事がちゃんと投稿されていることがわかります。

microCMSに移行したブログをみてみる

npm run dev でNext.jsのテンプレートを起動すると、ちゃんとmicroCMSのAPIを叩いて記事をブログとして表示できています。

さらに、検索機能を標準でカバーしているので、検索窓にワードを入れると記事の検索もカンタン。
これは便利ですね！

まとめ

今回、実は初めてmicroCMSを使ってみました。

数年前から気になってはいたものの、なかなか試す機会がなかったのですが、実際にmicroCMSを試してみると、思ったよりも簡単にブログを作成できてとても便利でした。

notionにはページの公開機能があるので、microCMSを使わなくてもいいでしょ！という話もあるかもれません。しかし、フロントをNext.jsで書くことでSEOに注力したり、ページの表示パフォーマンスを上げるようなカスタマイズのほか、テーマを自分で凝ったものに変更するなど柔軟性のある運用が可能になることが大きな魅力だと感じています。

microCMSはCMSなので、管理画面で記事を編集するのもカンタン。

エンジニアとは別にコンテンツを運用する方がいるケースでは連携の容易さという点で非常にメリットが大きいはず。管理画面作るの面倒ですからね。

フロントエンドも自前で用意することが出来るので、好きな言語の好きなフレームワークで作成することが出来るのも良いですね。

ブログ以外のWebコンテンツを作る場合でも、フロントのUX改善に集中するような使い方ができるのではないでしょうか。WordPressと違ってDBの面倒を見る必要がないので、バックエンド知識に不安があるチームでも安心して使えるはず。

想定していたよりも、とにかくカンタンで、すぐに試せるのが良いポイントでした～！
気になる方は是非お試しをー！！

Discussion