blog.tawa.me

東京から福岡移住したWeb開発の人が発信していくブログ

NotionがヘッドレスCMSになる!ZEIT製のNext.jsベースのテンプレートはお手軽にブログ・メディアを始められるツールになりそう

f:id:tawachan39:20200125193803j:plain

こんにちは、たわです。今回はZEITがNext.jsベースでNotionのデータをもとに静的ページを生成するテンプレートを発表したのでそのことについてです。

ZEITとは

ZEITは、

We enable developers to build and publish wonderful things

をミッションにしているチームです。

https://zeit.co/about

ZEIT Nowを運営

ZEIT Nowというホスティングサービスをやっています。簡単にデプロイできたりラムダが実行できるあたりが、

  • Firebase Hosting
  • Netlify

あたりとも似ています。

Next.jsを開発

あとはNext.jsを開発しているところとしても有名でしょう。ReactをベースとしてSSRまでできるフロントエンドフレームワークです。

Notionとは

あとここで登場するNotionというのは、色んな情報管理がまとめてできる便利なツールです。僕も愛用しています。

別記事で紹介しているので知らない方はぜひ。

f:id:tawachan39:20200119162204j:plain
こんな風に情報を管理できる

ZEIT製のテンプレートが発表された

そんなZEITが、Notionのデータを使って、

  • Next.jsベースで静的ページを生成して
  • ZEIT NOWにデプロイできる

テンプレートを公開したのです。

以下ページからセットアップができます。

https://notion-blog.now.sh/

具体的なやり方はここでは紹介しませんが、仕組みやポイントを書きます。

Notionがバックエンドになる

中にはZEITがヘッドレスCMSを発表したと表現されることがありますが、ヘッドレスCMSの役割を果たすのはあくまでNotionです。

Notionに保存されたデータを上手く活用して、ブログなどのページに仕立ててしまうのが今回発表されたテンプレートです。

イメージとしては以下図ような感じです。

f:id:tawachan39:20200119172918j:plain
イメージ図

①Notionで編集

テンプレートにあったページをNotion上に作成すればそこが編集画面になります。

テンプレート通りのページを生成するスクリプトも用意されているので簡単です。

②サーバーに保存

Notionは編集とほぼ同時に勝手に保存しているので意識することはありません。データは既にNotionのサーバーに保存されています。

③開発 & プッシュ

今度はNext.jsの開発です。デフォルトでかなり基礎は整っているのであとは見た目を整えるだけいい感じにできるのではないでしょうか。

開発が終わればGitHub上にプッシュしていきます。

④ビルド & デプロイ

デフォルトではGitHubへのプッシュをトリガーにして自動でビルドとデプロイが走ります。

セットアップ時にZEIT Nowのシークレットにアクセストークン等を設定すると思うので、それを使ってNotionサーバーから必要な情報もその時取得しています。

しばらく待てばもう公開された状態になります。

他のヘッドレスCMSを活用する場合と比べた利点

ヘッドレスCMSは最近流行りで、脱Wordpressを目論んで活用を試す人も多いのではないでしょうか。

断然セットアップが楽

ヘッドレスCMSは、

  • Strapi
  • Contentful
  • Netrify CMS

などなど色々あると思いますがそれらはセットアップがかなり大変だと思います。

ヘッドレスCMS側もセットアップが必要ですし、それを活用するフロントエンドを作るのも案外手間です。ヘッドレスCMS側で作ったデータ構造を適切にTypeScriptで処理できるようにしていくのも結構骨が折れるのでできればやりたくない...。

でもこのテンプレートはそこをすべて一気通貫で整えてくれるのがかなりポイント高いと思います。

拡張がかなり手軽

デフォルトでは、

  • Page
  • Slug(URL上の名前)
  • Published
  • Date
  • Authors

が設定されていますが、列は名前変えても足しても消しても大丈夫です。

{ id: 'ff114aaa-7912-4240-9126-763c17b6151b',
  Hoge: 'customized', // 追加した
  Slug: 'hogehoge',
  Date: 1579273200654,
  Authors: [ 'edf6fb9b-6181-42fa-8c18-fc3d1dff982a' ],
  Published: 'Yes',
  Page: 'テスト',
  preview: [],
  content:
   [ { role: 'editor', value: [Object] },
     { role: 'editor', value: [Object] },
     { role: 'editor', value: [Object] },
     { role: 'editor', value: [Object] },
     { role: 'editor', value: [Object] },
     { role: 'editor', value: [Object] },
     { role: 'editor', value: [Object] },
     { role: 'editor', value: [Object] },
     { role: 'editor', value: [Object] },
     { role: 'editor', value: [Object] },
     { role: 'editor', value: [Object] }
  ]
}

TypeScript側にはいい感じにパースされてくるのであとはいい感じにデータ処理を書けばすぐに対応できます。

コンテンツの種類も全部対応可能

デフォルトでは、

  • toggle
  • callout
  • bookmark

といったNotionのいくつかの記法が対応されていません。ですが、

switch (type) {
  case 'page':
  case 'divider':
    break
  case 'text':
    if (properties) {
      toRender.push(textBlock(properties.title, false, id))
    }
    break
  case 'image':
    ....
}

というようにcase文で見た目を定義されているだけなので追加・修正も容易です。

まとめ

デフォルトでかなり整っているにもかかわらず、それでも拡張性はかなり高いように感じました。

実際はただのNext.js(React)なので自由に見た目を変えられますし、ビルド後はただのHTMLなのでデプロイ先はデフォルトのZEIT Nowから変えることも容易でしょう。

ただNotion側は自由にフォーマットを変えられるが故に知らぬ間に壊してしまうということもありそうなのでそのあたりは注意が必要かもしれません。

WordPressを脱して自前のメディアやブログを運用するにはかなり始めやすい技術セットだと思います。