notion

【無料で独自ドメインにも対応】Notion徹底活用録Part① ~Webページ作成編~

NotionのページをWebサイトとして公開してみました。非公式ですがカスタムドメインも当てることができました。その他レイアウトのコツや等を紹介しています。

前置き: NotionのShare機能について

メモから始まりタスク管理やガントチャートまでできてしまう非常に汎用性が高いNotionですが、シェア機能を活用することでページをWebに公開することができます。この機能をうまく活用することでLPをはじめとした静的なサイト制作のためのコストを限りなく下げることができます。

Share機能の使い方等については割愛しますが、例えば有料のProプランを契約することでGoogleにIndexさせることができたりもします。

Notionページ活用の小技集

この記事では自分がNotionページをLPとして公開した際に活用した小技みたいなものを紹介します。主に次の2つです。

  • カスタムドメインの設定
  • <script>タグの埋め込み

あくまで非公式の方法ため自己責任でお願いします。

カスタムドメインの設定方法

有料サービスを使う方法と無料で行う方法の2種類があります。この記事では無料の方法を詳しく説明しています。無料は有料の方法に比べてできることに縛りがあります。お好みで選ぶと良いと思います。

有料ホスト

以下の有料サービスを使ってホストする方法です。詳しいことは割愛しますが有料なだけに手間をかけずにホストできてかつ、GoogleAnalytics等のサービスと連携することができるなどするようです。

無料ホスト

CloudflareとCloudflare Workersの無料プランを使う方法です。あくまで非公式のため了承ください。英語ですがテキストではfruitionsiteが、動画ではこちらのYoutubeが参考になります。

手順

1. DNSの再設定

まず初めにCloudflareにサインインし、サイトを追加します。取得したドメインを入力します。ネームサーバーを変更するように案内が出るのでお名前.com等のドメイン管理サイトから指示通りに該当のDNSを書き換えます。Https化やMinifyの設定などはお好みで問題ないです。

2. レコードの追加

Cloudflare側で認証が下りたらドメインレコード設定を確認し、割り当てたいドメインがルートドメインであればA @ 1.1.1.1。割り当てたいドメインがサブドメインであればA subdomain 1.1.1.1を追加しておきます。

3. Workersの追加

workers

「Workersを管理する」からお好みのサブドメインを設定し、エディタページに飛びます。記述すべきコードが非常に長いので、記事の一番最後に掲載しています。最初の一部を下記を参考に書き換えた後、ペーストしてください。

  • MY_DOMAINには割り当てたいドメインを記入します。サブドメインの場合はsub.domain.comなどとします。
  • SLUG_TO_PAGEのKeyにはslugを、ValueにはnotionのページIDを各自記述します。
  • その他必要があればタイトル情報及びフォント、ページに埋め込みたいスクリプトを記述します。gtag.jsの中身を埋め込むことでanalyticsの利用も可能です。

下の例ではhttps://www.notion.so/aaaaaaaaaaaがyourdomain.comへホストされ、https://www.notion.so/bbbbbbbbがyourdomain.com/firstへとホストされます。ちなみにペーストするコードはfruitionからも生成できます。

/* CONFIGURATION STARTS HERE */

  /* Step 1: enter your domain name like fruitionsite.com */
  const MY_DOMAIN = 'yourdomain.com'; 
  
  /*
   * Step 2: enter your URL slug to page ID mapping
   * The key on the left is the slug (without the slash)
   * The value on the right is the Notion page ID
   */
  const SLUG_TO_PAGE = {
    '': 'aaaaaaaaaaa', //Valueには「https://www.notion.so/」以下の文字列を入力
    'first': 'bbbbbbbbb'
  };

  /* Step 3: enter your page title and description for SEO purposes */
  const PAGE_TITLE = '';  //ページタイトル SEOで表示させたい
  const PAGE_DESCRIPTION = '';  //ページの説明 SEOで表示させたい
  
  /* Step 4: enter a Google Font name, you can choose from https://fonts.google.com */
  const GOOGLE_FONT = '';  //Googleフォントを指定できる
  
  /* Step 5: enter any custom scripts you'd like */
  const CUSTOM_SCRIPT = ``;  //ページに挿入したいスクリプト
  

//以下略。。。(コードが長いので記事の一番最後に再掲しています)
4. Workersのルートを追加

root

Workerには先ほど追加したWorkerの名前を選択し、ルートの欄には次のように記入します。

  • ルートドメインに割り当てたい場合domain.com/*
  • サブドメインに割り当てたい場合sub.domain.com/*

以上です。

body要素にhtmlやJavascriptを埋め込む

通常Notionでは<script>タグは埋め込むことができません。apption.coHTMLSaveを使って任意のスクリプトをホストし、そのurlをnotionのembedで埋め込むことでbody要素内にも擬似的に埋め込むことが可能になります。apption.coは無料枠でスクリプトのホストは3個までが上限です。

簡単にですが以下に手順をまとめておきます。

  1. 上述したサービスで埋め込みたいスクリプトをホストする
  2. ホストしているurlをクリップボード等で保存する
  3. notionでurlを埋め込む

例えばStripeの決済ボタンを埋め込んだりができます。使い方によってはかなり便利だと思います。

レイアウト

LP作成時に活用したレイアウトの調整方法について紹介しようと思いましたが、思ったよりありませんでした。

横並びにする

screenshot

Notionではあらゆる要素はブロックとして扱われます。そしてブロックを横並びに配置することができます。floatのようなノリで並列関係の見出し要素を横に並べたりできます。やり方としてはブロックをドラックアンドドロップで横に持ってくるだけです。

Emojiの活用

screenshot2

文字情報だけでは殺風景になりがちですが、救済措置としてEmojiを使うことで最低限の彩りは確保できます。自分は見出しの最初では積極的に使うようにしています。

おまけ: 添付コード

適宜修正の上、以下のコードをWorkersのエディタに貼り付けてください。

/* CONFIGURATION STARTS HERE */

  /* Step 1: enter your domain name like fruitionsite.com */
  const MY_DOMAIN = 'yourdomain.com';
  
  /*
   * Step 2: enter your URL slug to page ID mapping
   * The key on the left is the slug (without the slash)
   * The value on the right is the Notion page ID
   */
  const SLUG_TO_PAGE = {
    '': 'aaaaaaaaaaa', //Valueには「https://www.notion.so/」以下の文字列を入力
    'first': 'bbbbbbbbb'
  };
  
  /* Step 3: enter your page title and description for SEO purposes */
  const PAGE_TITLE = '';
  const PAGE_DESCRIPTION = '';
  
  /* Step 4: enter a Google Font name, you can choose from https://fonts.google.com */
  const GOOGLE_FONT = '';
  
  /* Step 5: enter any custom scripts you'd like */
  const CUSTOM_SCRIPT = ``;
  
  /* CONFIGURATION ENDS HERE */
  
  const PAGE_TO_SLUG = {};
  const slugs = [];
  const pages = [];
  Object.keys(SLUG_TO_PAGE).forEach(slug => {
    const page = SLUG_TO_PAGE[slug];
    slugs.push(slug);
    pages.push(page);
    PAGE_TO_SLUG[page] = slug;
  });
  
  addEventListener('fetch', event => {
    event.respondWith(fetchAndApply(event.request));
  });

  function generateSitemap() {
    let sitemap = '<urlset xmlns="http://www.sitemaps.org/schemas/sitemap/0.9">';
    slugs.forEach(
      (slug) =>
        (sitemap +=
          '<url><loc>https://' + MY_DOMAIN + '/' + slug + '</loc></url>')
    );
    sitemap += '</urlset>';
    return sitemap;
  }
  
  const corsHeaders = {
    'Access-Control-Allow-Origin': '*',
    'Access-Control-Allow-Methods': 'GET, HEAD, POST, PUT, OPTIONS',
    'Access-Control-Allow-Headers': 'Content-Type',
  };
  
  function handleOptions(request) {
    if (request.headers.get('Origin') !== null &&
      request.headers.get('Access-Control-Request-Method') !== null &&
      request.headers.get('Access-Control-Request-Headers') !== null) {
      // Handle CORS pre-flight request.
      return new Response(null, {
        headers: corsHeaders
      });
    } else {
      // Handle standard OPTIONS request.
      return new Response(null, {
        headers: {
          'Allow': 'GET, HEAD, POST, PUT, OPTIONS',
        }
      });
    }
  }
  
  async function fetchAndApply(request) {
    if (request.method === 'OPTIONS') {
      return handleOptions(request);
    }
    let url = new URL(request.url);
    url.hostname = 'www.notion.so';
    if (url.pathname === '/robots.txt') {
      return new Response('Sitemap: https://' + MY_DOMAIN + '/sitemap.xml');
    }
    if (url.pathname === '/sitemap.xml') {
      let response = new Response(generateSitemap());
      response.headers.set('content-type', 'application/xml');
      return response;
    }
    let fullPathname = request.url.replace("https://" + MY_DOMAIN, "");
    let response;
    if (url.pathname.startsWith('/app') && url.pathname.endsWith('js')) {
      response = await fetch(url.toString());
      let body = await response.text();
      response = new Response(body.replace(/www.notion.so/g, MY_DOMAIN).replace(/notion.so/g, MY_DOMAIN), response);
      response.headers.set('Content-Type', 'application/x-javascript');
      return response;
    } else if ((url.pathname.startsWith('/api'))) {
      // Forward API
      response = await fetch(url.toString(), {
        body: request.body,
        headers: {
          'content-type': 'application/json;charset=UTF-8',
          'user-agent': 'Mozilla/5.0 (Macintosh; Intel Mac OS X 10_12_6) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/80.0.3987.163 Safari/537.36'
        },
        method: 'POST',
      });
      response = new Response(response.body, response);
      response.headers.set('Access-Control-Allow-Origin', '*');
      return response;
    } else if (slugs.indexOf(url.pathname.slice(1)) > -1) {
      const pageId = SLUG_TO_PAGE[url.pathname.slice(1)];
      return Response.redirect('https://' + MY_DOMAIN + '/' + pageId, 301);
    } else {
      response = await fetch(url.toString(), {
        body: request.body,
        headers: request.headers,
        method: request.method,
      });
      response = new Response(response.body, response);
      response.headers.delete('Content-Security-Policy');
      response.headers.delete('X-Content-Security-Policy');
    }
  
    return appendJavascript(response, SLUG_TO_PAGE);
  }
  
  class MetaRewriter {
    element(element) {
      if (PAGE_TITLE !== '') {
        if (element.getAttribute('property') === 'og:title'
          || element.getAttribute('name') === 'twitter:title') {
          element.setAttribute('content', PAGE_TITLE);
        }
        if (element.tagName === 'title') {
          element.setInnerContent(PAGE_TITLE);
        }
      }
      if (PAGE_DESCRIPTION !== '') {
        if (element.getAttribute('name') === 'description'
          || element.getAttribute('property') === 'og:description'
          || element.getAttribute('name') === 'twitter:description') {
          element.setAttribute('content', PAGE_DESCRIPTION);
        }
      }
      if (element.getAttribute('property') === 'og:url'
        || element.getAttribute('name') === 'twitter:url') {
        element.setAttribute('content', MY_DOMAIN);
      }
      if (element.getAttribute('name') === 'apple-itunes-app') {
        element.remove();
      }
    }
  }
  
  class HeadRewriter {
    element(element) {
      if (GOOGLE_FONT !== '') {
        element.append(`<link href="https://fonts.googleapis.com/css?family=${GOOGLE_FONT.replace(' ', '+')}:Regular,Bold,Italic&display=swap" rel="stylesheet">
        <style>* { font-family: "${GOOGLE_FONT}" !important; }</style>`, {
         html: true
        });
      }
      element.append(`<style>
      div.notion-topbar > div > div:nth-child(3) { display: none !important; }
      div.notion-topbar > div > div:nth-child(4) { display: none !important; }
      div.notion-topbar > div > div:nth-child(5) { display: none !important; }
      div.notion-topbar > div > div:nth-child(6) { display: none !important; }
      div.notion-topbar-mobile > div:nth-child(3) { display: none !important; }
      div.notion-topbar-mobile > div:nth-child(4) { display: none !important; }
      div.notion-topbar > div > div:nth-child(1n).toggle-mode { display: block !important; }
      div.notion-topbar-mobile > div:nth-child(1n).toggle-mode { display: block !important; }
      </style>`, {
        html: true
      })
    }
  }
  
  class BodyRewriter {
    constructor(SLUG_TO_PAGE) {
      this.SLUG_TO_PAGE = SLUG_TO_PAGE;
    }
    element(element) {
      element.append(`<div style="display:none">Powered by <a href="http://fruitionsite.com">Fruition</a></div>
      <script>
      const SLUG_TO_PAGE = ${JSON.stringify(this.SLUG_TO_PAGE)};
      const PAGE_TO_SLUG = {};
      const slugs = [];
      const pages = [];
      const el = document.createElement('div');
      let redirected = false;
      Object.keys(SLUG_TO_PAGE).forEach(slug => {
        const page = SLUG_TO_PAGE[slug];
        slugs.push(slug);
        pages.push(page);
        PAGE_TO_SLUG[page] = slug;
      });
      function getPage() {
        return location.pathname.slice(-32);
      }
      function getSlug() {
        return location.pathname.slice(1);
      }
      function updateSlug() {
        const slug = PAGE_TO_SLUG[getPage()];
        if (slug != null) {
          history.replaceState(history.state, '', '/' + slug);
        }
      }
      function onDark() {
        el.innerHTML = '<div style="margin-left: auto; margin-right: 14px; min-width: 0px;"><div role="button" tabindex="0" style="user-select: none; transition: background 120ms ease-in 0s; cursor: pointer; border-radius: 44px;"><div style="display: flex; flex-shrink: 0; height: 14px; width: 26px; border-radius: 44px; padding: 2px; box-sizing: content-box; background: rgb(46, 170, 220); transition: background 200ms ease 0s, box-shadow 200ms ease 0s;"><div style="width: 14px; height: 14px; border-radius: 44px; background: white; transition: transform 200ms ease-out 0s, background 200ms ease-out 0s; transform: translateX(12px) translateY(0px);"></div></div></div></div>';
        document.body.classList.add('dark');
        __console.environment.ThemeStore.setState({ mode: 'dark' });
      };
      function onLight() {
        el.innerHTML = '<div style="margin-left: auto; margin-right: 14px; min-width: 0px;"><div role="button" tabindex="0" style="user-select: none; transition: background 120ms ease-in 0s; cursor: pointer; border-radius: 44px;"><div style="display: flex; flex-shrink: 0; height: 14px; width: 26px; border-radius: 44px; padding: 2px; box-sizing: content-box; background: rgba(135, 131, 120, 0.3); transition: background 200ms ease 0s, box-shadow 200ms ease 0s;"><div style="width: 14px; height: 14px; border-radius: 44px; background: white; transition: transform 200ms ease-out 0s, background 200ms ease-out 0s; transform: translateX(0px) translateY(0px);"></div></div></div></div>';
        document.body.classList.remove('dark');
        __console.environment.ThemeStore.setState({ mode: 'light' });
      }
      function toggle() {
        if (document.body.classList.contains('dark')) {
          onLight();
        } else {
          onDark();
        }
      }
      function addDarkModeButton(device) {
        const nav = device === 'web' ? document.querySelector('.notion-topbar').firstChild : document.querySelector('.notion-topbar-mobile');
        el.className = 'toggle-mode';
        el.addEventListener('click', toggle);
        nav.appendChild(el);
        onLight();
      }
      const observer = new MutationObserver(function() {
        if (redirected) return;
        const nav = document.querySelector('.notion-topbar');
        const mobileNav = document.querySelector('.notion-topbar-mobile');
        if (nav && nav.firstChild && nav.firstChild.firstChild
          || mobileNav && mobileNav.firstChild) {
          redirected = true;
          updateSlug();
          addDarkModeButton(nav ? 'web' : 'mobile');
          const onpopstate = window.onpopstate;
          window.onpopstate = function() {
            if (slugs.includes(getSlug())) {
              const page = SLUG_TO_PAGE[getSlug()];
              if (page) {
                history.replaceState(history.state, 'bypass', '/' + page);
              }
            }
            onpopstate.apply(this, [].slice.call(arguments));
            updateSlug();
          };
        }
      });
      observer.observe(document.querySelector('#notion-app'), {
        childList: true,
        subtree: true,
      });
      const replaceState = window.history.replaceState;
      window.history.replaceState = function(state) {
        if (arguments[1] !== 'bypass' && slugs.includes(getSlug())) return;
        return replaceState.apply(window.history, arguments);
      };
      const pushState = window.history.pushState;
      window.history.pushState = function(state) {
        const dest = new URL(location.protocol + location.host + arguments[2]);
        const id = dest.pathname.slice(-32);
        if (pages.includes(id)) {
          arguments[2] = '/' + PAGE_TO_SLUG[id];
        }
        return pushState.apply(window.history, arguments);
      };
      const open = window.XMLHttpRequest.prototype.open;
      window.XMLHttpRequest.prototype.open = function() {
        arguments[1] = arguments[1].replace('${MY_DOMAIN}', 'www.notion.so');
        return open.apply(this, [].slice.call(arguments));
      };
    </script>${CUSTOM_SCRIPT}`, {
        html: true
      });
    }
  }
  
  async function appendJavascript(res, SLUG_TO_PAGE) {
    return new HTMLRewriter()
      .on('title', new MetaRewriter())
      .on('meta', new MetaRewriter())
      .on('head', new HeadRewriter())
      .on('body', new BodyRewriter(SLUG_TO_PAGE))
      .transform(res);
  }

読んでいただきありがとうございます!!

記事として取り上げたトピックを体系化してまとめた内容を電子書籍として販売しています。購入していただくことで執筆の応援ができます。詳細はこちらから