このサイトを作った経緯

motsuo本人がnotionで、仕事、プライベート関係なくつらつらとmemo書き含め書いている習慣があったので、これを活かして公開できる場を作りたいなと考えていた。

この記事をnotionAPIなどを使って公開する術がないかなと、考えていたらこんなものがあった。

このページは上記をforkして少しカスタマイズをして作っただけのページ。

かなり面白い試みで拡張性も高そうだったので、個人的にはこのサイトを元に拡張要素を足して遊んでいきたいなと考えている。

文章力全くないマンなので、読みづらい文章や意見がある方は僕のTwitter等に愚痴をリプしてきてください。

Untitled

書く予定の内容

ここからは使用させていただいているライブラリを紹介するために、色々な構文を記載し どのようなことがこのライブラリ内でできるか調査していく。

なお素のnotionはこちらから↓

https://www.notion.so/motsuo-works/0d4dd5fa19cc484da0f3a286458169c7

nextjs-notion-starter-kitのテスト

結論、かなり拡張性が高いツールで、びっくり！！！😄 notionでも普通に使用する機能は備わっており、 色文字や背景色に加え(背景色は若干スタイルが崩れている)、 太字や、イタリック、アンダーバー、コード文字 などにも対応していた。

// 簡単なコードも書けそうだった。
// ご丁寧にコピーボタンもある。
import React, { useState } from 'react';

function Example() {
  // Declare a new state variable, which we'll call "count"
  const [count, setCount] = useState(0);

  return (
    <div>
      <p>You clicked {count} times</p>
      <button onClick={() => setCount(count + 1)}>
        Click me
      </button>
    </div>
  );
}javascript

%% 流石にmermaidのviewには対応していないようだ・・・
graph TB
top["トップページ"]
top --> about["会社について"]
top --> service["製品情報"]
top --> company["会社概要"]
top --> ir["IR情報"]
top --> recruit["採用情報"]
recruit --> recruit1["新卒採用"]
recruit --> recruit2["キャリア採用"]
top --> contact["お問い合わせ"]mermaid

mermaid等は流石にサポートされていなかった。コード部分時々反応しない時がある。

今後個人的につけていきたい機能