Notion公開サイトにカテゴリ・タグライブラリ・関連記事・問い合わせフォームを実装

最新の更新日
Apr 15, 2022 7:17 PM
Target Keywords
vol.

NotionをWebサイトとして公開した場合に追加設定しておきたいNotion上での設定項目について。通常のWebサイト・ブログだと備えている主要機能として、カテゴリ・タグ・関連記事・問い合わせフォームについて実装方法をご紹介します。

以下、SuperによってNotionをWebサイト化したものとして記載します。

純粋なNotion本体の公開リンクによる公開においても、基本的には同様です。

タグページ

image

WordPressのようなCMSと異なり、カテゴリやタグの形でまとめて表示させることはできません。

Superで利用したテンプレートでは、Notion上でのタグは表示される。ただクリックして一覧の形で表示させることは不可。

Notionをカスタマイズして、タグページを表示させる必要あり。

リレーションを組んで、タグのデータベースを作成(タグライブラリ)

「タグライブラリ」という方式を用いてNotionの機能で実装します。

[Notionでタグライブラリーを作るとめちゃくちゃ捗った|こにゃ|note](https://note.com/ko_nyaku/n/nbb0355b099ba#8tmzB)

通常、タグは"multiselect"のカラムを作成して実現することが多いかもしれません。しかしその場合にはリレーションを組むことができないため、別途「タグライブラリ」というデータベースを作成。そのタグライブラリデータベースと各記事を紐付ける形で実装します。

各タグライブラリのプロパティと各記事を"Relation"のカラムで紐付けます。

1対Nでの紐付けも可能。

データベース上としては、下画像の「Tag Library」カラムで紐付ける形となります。

image

実際に、本サイトではこのタグライブラリ形式でタグを実装しています。

のページでタグ一覧を確認、それぞれ関連するタグに絞り込まれたページを閲覧することができます。

Next.jsを利用してタグを取り出す実装

こちらはNotionを利用したブログをNext.jsで実装・公開する場合です。

その他

カテゴリページ

カテゴリページについては、次の2段階の方法で実装します。

  • 作成するカテゴリをOption(単一選択)プロパティとしてデータベース内に作成
  • 別途、カテゴリページを独立させた形で作成。そのカテゴリページ内にLinked View of Database ブロックを配置し、カテゴリページ名と同じカテゴリ名でフィルタをかける

作成するカテゴリをOption(単一選択)プロパティとしてデータベース内に作成

下画像の「Category」のような形になります。これは通常のNotion機能の「Select」機能で実現しています。

特にリレーションは組みません。ここで設定した名称と同じ名前で、新しくカテゴリページを作成します。

リレーションを組まない理由は、Categoryの場合は1-1の紐付けとなるため、運用でカバーできると判断したため。

名称を呼び出す場合にも、リレーションを組んで参照する場合のほうが呼び出し時間がかかります。

image

カテゴリページを作成し、Linked View of Databaseブロックでカテゴリを絞り込み表示

カテゴリページを新しく作成し、Linked View of Databaseを設置。下画像のように ”Category is 該当カテゴリ”で絞り込みます。

image

たとえば本ページのカテゴリはNotionと設定しています。実際に作成したNotionカテゴリページは

からご確認ください。

関連記事を記事文末に表示させる

関連記事セクションは、データベースビューを埋め込みフィルタをかけて表示させる

関連記事は、基本的にはNotionデータベースのギャラリービューにおいて、「カテゴリ」や「タグ」によってフィルタリングしたビューを掲載することで実装させることができそうです。

たとえば本ページだと、カテゴリを「Notion」として設定しているため、カテゴリ = Notionで絞り込んだ Linked View of Database ブロックを関連記事として配置します。

カテゴリページに埋め込んでいるLinked View of Database ブロックと同一。

あらかじめ作成してある該当のカテゴリページに埋め込まれているデータベースビューをコピーし、ペーストして関連記事として貼り付けるのが良いでしょう。

ただし、上記の方法だと「関連記事を掲載している自身のページ」が同じカテゴリ・タグの場合は表示がされてしまうので、追加のフィルタ(タイトル名など)を設定する必要があり、自身の記事を除外するにはひと手間必要です。

タイトル名によるフィルタだと後からタイトル名を変更した場合にフィルタが効かなくなってしまうため、別途IDなど変化させないプロパティを作成し、それによるフィルタリングをしても良いかも。

この作業はなかなか面倒なため、あえて除外せずそのまま自身の記事を含む形で関連記事を設置する、という運用でも良いかもしれません。

関連記事セクションを執筆時に毎回追加するのが面倒

ただし「関連記事ブロック」を自動的に表示、あるいは事前に保存したものを呼び出して追加することは難しそう。

NotionにPre-createしたブロックを保存させる機能があれば良いのですが(WordPressでいうところの再利用ブロック)、現時点ではこのような機能は存在しないようです。

いまのところ、該当のカテゴリページまたはタグページに表示しているLinked view of Databaseをコピーして、ペーストする形が最も簡便でしょう。

Template機能・Synced Block機能は関連記事として利用する場合は役不足

NotionのTemplate機能は「予め『その箇所に』作っておいたコンポーネントを、ボタンをクリックしたら『作成した直下の箇所』に追加で作成してくれる機能」。

同じ箇所で、繰り返し同じブロックを作成してくれることを省略してくれる機能。あらかじめ登録したブロックまたはページを生成する機能。

ページをまたぐことは想定されていない。結局、「データベースビューをコピーして、貼り付ける」という作業になりそう。

Synced Block機能は、「親ブロックを1つ作成し、そのブロックをコピー・ペーストで子ブロックとして表示させた場合、親ブロックでの変更がすべての子ブロックに反映される」という機能。

一見して時短になりそうなものの、結局コピー・ペーストするという手間はLinked View of Databaseをコピーする場合と同じ。

また関連記事ブロックとして利用する場合には、データベース自体を絞り込み表示させれば良く、親ブロックの変更を子ブロックに反映させる、という機能も特に必要ない。

お問い合わせフォームの実装

TypeFormなら簡単にNotionと連携可能

その他埋め込み形式の問い合わせフォーム

コメント機能

コメント機能については、下記SuperでNotionをサイトとして公開する場合として説明します。

Notionリンクで公開する場合には、Notion本体のコメント機能を利用しましょう。

静的サイト上でも動くコメント機能アプリケーション

Superでコメント機能を実装する場合、少なくとも静的サイト上で動く問い合わせフォームである必要あり。

Superが静的化を行うため。

上リンクのうち、月15件まで無料利用でき、セットアップもシンプルなCommentBoxが良さそう。

HTMLを埋め込むだけで動作する

NotionにHTMLコード埋め込みを行うにはApption.coによる変換作業が必要

[Notionに便利なウィジェットを配置する【Apption】](https://zenn.dev/ryuu/articles/notion-widgets)

ほか参考: [NotionにTableau(BI)を埋め込む方法1選(Embed)|maes_data(マエス)|note] (https://note.com/h_yoshida/n/naf39980420bb)

ページネーションは実装が難しそう

現状、ページネーションは実装できなさそう。

Database view as list pagination support : Notion

カテゴリやタグなどによって、構成を再検討しろとのこと。

あるいはフィルター機能を使って表示数を制限するなど。

公開Webサイト形式なら、公開日または更新日で1ヶ月以内と設定するなど。\

Category:

📚
Notion