NotionをWebサイトとして公開した場合に追加設定しておきたいNotion上での設定項目について。通常のWebサイト・ブログだと備えている主要機能として、カテゴリ・タグ・関連記事・問い合わせフォームについて実装方法をご紹介します。
以下、Super.so によってNotionをWebサイト化したものとして記載します。
純粋なNotion本体の公開リンクによる公開や、国産のNotionサイト化ツール Wraptas においても、基本的には同様です。（Wraptasの場合はより簡便化された仕組みがあるかもしれません。）
目次:
- タグページ
- リレーションを組んで、タグのデータベースを作成（タグライブラリ）
- Next.jsを利用してタグを取り出す実装
- その他
- カテゴリページ
- 作成するカテゴリをOption（単一選択）プロパティとしてデータベース内に作成
- カテゴリページを作成し、Linked View of Databaseブロックでカテゴリを絞り込むビュー（フィルタ）を作成
- 関連記事セクションを記事文末に表示させる
- 関連記事セクションは、データベースビューを埋め込んでフィルタをかけて表示させる
- 関連記事セクションを執筆時に毎回追加するのが面倒 → フィルタで絞り込んだビューを保存することが可能です！🎉
- フィルタでカテゴリを絞り込んだビューの作成・保存方法
- 関連記事セクションのビューを呼び出す具体的な手順
- Template機能・Synced Block機能は関連記事としての利用には不向き
- お問い合わせフォームの実装
- TypeFormなら簡単にNotionと連携可能
- その他埋め込み形式の問い合わせフォーム
- コメント機能
- 静的サイト上でも動くコメント機能アプリケーション
- NotionにHTMLコード埋め込みを行うにはApption.coによる変換作業が必要
- ページネーションは実装が難しそう
タグページ
WordPressのようなCMSと異なり、カテゴリやタグの形でまとめて表示させることはできません。
Superで利用したテンプレートでは、Notion上でのタグは表示される。ただクリックして一覧の形で表示させることは不可。
Notionをカスタマイズして、タグページを表示させる必要あり。
リレーションを組んで、タグのデータベースを作成（タグライブラリ）
「タグライブラリ」という方式を用いてNotionの機能で実装します。
[Notionでタグライブラリーを作るとめちゃくちゃ捗った｜こにゃ｜note](https://note.com/ko_nyaku/n/nbb0355b099ba#8tmzB)
通常、タグは"multiselect"のカラムを作成して実現することが多いかもしれません。しかしその場合にはリレーションを組むことができないため、別途「タグライブラリ」というデータベースを作成。そのタグライブラリデータベースと各記事を紐付ける形で実装します。
各タグライブラリのプロパティと各記事を"Relation"のカラムで紐付けます。
1対Nでの紐付けも可能。
データベース上としては、下画像の「Tag Library」カラムで紐付ける形となります。
実際に、本サイトではこのタグライブラリ形式でタグを実装しています。
Next.jsを利用してタグを取り出す実装
こちらはNotionを利用したブログをNext.jsで実装・公開する場合です。
その他
カテゴリページ
カテゴリページについては、次の2段階の方法で実装します。
- 作成するカテゴリをOption（単一選択）プロパティとしてデータベース内に作成
- 別途、カテゴリページを独立させた形で作成。そのカテゴリページ内にLinked View of Database ブロックを配置し、カテゴリページ名と同じカテゴリ名でフィルタをかける
作成するカテゴリをOption（単一選択）プロパティとしてデータベース内に作成
下画像の「Category」のような形になります。これは通常のNotion機能の「Select」機能で実現しています。
特にリレーションは組みません。ここで設定した名称と同じ名前で、新しくカテゴリページを作成します。
リレーションを組まない理由は、Categoryの場合は1-1の紐付けとなるため、運用でカバーできると判断したため。
名称を呼び出す場合にも、リレーションを組んで参照する場合のほうが呼び出し時間がかかります。
カテゴリページを作成し、Linked View of Databaseブロックでカテゴリを絞り込むビュー（フィルタ）を作成
カテゴリページを新しく作成し、Linked View of Databaseを設置。下画像のように ”Category is 該当カテゴリ”で絞り込んだビューを作成します。
たとえば本ページのカテゴリは「Notion」として設定しています。実際に作成したNotionカテゴリページは
関連記事セクションを記事文末に表示させる
関連記事セクションは、データベースビューを埋め込んでフィルタをかけて表示させる
関連記事は、基本的にはNotionデータベースのギャラリービューにおいて、「カテゴリ」や「タグ」によってフィルタリングしたビューを掲載することで実装させることができそうです。
たとえば本ページだと、カテゴリを「Notion」として設定しているため、カテゴリ = Notionで絞り込んだ Linked View of Database ブロックを関連記事として配置します。
カテゴリページに埋め込んでいるLinked View of Database ブロックと同一。
あらかじめ作成してある該当のカテゴリページに埋め込まれているデータベースビューをコピーし、ペーストして関連記事として貼り付けるのが良いでしょう。
ただし、上記の方法だと「関連記事を掲載している自身のページ」が同じカテゴリ・タグの場合は表示がされてしまうので、追加のフィルタ（タイトル名など）を設定する必要があり、自身の記事を除外するにはひと手間必要です。
タイトル名によるフィルタだと後からタイトル名を変更した場合にフィルタが効かなくなってしまうため、別途IDなど変化させないプロパティを作成し、それによるフィルタリングをしても良いかも。
この作業はなかなか面倒なため、あえて除外せずそのまま自身の記事を含む形で関連記事を設置する、という運用でも良いかもしれません。
関連記事セクションを執筆時に毎回追加するのが面倒 → フィルタで絞り込んだビューを保存することが可能です！🎉
ただし「関連記事ブロック」を自動的に表示、あるいは事前に保存したものを呼び出して追加することは難しそう。
NotionにPre-createしたブロックを保存させる機能があれば良いのですが（WordPressでいうところの再利用ブロック）、現時点ではこのような機能は存在しないようです。
いまのところ、該当のカテゴリページまたはタグページに表示しているLinked view of Databaseをコピーして、ペーストする形が最も簡便でしょう。
（2023/11/12追記）データベースごとに、作成したビューを保存することが可能です！
ビュー保存機能によって、関連記事セクションの作成がグンとラクになりました。依然として記事ごとに関連記事セクションを手動で追加する必要はありますが、すべてをイチから毎回構築する手間に比べると大幅にラクになりました。
フィルタでカテゴリを絞り込んだビューの作成・保存方法
対象データベースの一覧画面から、Add viewを選択して新規ビューを作成します。
次画面では、新規ビューの表示設定をします。保存するビューの名前を入力し、表示形式はGallaryを選択。Doneで作成します。
最後に、フィルタの作成と表示プロパティ、ソート（並び替え）の調整を行います。作成したビューの右上にある…を選択すると、View optionsの設定が可能です。Properties、Filter, Sortをそれぞれ設定します。
FilterやSortの設定を完了させた後は、設定を反映させるためにSave for Everyoneを選択しましょう。
私の場合、設定内容としてFilterは「Webマーケティング」にチェック、Sortは 最新の更新日 > Descendingとして更新日順に並べ替えるビューを作成しています。
以上でフィルタによってカテゴリごとに絞り込んだビューの作成・保存が完了しました。
関連記事セクションのビューを呼び出す具体的な手順
まず、Linked View of databaseを呼び出して、ビューとして呼び出すデータベースを指定します。
本ブログの場合、ブログとして公開しているデータベース名は「Scripts」としているので、Scriptsを選択。
指定したデータベースの全体ビューから、保存しておいた作成済ビューを選択可能です。
以上で、作成済ビュー「カテゴリ名にNotionを含む」を呼び出すことができました！🎉 わずか3ステップで完了です。
Template機能・Synced Block機能は関連記事としての利用には不向き
NotionのTemplate機能は「予め『その箇所に』作っておいたコンポーネントを、ボタンをクリックしたら『作成した直下の箇所』に追加で作成してくれる機能」。
同じ箇所で、繰り返し同じブロックを作成してくれることを省略してくれる機能。あらかじめ登録したブロックまたはページを生成する機能。
ページをまたぐことは想定されていない。結局、「データベースビューをコピーして、貼り付ける」という作業になりそう。
Synced Block機能は、「親ブロックを1つ作成し、そのブロックをコピー・ペーストで子ブロックとして表示させた場合、親ブロックでの変更がすべての子ブロックに反映される」という機能。
一見して時短になりそうなものの、結局コピー・ペーストするという手間はLinked View of Databaseをコピーする場合と同じ。
また関連記事ブロックとして利用する場合には、データベース自体を絞り込み表示させれば良く、親ブロックの変更を子ブロックに反映させる、という機能も特に必要ない。
お問い合わせフォームの実装
問い合わせフォームは、外部ツールを埋め込む形で実装します。Googleフォームもシンプルで良いかもしれません。
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ヶ月以内と設定するなど。
この記事の気になった箇所を読み返す:
- タグページ
- リレーションを組んで、タグのデータベースを作成（タグライブラリ）
- Next.jsを利用してタグを取り出す実装
- その他
- カテゴリページ
- 作成するカテゴリをOption（単一選択）プロパティとしてデータベース内に作成
- カテゴリページを作成し、Linked View of Databaseブロックでカテゴリを絞り込むビュー（フィルタ）を作成
- 関連記事セクションを記事文末に表示させる
- 関連記事セクションは、データベースビューを埋め込んでフィルタをかけて表示させる
- 関連記事セクションを執筆時に毎回追加するのが面倒 → フィルタで絞り込んだビューを保存することが可能です！🎉
- フィルタでカテゴリを絞り込んだビューの作成・保存方法
- 関連記事セクションのビューを呼び出す具体的な手順
- Template機能・Synced Block機能は関連記事としての利用には不向き
- お問い合わせフォームの実装
- TypeFormなら簡単にNotionと連携可能
- その他埋め込み形式の問い合わせフォーム
- コメント機能
- 静的サイト上でも動くコメント機能アプリケーション
- NotionにHTMLコード埋め込みを行うにはApption.coによる変換作業が必要
- ページネーションは実装が難しそう
Category:
