6月14日にグループ会社内で開催されたNotion勉強会に参加し、NotionとWraptasで作ったイベントサイトの制作過程を発表しました。
制作過程は過去にブログ記事にまとめていますが技術検証がメインだったので、勉強会ではWraptasの機能紹介を行いました。
- NotionとWraptasで作ったイベントサイト
- NotionとWraptasで作ったイベントサイトの制作過程ブログ
概要
まずは概要になります。発表スライドをもとに説明します。
概要は以上になります。それでは、本題に入ります。
デモンストレーション
NotionとWraptasでの実際の作業方法を紹介します。かんたんな操作で扱うことができます。
Wraptasの編集画面
Wraptasでアカウントを作成して、Notionページと紐付けます。
1.アカウント登録〜3.サイト作成 までは公式サイトを参照してください。
今回はデモンストレーション用のNotionページを使用します。イベントサイト用のNotionページから一部を切り出したものになります。
デモンストレーション用のNotionページ
NotionページをWraptas経由で公開するために、Notionページそのものを公開設定にしておく必要があります。
右上のメニュー「共有」からWeb公開用のリンクをコピーします。
Wraptasの画面でパーマリンクの追加を行います。任意のURLを指定し、先ほどコピーしたNotionのURLを貼り付けて保存します。
NotionとWtaptasの繋ぎ込みはこれで完了です。左側のパーマリンク設定一覧に追加できたことが確認できます。右側はWraptasを通して作成したサイトのライブプレビュー画面になります。
demoの「編集」をクリックします。こちらがWtaptasの編集画面になります。
ページタイトル、ページ説明文はmetaタグのtitleとdiscriptionになります。SNS用画像のアップもできます。CSSは追加CSSに記述していきます。HTML直接追記(headタグ)にはAnalyticsのタグなども書くことができます。JSの入力欄は用意されていませんがHTML直接追記(bodyタグ)に書くことで対応できます。
サイトに必要なものは一通り揃っている状態かと思います。
ちなみに、Wraptasには現状ファイルサーバーは用意されていないため、CSSファイルやJSファイルを読み込みたい場合は、別途サーバーを用意してアップする必要があります。同様に、使用したい画像もすべてNotionページに貼り付ける必要があります。（CSSで指定する背景画像もNotionページに貼っておくといった具合です。）イベントサイトではサーバーを用意せずにNotionとWraptasのみで構成しましたが、管理しやすい方法を検討するのが良さそうですね。
Wraptasでの独自CSS実装
それでは、CSSを編集して本番サイト同様の見た目にレイアウトしていきたいと思います。
本番サイトのレイアウト
まずは【注目セッション】で始まるタイトルの文字サイズを大きく、文字色を青に変えていきます。
Wraptas経由で生成されたHTMLのソースを確認してみます。ChromeのDevToolsでタイトル要素を見てみると、 h2であることが確認できました。
追加CSSに記述してページ下部の保存するボタンをクリックします。
h2{
font-size: 1.8rem;
color: #550edd;
}タイトルにスタイルが適用されました。
もう1箇所やってみます。「7/7 13:30~14:10 Keynote」に青背景を設定します。再度ChromeのDevToolsで確認すると、h3要素でした。
このように背景色、文字色、ボックスの高さ等を指定していきます。
h3{
display: grid;
place-items: center;
height: 57px;
font-size: 1.5rem;
color: #fff;
background: #550edd;
}スタイルが適用されました。この要領でレイアウトしていきます。
補足：実際のCSSは上記の書き方をするとページ内の全h2、h3要素にスタイルが適用されてしまうので、該当sectionブロックを指定して適用箇所を限定します。 sectionの扱いについてはこちらの記事で紹介しています。
ここまででNotionとWraptasのデモンストレーションは終わりです。
この後に、そもそもなぜNotionとWraptasを使ったのかについて前述のブログ記事に沿って説明しました。ここでは割愛いたします。
Q&A
発表後にいただいた質問を紹介します。
Q1：CSSが書けなくてもNotionとWraptasでサイトを作れる？
作れます。今回のイベントサイトは指定デザインがあったので、CSSを全てカスタムで書く必要がありましたが、WraptasにはテーマCSSも用意されているので、CSSを扱えなくてもサイトを作ることができます。「サイトデザイン編集」というメニューの中でテーマCSSを選択できます。（こちらはページ個別ではなく、サイト全体に適用されます。）
また、公式サイトにコピペで使えるサンプルCSS集もあります。
Q2：テーマCSSはスマホ表示も対応している？
対応しています。テーマCSSはレスポンシブ対応しているので、スマホでの閲覧も問題ないと思います。
Q3：データベースを扱う際、見せたくない情報は管理できる？
一応出来ています。イベントサイトでは、構成図左側のセッション情報テーブルをエクスポートして真ん中の公開用ワークスペースにインポートする作業を行っています。その際、見せたくない項目をフィルターしてからエクスポートしています。
Notionのセッション情報テーブルにWeb公開用のビューを追加し、ここでサイトに必要ない項目を非表示にします。
CSVエクスポートをする際に、データベースを含めるの項目で現在のビューを選択すれば、非表示にしたデータを含めずにエクスポートすることが出来ます。
勉強会の内容は以上になります。
まとめ
メリット
WraptasにはテーマCSSとカスタムCSSの入力が用意されているので、簡易的なサイトにも、指定されたデザインがあるサイトにも利用することができます。
そして、Notionを編集すればサイトに反映されるので、HTMLを書かないメンバーでも更新作業が可能になります。
留意点
逆に、更新頻度が少ないサイトや、更新者がコーダーだけというメンバー構成である場合、メリットを享受できないかもしれません。
CSSをカスタムする場合も、NotionとWraptasにデフォルトで付加されているCSSを考慮する必要があるので、CSSコーディングの作業に限れば通常より工数がかかります。
また、前述の通りファイルサーバーがないため、画像、CSS、JS等のファイル数が多い場合は管理が難しくなるケースもあると思います。
このように、恩恵を受けられるケースとそうでないケースがあるので、導入する際はメンバー間でデザインや運用方法を決定した上で採用を検討するのが良さそうです。今回のイベントサイトのように工数の大幅削減を図れるケースもあるので、参考にしていただけると幸いです。
6
