今年のreInventポータルサイトはNotionとWraptasでできている

NotionとWraptasで作ったサイトを楽に運用するために実践したことを紹介します。

#Notion

#Wraptas

知恵蔵

2023.12.18

NotionとWraptasを使って2つ目のイベントサイトを作りました。

HTMLを編集しないメンバーでもNotionを更新すれば即時にサイト反映されるので、やはり更新が捗ります。 NotionとWraptasの環境は既に導入済みなので、今回はページを増やすだけですぐに立ち上げることができました。初期設定に関しては前回の記事を参照してください。
この記事では、Notion更新メンバーが少ないルールで直感的に操作できるように工夫した点と、自分自身の実装・運用を楽にするために工夫した点を紹介します。

こちらが実際のNotionページとサイトになります。サイトのCSSレイアウトにかかる工数を抑えるために、Notionを作成する時点で極力、サイトレイアウトに近い状態にしておきます。

Notion更新メンバーのルールを最小限にするために工夫したこと

サイトを一通り組み終わって、更新メンバーに挙動を説明する際に伝えたルールは以下の3つでした。

リンクを設定したら自動でリンクアイコンが付く
イベントスケジュールのテーブルでAWS、classmethodのタグを付けたい時は文字色を変える
見出し2（H2タイトル）の移動や増減をすると表示崩れを起こすので構成を大きく変えたい時は声をかけてもらう

それでは具体的に紹介していきます。

1. リンクを設定したら自動でリンクアイコンが付く

Notion側でリンクを設定するとサイト側ではリンクアイコンが付くようにCSSを設定しました。

Notion編集画面

サイト

リンクを設定するとNotion側でclass=”notion-link” を付与するつくりになっているので、そのクラスに対してCSSを設定しています。

.notion-link {
    color: #fff;
    text-decoration: underline;
    &::before {
      content: "";
      display: inline-block;
      position: relative;
      top: 5px;
      width: 22px;
      height: 22px;
      background: url(https://s3.ap-northeast-1.amazonaws.com/wraptas-prod/cm-event/d7db6d04-0bc9-4d47-8ae0-ff2efdd308ae/f5ee0cb….svg);
      background-size: contain;
      transform: rotate(270deg);
    }
    &:hover {
      text-decoration: none;
    }
}

2. イベントスケジュールのテーブルでAWS、classmethodのタグを付けたい時は文字色を変える

Notion側で文字色を変更するとclass="notion-orange” class="notion-blue”といった具合に色に応じたクラスが付与されるので、それを利用してタグの見た目になるようCSSを設定しています。この2つのクラスにのみ設定しているので、間違って他の色を付けてしまうとタグになりません。

.notion-orange {
    margin-right: 2px;
    padding: 1px 6px;
    font-size: 13px;
    color: #fff;
    border-radius: 3px;
    background: #ef7027;
}

.notion-blue {
    margin-right: 2px;
    padding: 1px 6px;
    font-size: 13px;
    color: #fff;
    border-radius: 3px;
    background: #2c70b3;
}

Notionで文字色を設定

サイト上ではタグになる

3. 見出し2（H2タイトル）の移動や増減をすると表示崩れを起こすので構成を大きく変えたい時は声をかけてもらう

Notion側で見出し2を使用した際に、Wraptas側で次の見出し2が登場するまでを1つのsectionブロックとして区切る機能があります。

参考サイト：Wraptas セクションを区切るブロックの指定

sectionの区切りには見出し1、見出し2、見出し3、区切り線のいずれかを指定できますが、このサイトでは見出し2を指定しています。

Notion編集画面

Wraptas設定画面

Wraptasの機能で追加されたsectionタグにはclassとidが付与されるので、これを利用して各ブロックに対して柔軟なレイアウトが実現できます。

こういったつくりになっていることから、見出し2の移動や増減を行う際はCSS側の変更作業もあわせて行わないと表示崩れを起こす可能性があります。その際はこちらに声をかけてもらうという運用で進めました。

以上がNotion更新メンバーに守ってもらったルールになります。

ルールとして明文化しなくてすむためにやったこと

ルールを極力少なくしたかっため、メンバーに伝えなくてもすむように実装側で巻き取ったことを紹介します。

Notion側で意図せずに作成してしまった空のブロックをサイト上では非表示にする

こちらの画面のように、Notion上で入力が終わって改行をした際に、Notion上では空のブロックが作成されています。

ドラッグして選択すると、空のブロックが存在することが確認できます。

空のブロックはHTML上では<div class="notion-blank"> </div>が生成されており、表示にも影響してしまいます。

1箇所だけ余白が大きいような見た目になってしまうので、notion-blankに対してdisplay: none; を設定することで回避しました。

.notion-blank {
    display: none;
}

Notion上でドラッグをして不要なブロックが入っていないかのチェックをお願いしようかと思いましたが、更新者の運用を楽にするためにCSS側で対応することにしました。

表示崩れ系でもう1点、イベントテーブルをスマホで表示した際に日付と曜日の改行が気になりました。右の状態になるよう調整が必要です。

通常のHTMLとCSSのみのコーディングであれば日付部分を<span>11/28</span>のように囲って、spanに対して改行を行わないというwhite-space: nowrap の設定を付与することが多かったのですが、日付部分だけを何かのタグで囲まないといけない場合、Notion側で文字色を変更するといった対応が必要になってしまいます。このルールを更新者に課したくはなかったので、11/28（火）に対してword-break: keep-all;を指定することで回避しました。

tr.notion-simple-table-row:first-of-type td.notion-simple-table-column {
    word-break: keep-all;
}

tr.notion-simple-table-row:not(:first-of-type) td.notion-simple-table-column:nth-of-type(1) span {
    word-break: keep-all;
}

参考サイト：word-break
日本語部分の改行をしないので（火）内での改行をしないようになります。時間（JST）の行落ちも防ぎたかったので１行目のtdに対しても同じ設定をしています。（これに関してはNotionのサイトに限らず、普段から適宜使用してもよかったと思いました。）

こういった地道な対応によって、更新者へのルールを減らしていきました。

おまけ　更新者がより安心して編集するための機能：Notionの履歴からバージョン復元

これはNotionそのものの機能になるのですが更新メンバー全員がNotionの扱いを熟知しているわけではないので、説明しておいたほうがスムーズに運用できると思った機能です。

Notionを更新すると即時にサイト反映されるので、表示崩れが起こってもすぐに気づくことができます。操作を間違えた等で以前の状態に戻したい場合、「ページ履歴」からバージョンを選択して復元することが出来るので、これを覚えておくと気楽に更新をトライしていくことが出来そうです。

ここまでが更新メンバーのための工夫となります。

コーディングの工数を減らすために工夫したこと

テスト環境が必要になったときのためのCSSのつくり

先ほど、Wraptasの機能で見出し2を使用した際にsectionブロックが追加されることを紹介しましたが、このsectionタグに付与されるclassとidの扱いについて紹介します。

ChromeのDevToolsを開いて確認すると、各見出し2を包括するsectionタグが生成されている状態です。それぞれに共通のclassと一意のidが付与されていることが確認できます。

固有のsection内においてCSSレイアウトをする場合、idで指定するほうが間違いがないのですが、このイベントサイトにおいては共通のclass=”separatedSection”を利用しています。sectionが上からn番目であるかを判定しています。

/* イベントスケジュール */
 section.separatedSection:nth-of-type(5) {
}

/* トピック、イベント告知 */
 section.separatedSection:nth-of-type(4),
 section.separatedSection:nth-of-type(6) {
}

/* movie */
 section.separatedSection:nth-of-type(8) {
}

/* Powered by */
 section.separatedSection:nth-of-type(9) {
}

このつくりにしている理由は、公開後に新たなコンテンツの追加やレイアウト変更が入った際にテストサイトを立ち上げやすくするためです。

テストサイトが必要になった場合、Notionページを複製し、その複製したページをWraptasに紐づけて新たに1ページ用意することになります。（テストページは検索に出ないようにnoindexの扱いにしておきます。）

新たに作成したページはidが振り直されているので、idで指定していた場合は全て書き直さなくてはいけません。テスト環境で作ったものをそのまま本番環境に持っていくこともできないので、工数がかかってしまう上にテスト環境として成立していない状態になってしまいます。

テスト環境の利便性をあげるために上記のようなclassの指定を採用しています。ここは状況にあわせてつくりを検討するのが良いかと思います。

Imagesは一番下のsectionに入れる

Wraptasにはファイルサーバは用意されていないので、使用したい画像はNotion上に貼っておくか、別のサーバを用意してアップしておく必要があります。通常の画像であれば、Notion上に貼ってそのまま表示させればよいのですが、CSSで指定する背景画像をどこに格納しておくか、構成を検討する必要が出てくるかと思います。

このサイトでは管理をシンプルにするために、Notionに貼っておくことにしました。ページの最下部に配置しています。

見出し2「Images」を書くことによってsectionで囲われるようにし、最下部のsectionを非表示にしています。

section:last-child {
    display: none;
}

サイト上では一見非表示ですがChromeのDevToolsで非表示プロパティを解除すると画像が確認できます。

アップされた画像のURLを確認し、背景画像に利用するという方法をとっています。

section#section-first {
    margin-top: 47px;
    background: url(https://s3.ap-northeast-1.amazonaws.com/wraptas-prod/cm-event/a652b9bc-be88-455e-b1fa-93ea4dd65312/e9ac2c4….png) center/100% 100% no-repeat;
}

メインビジュアルの背景画像を指定

Notionの独自CSSのリセット

NotionとWraptasで作るサイトのCSSレイアウトには、通常のサイトより多くの工数がかかってしまいます。HTML上では各要素に<h2 class="notion-h2”> といった「notion-」で始まる名前のClassが付与されており、Notion独自のCSSが既に当たっている状態になるため、その設定をリセットしないことには意図したレイアウトが反映されません。

はじめはNotionの独自CSSに対して不要な設定を上書きで打ち消していく作業を一つ一つ行っていましたが、効率が悪いため一括で指定することにしました。「notion-」で始まる名前のClass全てに適用されるよう、下記の指定を入れました。

[class^="notion-"] {
  margin: 0;
  padding: 0;
  min-width: unset !important;
}

Notionの独自CSSの多くにこちらのプロパティが設定されていたので、これにより不要な設定を打ち消していく作業をかなり軽減することができました。作業工数を優先するかどうかで採用を検討すると良いかと思います。

ちなみにNotionを利用していない2022年版の通常のポータルサイトがこちらになります。比較してみてもレイアウトに大差ないことが確認できるかと思います。Notionがベースであっても大抵のレイアウトは可能です。

Notionサイトの注意点

さて、Notionでも大抵のレイアウトは可能とお伝えしましたが、出来ないことがいくつかあります。

1.テーブルセルを結合できない

左が今年のNotionサイトのテーブル、右が去年の通常のサイトのテーブルです。同日に複数のイベントが開催される場合に日付部分のセルを結合することができません。

Notionのテーブルにはセルを結合する機能がないので、もし実現したい場合はHTMLコードでセルを結合したtableタグを書くことになります。（Notion上で「コードスニペット：HTML」を利用すると、Wraptasを介した際にそのままHTMLコードとして扱われます。）しかし、今回はHTMLを触らないメンバーが更新を行うため、Notionのパーツをそのまま利用することにしました。

~~2.画像にリンクをつけられない~~

~~こちらもNotion上で画像にリンクをつける機能がないため、実現が出来なかった機能です。~~